<div></div> и <div/> в чем разница?

356

16 декабря 2017, 05:33

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

<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>

<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>

Answer 1

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" />

Answer 2

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Css для хлебных крошек :last-child:after

Нужно, чтобы в последнем элементе в хлебных крошках не было сепаратораНе пойму почему не работает

275

CSS

Что дает наличие transform: translateZ(0) scale(1, 1) в body

Не первый раз встречаю правило transform: translateZ(0) scale(1, 1), какое применяется к тегу <body>

337

CSS

Нужна помощь с pop up

Подскажите, пожалуйста, как сделать так чтобы при наведении открывался попап и при этом можно было навести на содержимое попапа, сейчас он закрывается

262

MySQL

Структура базы данных mysql для транзакций

264