3

Есть два примера. Почему в первом примере показует 3 блока, в то время как во втором примере показует один?

    1.

<html>

<head>
	<style>
		body {
			margin: 0;
		}
		
		.my {
			background-color: green;
			height: 100px;
			width: 200px;
			margin: 10px;
		}
	</style>
</head>

<body>
	<div class="my"></div>
	<div class="my"></div>
	<div class="my"></div>
</body>

</html>

    2.

<html>

<head>
	<style>
		body {
			margin: 0;
		}
		
		.my {
			background-color: green;
			height: 100px;
			width: 200px;
			margin: 10px;
		}
	</style>
</head>

<body>
	<div class="my" />
	<div class="my" />
	<div class="my" />
</body>

</html>

1
  • он там не один, он вкладывается один в другой. есть тэги которые парные, к ним относится div. Есть одиночные, input, br и т.п. То как браузер показывает невалидный html на совести браузера. В данном случае трактуется как открывающие тэги, без закрывающих.
    – teran
    14 дек 2017 в 10:51

2 ответа 2

6

div относится к тэгам-контейнерам и требует парного закрывающего тэга. В вашем примере во втором случае, закрывающие тэги отсутствуют, поэтому блоки просто вложены один в другой.

приведу пару цитат

Теги бывают двух типов — одиночные и парные (контейнеры). Одиночный тег используется самостоятельно, а парный может включать внутри себя другие теги или текст

Парные теги, называемые по-другому контейнеры, состоят из двух частей — открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный — <тег>, а в закрывающем используется слэш — </тег>. Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок.

Не все контейнеры требуют обязательно закрывающего тега, иногда его можно и опустить.

что касается закрытия /> то это не валидный HTML-синтаксис. Данная конструкция относится к XML, так что браузеры попросту игнорируют этот слэш в конце. В HTML-тэги либо не закрываются, либо закрываются парным закрывающим </tag>

.my {
  height: 100px;
  width: 200px;
  margin: 10px;      
}
    
.red {background-color: red;}
.green {background-color: green;}
.blue {background-color: blue;}
<div class="my red" />
<div class="my green" />
<div class="my blue" />

2

Там три блока на самом деле, просто т.к. браузер не видит закрывающего тега, он вкладывает их друг в друга и они друг на друга накладываются, потому может показаться, что только один блок отрисован. Это можно было бы понять, взглянув на код страницы с браузере. Результат такой из-за того, то в большинстве браузеров не предусмотрена такая вот конструкция.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.