Блочные и строчные элементы. Часть 1

Выделяют две основные категории HTML-элементов, которые соответствуют типам их содержимого и поведению в структуре веб-страницы — блочные и строчные элементы. С помощью блочных элементов можно создавать структуру веб-страницы, строчные элементы используются для форматирования текстовых фрагментов (за исключением элементов <area> и <img>).

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

Модель визуального форматирования CSS в деталях

Содержание:

Часть 1

1. Модель визуального форматирования

2. Блочные элементы и блочные контейнеры

3. Строчные элементы и строчные контейнеры

4. Строчно-блочные элементы

5. Ширина содержимого: свойство width

Часть 2

6. Минимальная и максимальная ширина: свойства min-width и max-width

7. Высота содержимого: свойство height

8. Минимальная и максимальная высота: свойства min-height и max-height

9. Расчет высоты строки: свойства line-height и vertical-align

10. Изменение блочной модели: свойство box-sizing

1. Модель визуального форматирования

HTML-документ организован в виде дерева элементов и текстовых узлов. Модель визуального форматирования CSS представляет собой алгоритм, который обрабатывает HTML-документ и выводит его на экран устройства.

Каждый блок в дереве представляет соответствующий элемент или псевдоэлемент, а текст (буквы, цифры, пробелы), находящийся между открывающим и закрывающим тегами, представляет содержимое текстовых узлов.

Чтобы создать дерево блоков, CSS сначала использует каскадирование и наследование, позволяющие назначить вычисленное значение для каждого css-свойства каждому элементу и текстовому узлу в исходном дереве.

Затем для каждого элемента CSS генерирует ноль или более блоков в соответствии со значением свойства display этого элемента. Как правило, элемент генерирует один основной блок, который представляет самого себя и содержит свое содержимое. Некоторые значение свойства display, например, display: list-item;, генерируют блок основного блока и блок дочернего маркера. Другие, например, display: none;, приводят к тому, что элемент и/или его потомки вообще не генерируют блоки.

Положение блоков на странице определяется следующими факторами:

размером элемента (с учётом того, заданы они явно или нет);
типом элемента (строчный или блочный);
схемой позиционирования (нормальный поток, позиционированные или плавающие элементы);
отношениями между элементами в DOM (родительский — дочерний элемент);
внутренними размерами содержащихся изображений;
внешней информацией (например, размеры окна браузера).

2. Блочные элементы и блочные контейнеры

Блочные элементы — элементы высшего уровня, которые форматируются визуально как блоки, располагаясь на странице в окне браузера вертикально. Значения свойства display, такие как block, list-item и table делают элементы блочными. Блочные элементы генерируют основной блок, который содержит только блок элемента. Элементы со значением display: list-item генерируют дополнительные блоки для маркеров, которые позиционируются относительно основного блока.

Блочные элементы могут размещаться непосредственно внутри элемента <body>. Они создают разрыв строки перед элементом и после него, образуя прямоугольную область, по ширине занимающую всю ширину веб-страницы или блока-родителя.

Блочные элементы могут содержать как строчные, так и блочные элементы, но не оба типа элементов сразу. При необходимости, строки текста, принадлежащие блочному контейнеру, могут быть обёрнуты анонимными контейнерами, которые будут вести себя внутри блока как элементы со значением display: block;, а строчные элементы обёрнуты элементом <p>. Блочные элементы могут содержаться только в пределах блочных элементов.

Элемент <p> относится к блочным элементам, но он не должен содержать внутри себя другой элемент <p>, а также любой другой блочный элемент.

Анонимные блоки уровня блока

Как говорилось выше, блочные элементы могут содержать только блочные или только строчные элементы. В случае смешанного контента, когда блочный элемент одновременно содержит текстовое содержимое и другой блочный элемент, алгоритм визуального форматирования добавляет дополнительную обёртку для текстового содержимого — так называемый анонимный блок. Анонимный блок не связан ни с одним элементом. Поскольку такой контейнер не имеет названия, то к нему нельзя применить CSS-стили для оформления. Анонимные блоки наследуют свойства окружающего блока, а не наследуемые свойства принимают первоначальное значение.

📷 РИС. 1. АНОНИМНЫЕ БЛОКИ УРОВНЯ БЛОКА

3. Строчные элементы и строчные контейнеры

Встроенные (строчные) элементы генерируют внутристрочные контейнеры. Они не формируют новые блоки контента. Значения свойства display, такие как inline и inline-table делают элементы строчными.

📷 РИС. 2. ОТЛИЧИЕ ВОЗДЕЙСТВИЯ CSS-СВОЙСТВ PADDING И MARGIN НА СТРОЧНЫЕ И СТРОЧНО-БЛОЧНЫЕ ЭЛЕМЕНТЫ

Строчные элементы могут содержать только данные и другие строчные элементы. Исключение составляет элемент <a>, который согласно спецификации HTML5 может оборачивать целые абзацы, списки, таблицы, заголовки и целые разделы при условии, что они не содержат другие интерактивные элементы — другие ссылки и кнопки.

Анонимные блоки уровня строки

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

📷 РИС. 3. АНОНИМНЫЙ БЛОК УРОВНЯ СТРОКИ

4. Строчно-блочные элементы

Существует еще одна группа элементов, которые браузер обрабатывает как строчно-блочные {display: inline-block;}. Такие элементы являются встроенным, но для них можно задавать поля, отступы, ширину и высоту.
<audio>, <button>, <canvas>, <embed>, <input>, <keygen>, <meter>, <object>, <progress>, <select>, <textarea>, <video>.

5. Ширина содержимого: свойство width

Свойство width определяет ширину содержимого блока.

Это свойство не применяется к незамещаемым строчным элементам display: inline;. Ширина содержимого встроенных блоков определяется шириной отображаемого содержимого внутри них. Встроенные блоки сливаются в линейные блоки. Ширина линейных блоков определяется шириной содержащего блока, но может быть уменьшена из-за наличия свойства float.

Отрицательные значения не допускаются.

Свойство не наследуется.

width

Значения:

длина - Ширина элемента задается в единицах длины, например, px, em и т.д.
% - Вычисляется относительно ширины содержащего блока. Для абсолютно позиционированных элементов процент вычисляется с учетом ширины области отступов padding содержащего блока.
auto - Ширина вычисляется в зависимости от значений других свойств. Значение по умолчанию.
inherit - Наследует значение свойства от родительского элемента.

Синтаксис

CSS

width: 100px;
width: 10em;
width: 50%;
width: auto;
width: inherit;

Продолжение в следующей статье!