Главная > CSS/Style Sheets > Изучаем CSS3: немного другая модель блока при помощи {box-sizing:border-box}

Изучаем CSS3: немного другая модель блока при помощи {box-sizing:border-box}


14 марта 2013, 12:15. Разместил: Design FactoRy
Классическая модель блока в CSS всегда была довольно интуитивно понятной. Благодаря CSS3, у нас появилось альтернативное решение: {box-sizing:border-box}. У этой модели есть несколько преимуществ, особенно когда дело доходит до гибких шаблонов.

Изучаем CSS3: немного другая модель блока при помощи {box-sizing:border-box}

Классическая модель блока: {box-sizing: content-box}

Давайте сразу возьмем пример из реальной жизни: если вам нужно узнать габариты коробки в реальном мире, вы ведь измеряете по внешний сторонам и углами. Вы не будете изменять различные отступы или толщину границы.

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

Изучаем CSS3: немного другая модель блока при помощи {box-sizing:border-box}

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

Временное решение на HTML

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

* Колонка структуры, созданная при помощи aside class="sidebar" должна получить 20% ширины, а поля – как слева, так и справа – получат по 10 пикселей.
* Вопрос: сколько места нам нужно зарезервировать для боковой панели в нашем шаблоне?
* Ответ: не имеем ни малейшего понятия. Это просто невозможность высчитать.

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

* Внутрь aside мы помещаем дополнительный div-элемент.
* aside имеет 20% ширины.
* Внутренний div оснащен опциональными значениями отступов, границы или поля.

Таким образом, отступы и другие значения не влияют на боковую панель. Она всегда будет сохранять свои 20%.

Это удваивание HTML-элементов сегодня стало настолько популярным, что мы практически позабыли о том, что это лишь временная мера, и намеренно стали думать, что так и нужно делать.

Гибкие блоки на CSS3: {box-sizing: border-box}

Практически в тайне от наших глаз, браузеры стали поддерживать другой подход, вторую модель блоков, которая немного отличается от привычной нам. В данной модели, отступы и границы уже включены в значение, которое задается для ширины. Она откликается на имя border-box, так как ширина здесь просчитывается от границы до границы. Давайте посмотрим, как все это выглядит:

Изучаем CSS3: немного другая модель блока при помощи {box-sizing:border-box}

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

* Начинаем с определения .sidebar { box-sizing:border-box}.
* Затем мы добавляем width:20% и случайное значение отступов или границы.

Готово!

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

Кстати, если вы добавите внешнее поле, то оно все равно добавится в общее значение, и это невероятно удобно.

border-box в повседневном использовании

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

Изучаем CSS3: немного другая модель блока при помощи {box-sizing:border-box}

Хей, даже IE8 распознает этот метод. Невероятно! Для Mozilla понадобится приставка, но в целом для тех, кто не заботится о поддержке в IE7, это может стать действительно глотком свежего воздуха:

* { 
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Это именно то, что рекомендовал Пол Айриш с своем блоке от февраля 2012 года.

Завершение

border-box – это нечто большее, нежели просто альтернативный вариант, который следует учитывать на всякий случай. Нам кажется, что в адаптивных шаблонах border-box станет естественным сам по себе.
Вернуться назад