Управление блочной моделью CSS

От автора: все состоит из боксов – это, возможно, самый важный для понимания момент в CSS. Если в деталях, то каждый элемент в документе генерирует бокс. Бокс может быть блочного или инлайнового уровня. Тип бокса определяет то, как элемент будет воздействовать на макет страницы.

Создается бокс или нет, а также тип этого бокса зависит от языка разметки. CSS спроектирован как способ стилизации HTML-документов, поэтому модель визуального рендеринга CSS в значительной степени корениться в различиях между блочными и инлайновыми элементами в HTML. По умолчанию элементы p и section создают боксы блочного уровня, а теги a, span и em создают инлайновые боксы. SVG вообще не использует блоковую модель, поэтому большая часть макетных свойств CSS не работает с SVG.

Боксы блочного уровня создают новые блоки контента, как видно на Рисунке 4.1. Блочные боксы рендерятся вертикально в исходном порядке и заполняют (кроме таблиц) всю ширину контейнера. Это обычное отображение значений block, list-item, table и других table-* значений (например, table-cell).

Рисунок 4.1. боксы блочного уровня в тегах h1, p, ul и table внутри контейнера (серая область)

Боксы инлайнового уровня не формируют новые блоки контента. Эти боксы создают строки внутри блочного бокса. Они отображаются горизонтально и заполняют ширину бокса-контейнера, перепрыгивая на новые строки по необходимости, как показано на Рисунке 4.2. К боксам инлайнового уровня относятся значения свойства display inline, inline-block, inline-table и ruby.

Рисунок 4.2. пример инлайнового бокса с margin: 1em и padding: 5px

Но как же рассчитываются размеры бокса? Вот тут все немного сложнее. На Рисунке 4.3 видно, что размеры бокса складываются из контентной области, padding’а и ширины, плюс ширина рамки, как определено в CSS2. Ширина margin’а создает на элементе margin-бокс и влияет на другие элементы в документе, но никак не воздействует на размеры самого бокса.

Рисунок 4.3. блоковая модель по CSS 2.1

Например, тег p с width: 300px, padding: 20px и border: 10px будет иметь вычисленную ширину в 360px. Ширина складывается из ширины параграфа, левого и правого паддинга, а также из левого и правого border-width. Чтобы общая ширина элемента была 300px, при этом сохраняя 20px паддинга и 10 пикселей рамки, необходимо задать width: 240px. Большинство браузеров вычисляют ширину именно таким образом. Но это не относится к IE 5.5.

IE 5.5 использует свойство width, как окончательное значение для размеров бокса, загоняя паддинг и рамку внутрь бокса, как показано на Рисунке 4.4. Оба значения вычитаются из width, уменьшая размер контентной области. Многие программисты считают такой подход более разумным, несмотря на то, что он работает не по спецификации.

Рисунок 4.4 блоковая модель в CSS 2.1 и блоковая модель в старом IE 5.5

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

Выбор блоковой модели с помощью свойства box-sizing

Свойство box-sizing определено в спецификации CSS Basic User Interface Module Level 3 и принимает два возможных значения: content-box и border-box.

По умолчанию установлено значение content-box. С этим значением свойства width и height влияют на размер контентной области, что совпадает с поведением, описанным в спецификации CSS 2.1. Такое поведение установлено по умолчанию в современных браузерах (как показано на Рисунке 4.4).

Значение border-box добавляет немного магии. Свойства width и height начинают применяться к внешней границе рамки, а не к контентной области. Рамка и паддинг рисуются внутри бокса элемента, что совпадает со старым поведением в IE 5.5. Давайте разберем пример, в котором ширина в процентах совмещена с px на паддинге и рамке:

К тегам article и aside применен CSS-код ниже, что дает нам макет, показанный на Рисунке 4.5, где первый элемент имеет ширину 60%, а второй – 40%:

Рисунок 4.5. элементы с box-sizing: content-box

По умолчанию aside и article задано свойство box-sizing со значением content-box. Значения border-width и padding добавляют 40 пикселей к ширине элементов, что изменяет соотношение 60%/40%. Давайте добавим к тегам article и aside свойство box-sizing: border-box:

Изменения показаны на Рисунке 4.6: ширина элементов сохранилась, однако из-за box-sizing: border-box ширина теперь состоит также из рамки и паддинга. Width теперь применяется к внешней грани рамки, а не к контентной области, поэтому наши элементы плотно прижаты друг к другу и не сместились на новую строку.

Рисунок 4.6 элементы с box-sizing: border-box

Я предложил бы использовать свойство box-sizing: border-box. Оно упрощает жизнь, с ним не нужно вычислять width, чтобы подогнать ширину под padding и border.

Лучше всего применять box-sizing: border-box с правилами сброса. Пример ниже взят из статьи Криса Койера с CSS-Tricks «наследование box-sizing, вероятно, еще более лучшая практика»:

Код выше применяет border-box ко всем тегам по умолчанию, не изменяя поведения box-sizing в существующих частях вашего проекта. Если вы точно знаете, что у вас не будет сторонних или старых компонентов, которые полагаются на content-box, то эти правила можно упростить:

В таблице 4.1 представлена текущая поддержка в браузерах свойства box-size: border-box

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

Автор: Tiffany Brown

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: