Я заметил, что люди описывают специфику некоторых свойств отображения в сравнении 1 на 1, но есть немало, которые не были освещены в иллюстрировании различий. Может ли кто-нибудь объяснить различия между различными встроенными тегами отображения?
EDIT: более детальное определение мест, таких как w3schools, будет творить чудеса.
Я уверен, что единственное отличие для любого типа отображения с блочными и встроенными вариантами заключается в том, что тип отображения inline - * имеет встроенный ящик (т.е. в встроенный формат форматирования), в то время как другой имеет поле, отформатированное как блок-, при условии соблюдения большинства тех же соглашений о форматировании, что и другие элементы уровня блока в .
Все, что касается размещения в блоке содержимого , практически одинаково (особенности которого, конечно, регулируются самим типом отображения); любые другие тонкие различия были бы явно указаны в спецификации. Однако, насколько я могу судить, таких различий нет.
В CSS2.1, раздел 9.2.4 описывает block и встроенный блок следующим образом:
блок
Это значение заставляет элемент генерировать блок-блок.встроенный блок
Это значение заставляет элемент генерировать контейнер блока на уровне строки. Внутренняя часть встроенного блока форматируется как блок-блок, а сам элемент форматируется как атомный встроенный блок.
Обратите внимание, что "блок-блок" является сокращением для "блочного блока блоков", а контейнер-блок - это что-то, что может содержать блоки уровня блока.
Вы можете видеть, что оба этих значения приводят к тому, что элемент генерирует контейнер контейнера , в котором его содержимое всегда будет следовать одному и тому же набору правил форматирования, но , что box box box либо отформатирован как уровень блока, либо встроенный уровень.
Существует одна дополнительная разница между block и inline-block: поле inline-block always устанавливает новый контекст форматирования блока; блочные блоки делают это в соответствии с набором условий, Это не относится ни к одному из других типов отображения, на котором есть столбцы уровня и рядового уровня.
Раздел 17.2 описывает таблицу и inline-table следующим образом:
таблица (В HTML: ТАБЛИЦА)
Указывает, что элемент определяет таблицу уровня блока: это прямоугольный блок, который участвует в контексте форматирования блока.встроенная таблица (в HTML: ТАБЛИЦА)
Указывает, что элемент определяет таблицу на уровне строки: это прямоугольный блок, который участвует в контексте встроенного форматирования).
Flexbox модуль описывает flex и inline-flex следующим образом:
прогибается
Это значение заставляет элемент генерировать поле контейнера с гибким контейнером уровня.инлайн-флекс
Это значение заставляет элемент генерировать поле гибкого контейнера inline-уровня.
И Модуль макета сетки описывает сетку и inline-grid следующим образом:
Сетка
Это значение заставляет элемент генерировать контейнер контейнера сетки уровня блока.рядных сеток
Это значение заставляет элемент генерировать ящик контейнера сетки в линейном уровне.
Опять же, во всех этих сценариях таблица, контейнер гибких контейнеров или контейнер сетки будут вести себя точно так же, будь то блочный или встроенный. Гибкий контейнер всегда устанавливает контекст форматирования гибкости для своих элементов гибкости, а контейнер сетки всегда устанавливает контекст форматирования сетки для своих элементов сетки.
Некоторые сценарии могут препятствовать тому, чтобы поле в блочном контейнере было отформатировано как ящик на уровне строки, например абсолютное позиционирование или плавание, Для всех типов отображения, перечисленных выше, результатом является прямое преобразование из варианта inline - * в его обычный вариант блока. Например, inline-block преобразуется в block, а inline-flex преобразуется в flex. Опять же, это не влияет непосредственно на то, как форматируется содержимое элемента, а не в том, что касается спецификаций.