Классическая модель блока: {box-sizing: content-box}
Давайте сразу возьмем пример из реальной жизни: если вам нужно узнать габариты коробки в реальном мире, вы ведь измеряете по внешний сторонам и углами. Вы не будете изменять различные отступы или толщину границы.
В цифровом же мире, особенно если рассматривать классическую модель блока, все совсем по-другому. Здесь ширина отвечает только за ширину области контента, сюда не добавляются толщина границы или размер отступов. Визуально такая модель выглядит следующим образом (на случай, если вы забыли):
Для того чтобы все встало на свои места, вам придется производить математические вычисления и делать подгонку. В шаблонах с фиксированной шириной это немного раздражает, но все же реализуемо.
Временное решение на HTML
Сложности возникают тогда, когда размеры ширины, отступов, границы или полей указываются в разных единицах изменения. Если вы делаете это таким образом, то общую ширину блока невозможно будет достоверно просчитать:
* Колонка структуры, созданная при помощи aside class="sidebar" должна получить 20% ширины, а поля – как слева, так и справа – получат по 10 пикселей.
* Вопрос: сколько места нам нужно зарезервировать для боковой панели в нашем шаблоне?
* Ответ: не имеем ни малейшего понятия. Это просто невозможность высчитать.
Сегодня использование фиксированных значений становится настолько же надежным, как выигрыш в лотерею. Мы постарались найти решение, в котором мы удваиваем HTML-элемент, и разделяем параметры модели блока на оба элемента:
* Внутрь aside мы помещаем дополнительный div-элемент.
* aside имеет 20% ширины.
* Внутренний div оснащен опциональными значениями отступов, границы или поля.
Таким образом, отступы и другие значения не влияют на боковую панель. Она всегда будет сохранять свои 20%.
Это удваивание HTML-элементов сегодня стало настолько популярным, что мы практически позабыли о том, что это лишь временная мера, и намеренно стали думать, что так и нужно делать.
Гибкие блоки на CSS3: {box-sizing: border-box}
Практически в тайне от наших глаз, браузеры стали поддерживать другой подход, вторую модель блоков, которая немного отличается от привычной нам. В данной модели, отступы и границы уже включены в значение, которое задается для ширины. Она откликается на имя border-box, так как ширина здесь просчитывается от границы до границы. Давайте посмотрим, как все это выглядит:
В ежедневной суете дизайнера даже такое незначительное изменение в построении структуры может оказаться очень полезным. Возвращаясь обратно к нашему примеру с боковой панелью, мы можем без труда сохранить двойной внутренний HTML-элемент:
* Начинаем с определения .sidebar { box-sizing:border-box}.
* Затем мы добавляем width:20% и случайное значение отступов или границы.
Готово!
При использовании border-box, нам не нужно беспокоиться о том, сколько места будет занимать отступ или граница, так как эти значения просто отнимаются от общей ширины, а не добавляются к ней. Об этом варианте следует задуматься в любом случае. Размер боковой панели вычисляется без необходимости использовать двойные элементы.
Кстати, если вы добавите внешнее поле, то оно все равно добавится в общее значение, и это невероятно удобно.
border-box в повседневном использовании
Как только вы осознаете практичность применения border-box, вы обязательно спросите, насколько хороша на данный момент поддержка среди браузеров. И это ответ:
Хей, даже IE8 распознает этот метод. Невероятно! Для Mozilla понадобится приставка, но в целом для тех, кто не заботится о поддержке в IE7, это может стать действительно глотком свежего воздуха:
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Это именно то, что рекомендовал Пол Айриш с своем блоке от февраля 2012 года.
Завершение
border-box – это нечто большее, нежели просто альтернативный вариант, который следует учитывать на всякий случай. Нам кажется, что в адаптивных шаблонах border-box станет естественным сам по себе.