fbpx

Каталог статей

Каталог статей для размещения статей информационного характера

Как выучить

Элементы блочного уровня

Элементы блочного уровня

В этой статье мы рассмотрим элементы блочного уровня HTML и их отличие от элементов инлайн-уровня.

Элементы HTML (HyperText Markup Language) исторически классифицировались как элементы “блочного уровня” или “инлайн-уровня”. Поскольку это презентационная характеристика, в настоящее время она определяется CSS в макете потока. Элемент блочного уровня занимает все горизонтальное пространство своего родительского элемента (контейнера) и вертикальное пространство, равное высоте его содержимого, создавая тем самым “блок”.

Браузеры обычно отображают элемент блочного уровня с новой строкой до и после элемента. Вы можете представить их как стопку коробок.

Примечание: Элемент блочного уровня всегда начинается с новой строки и занимает всю доступную ширину (растягивается влево и вправо настолько, насколько это возможно).

Следующий пример демонстрирует влияние элемента блочного уровня:

Элементы блочного уровня

Использование

  • Элементы блочного уровня могут появляться только внутри элемента.

Блочный уровень по сравнению с инлайн

Существует несколько ключевых различий между элементами блочного уровня и элементами inline:

Как правило, элементы блочного уровня могут содержать встроенные элементы и (иногда) другие элементы блочного уровня. В этом структурном различии заложена идея о том, что блочные элементы создают “более крупные” структуры, чем инлайн-элементы.

По умолчанию элементы блочного уровня начинаются с новых строк, а инлайн-элементы могут начинаться с любого места в строке.

Различие между блочными и инлайн-элементами использовалось в спецификациях HTML до версии 4.01. Позже это бинарное различие было заменено более сложным набором категорий содержимого. В то время как категория “inline” примерно соответствует категории содержания фраз, категория “block-level” не соответствует напрямую ни одной категории содержания HTML, но элементы “block-level” и “inline” вместе взятые соответствуют содержанию потока в HTML. Существуют также дополнительные категории, например, интерактивный контент.

Элементы

Ниже приведен полный список всех элементов “блочного уровня” HTML (хотя “блочный уровень” технически не определен для элементов, которые являются новыми в HTML5).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *