Блочная модель (display | box-sizing | overflow)

Каждый элемент в CSS - это блок, чтобы правильно верстать важно понимать поведение элементов в потоке относительно друг друга. Элементы страницы делятся на блочные и строчные.

Блочные и строчные элементы

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

Ширину и высоту можно задать вручную с помощью свойсвт width и height. Высота блочного элемента определяется автоматически и зависит от его содержимого. Можно задавать внешние отступы (margin) и внутренние отступы (padding) как по горизонтали, так и по вертикали.

Блочные теги (по-умолчанию display: block):

div, hr
p, pre, h1-h6
ol, ul, li
header, footer, nav
section, article, main, aside
blockquote
dd, dl, dt
table
figure, figcaption
form

MDN Web Docs - блочные элементы

Строчные элементы обычно находятся внутри блочных элементов, идут один за другим в строчку и, как правило, содержат одно или несколько слов (поток текста). Их задача - разметка страницы на уровне строк, также они не нарушают потока содержимого (не требуют новой строки после каждого элемента). Ширина (размер) строчного элемента зависит от его содержимого (например текста).

Строчным элементам нельзя установить размеры width и height, а также вертикальные отступы не работают.

Строчные теги (по-умолчанию display: inline):

span, br
a
img, picture
em, strong, mark
b, i
q, cite
abbr
input, button, select, textarea, label
code, iframe
del, ins
sub, sup
audio, video
td, th
script
time

MDN Web Docs - строчные элементы

display

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

display-outside (block, inline...) - эти ключевые слова определяют внешний тип отображения (outer display type) элемента, который играет существенную роль в схеме потока.
display-inside (flex, table, grid...) - эти ключевые слова определяют внутренний тип отображения ( inner display type) элемента, который определяет тип контекста форматирования, в котором располагается его содержимое (при условии, что это незаменяемый элемент).
display-box (none, contents) - эти значения определяют, генерирует ли элемент отображение блока вообще.

Каждый блок в CSS имеет внешний тип отображения, определяющий блочный он или строчный. Элементы также имеют и внутренний тип отображения, определяющий расположение элементов внутри них. По умолчанию элементы внутри блока располагаются в нормальном потоке (normal flow): они ведут себя как другие блочные или строчные элементы. Однако если мы установим display: flex для элемента, внешний тип отображения примет значение block, а внутренний изменится на flex. То есть прямые дочерние элементы этого блока станут flex-элементами и будут размещены в соответствии с правилами спецификации Flexbox!

Свойство display: block обозначает блочный элемент, а display: inline — строчный. Элементу можно задать режим отображения блочно-строчный, указав ему свойство display: inline-block. Особенности inline-block элементов:

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

Свойство display: table задаёт боксу элемента тип таблица. Особенности элементов с табличным боксом:

можно задавать ширину, высоту, рамки, отступы;
по умолчанию ширина зависит от содержания;
переносы строки до и после элемента.

Значение свойства display: none используется довольно часто. С его помощью можно скрыть элемент, как будто его и не было (элемент не отображается и не занимает места на странице). Веб страница формируется так, будто элемента и не существовало!

MDN Web Docs - display

Блочная модель

Блочная модель полностью применима только к блочным элементам, строчные элементы используют не все свойства. Модель определяет, как разные части элемента — поля, рамки, отступы и содержимое — работают вместе, чтобы создать элемент на странице. Составляющие части блока:

Контент (содержимое блока)
Внутренний отступ (padding)
Border (рамка)
Внешний отступ (margin)

Существует две модели: стандартная и альтернативная. В стандартной блочной модели высота и ширина определяют размеры контента

box-sizing

*, *:before, *:after {
    box-sizing: border-box;
}

Свойство box-sizing отвечает за алгоритм расчета высоты и ширины блока. Обычно данное свойство указывают при обнулении стилей. Оно имеет два основных значения:

content-box — (по умолчанию) соответствует стандартной блочной модели, при которой свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
border-box — изменяет режим расчёта ширины элемента на описанный выше: свойства width и height включают в себя значения контента, внутренних полей и границ, но не внешних отступов (margin).

MDN Web Docs - блочная модель

overflow

Свойство overflow управляет отображением содержания блочного элемента, если контент целиком не помещается в заданные блоку размеры. Оно определяет, необходимо ли для переполненного блочного элемента содержимое обрезать, предоставить полосы прокрутки или просто отобразить. Значения свойства overflow:

overflow: visible - (по умолчанию) все содержание элемента отображается полностью, даже за пределами установленной высоты и ширины;
overflow: hidden - отображается только область внутри элемента, остальное скрывается (без предоставления полос прокрутки);
overflow: scroll - контент обрезается и браузер использует элементы прокрутки (всегда!), не важно было ли обрезано содержимое или нет;
overflow: auto - подключает только те полосы прокрутки, которые нужны;
overflow: inherit - наследуется значение родителя.

Заметки

margin может иметь отрицательные значения, в отличие от padding`a!
задать свойства width, min-,max-width строчному элементу нельзя, но тегу IMG можно!
задать свойства height, min-,max-height строчному элементу нельзя, но тегу IMG можно!
Бокс - это по сути прямоугольная область, являющаяся изображением элемента, которая имеет размеры и может вкладываться в другие боксы.
Чтобы спрятать элемент существует свойство visibility: hidden. Оно «прячет» элемент — он становится невидимым, но занимает место на странице!
Эффект «схлопывания» внешних отступов — когда отступ по вертикали между двумя соседними элементами равен максимальному отступу между ними. Допустим отступ первого элемента равен 50px, а второго 30px, тогда отступ между ними будет равен 50px. Горизонтальные отступы между элементами просто складываются.
Эффект «выпадания» — это ещё один эффект, связанный с вертикальными внешними отступами. Если внутри родительского блока расположить блок и задать ему отступ сверху, то внутренний блок прижмётся к верхнему краю родительского, а у родительского элемента появится отступ сверху. То есть верхний отступ внутреннего элемента «выпадает» из родительского элемента. Если у родительского элемента тоже был задан внешний отступ, то выберется больший их них.

Разделение элементов на строчные или блочные существует еще со стандарта HTML4, а в новом HTML5 был предложен новый подход, в котором применение того или иного HTML элемента должно определяться на основе контента, который он должен содержать. Но и классическое разделение никуда не делось, сейчас мы просто понимаем под этим стилевое отображение (значение свойства display), которое элемент имеет по умолчанию (т.е. строчный элемент – по умолчанию имеет display: inline, а блочный – по умолчанию display: block).

#html #сss