В чем разница между элементом TG40 по умолчанию и элементом TG41 по умолчанию с display: block
?
SPAN с блоком отображения
Ответ 1
Существует различие в отношении достоверности и семантики элементов HTML. В противном случае они идентичны.
div
иspan
оба определены как универсальные контейнеры без более глубокого значения с точки зрения HTML. Одна по умолчанию блокирует отображение, другая - встроенную, поскольку это две основные группы, в которые почти любой другой элемент попадает вНекоторые элементы должны содержаться в элементе, который определен как блок. Это не имеет ничего общего со свойством CSS
display
, но с семантикой HTML: общая идея основана на том, что inline всегда являются потомками блоков (что, в общем, хорошая идея)Теперь, если у вас есть
span
сdisplay:block
, он, в смысле CSS, будет действовать точно так же, какdiv
. Однако с семантической точки зрения, если вы встраиваете элементы уровня блока вspan
, вы создаете недопустимый HTML, потому что вы вкладываете блок во встроенный элемент.
Ответ 2
- Элементы, которые могут содержаться в div или span (создание отображения span: block, например, не позволяет разместить внутри него таблицу)
- рендеринг, когда CSS недоступен
Ответ 3
<span>
по умолчанию используется display:inline;
, тогда как <div>
по умолчанию - display:block;
Это единственное различие между ними, поэтому, если вы укажете display:block;
для диапазона, он будет действовать так, как обычно действует div, и наоборот.
display:inline;
заставляет поток элемента работать в тексте тела, тогда как display:block;
заставляет его действовать как блок (как ни странно!).
(обратите внимание, что также существует менее известный вариант display:inline-block;
, который является промежуточным домом между ними. <img>
теги по умолчанию для этого параметра)
Ответ 4
<span>
является встроенным элементом по умолчанию. То есть элемент <span>
не генерирует никаких разрывов до и после. Кроме того, есть некоторые свойства, которые нельзя применить к встроенным элементам, например height.
<div>
по умолчанию является элементом уровня блока. Это <div>
создает прерывания до и после него при визуализации.
Вы можете изменить элемент уровня блока на встроенную строку и наоборот с помощью свойства display
.
См. this для объяснения всех свойств display
.
Ответ 5
Вы можете найти здесь определение свойства CSS отображения.
Как указано в этой ссылке, значение block
указывает, что:
Элемент будет генерировать блок-блок (разрыв строки до и после элемента)
По умолчанию значение этого свойства равно inline
, которое определяется как:
Элемент будет генерировать встроенное поле (без разрыва строки до или после элемента). Это значение по умолчанию
Ответ 6
A span
элемент со стилем display: block
по существу становится элементом div
. Это заставляет ширину элемента заполнять любой контейнер, в котором он находится.
Ответ 7
div - это элемент блока, а span - встроенный элемент. Есть две вещи, которые заслуживают внимания.
- Видимое поведение - концепции формирования блоков VS Внутренний формат форматирования
- (X) отношения валидности HTML - в принципе, вы никогда не должны опускать элемент блока внутри встроенного, поэтому, если вам нужно создать структуру элементов поведения блока внутри элемента ссылки (который является встроенным), используйте интервалы и установите их отображение: block via CSS