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

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

Классическая модель блока в 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 станет естественным сам по себе.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 9084   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 17 марта 2013 @ 23:29
Написал: San4ooo — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
winked
Это ну просто оочень круто. впервые слышу об этом свойстве.
спасибо большое. прямо сейчас попробую применить в реальном проекте.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031