Свойство box-sizing может принимать одно из двух значений – border-box или content-box . В зависимости от выбранного значения браузер по-разному трактует значение свойств width/height .
- Значения box-sizing
- Пример: подстроить ширину к родителю
- Попытка width:100%
- Решение: дополнительный элемент
- Решение: box-sizing
- Краткая информация
- Версии CSS
- Описание
- Синтаксис
- Значения
- Браузеры
- Краткая информация
- Синтаксис ?
- Обозначения
- Значения
- Песочница
- Пример
- Объектная модель
- Примечание
- Спецификация ?
- Спецификация
- Браузеры ?
- Браузеры
Значения box-sizing
Для большей наглядности посмотрим на картинку этого div в зависимости от box-sizing :
В верхнем случае браузер нарисовал весь элемент размером в width x height , в нижнем – интерпретировал width/height как размеры внутренней области.
Исторически сложилось так, что по умолчанию принят content-box , а border-box некоторые браузеры используют если не указан DOCTYPE , в режиме совместимости.
Но есть как минимум один случай, когда явное указание border-box может быть полезно: растягивание элемента до ширины родителя.
Пример: подстроить ширину к родителю
Задача: подогнать элемент по ширине внешнего элемента, чтобы он заполнял всё его пространство. Без привязки к конкретному размеру элемента в пикселях.
Например, мы хотим, чтобы элементы формы ниже были одинакового размера:
Как сделать, чтобы элементы растянулись чётко по ширине FORM ? Попробуйте добиться этого самостоятельно, перед тем как читать дальше.
Попытка width:100%
Первое, что приходит в голову – поставить всем элементам INPUT ширину width: 100% .
Как видно, не получается. Элементы вылезают за пределы родителя.
Причина – ширина элемента 100% по умолчанию относится к внутренней области, не включающей padding и border . То есть, внутренняя область растягивается до 100% родителя, и к ней снаружи прибавляются padding/border , которые и вылезают.
Есть два решения этой проблемы.
Решение: дополнительный элемент
Можно убрать padding/border у элементов INPUT/SELECT и завернуть каждый из них в дополнительный DIV , который будет обеспечивать дизайн:
В принципе, это работает. Но нужны дополнительные элементы. А если мы делаем дерево или большую редактируемую таблицу, да и вообще – любой интерфейс, где элементов и так много, то лишние нам точно не нужны.
Кроме того, такое решение заставляет пожертвовать встроенным в браузер дизайном элементов INPUT/SELECT .
Решение: box-sizing
Существует другой способ, гораздо более естественный, чем предыдущий.
При помощи box-sizing: border-box мы можем сказать браузеру, что ширина, которую мы ставим, относится к элементу полностью, включая border и padding :
Мы сохранили «родную» рамку вокруг INPUT/SELECT и не добавили лишних элементов. Всё замечательно.
Свойство box-sizing поддерживается в IE начиная с версии 8.
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | ||||
| 8.0+ | 4.0+ | 10.0+ | 7.0+ | 3.1+ | 5.0+ | 1.0+ | 2.1+ | 4.0+ | 3.2+ | 5.0+ |
Краткая информация
| Значение по умолчанию | content-box |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Процентная запись | Неприменима |
| Ссылка на спецификацию |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|
Описание
Применяется для изменения алгоритма расчета ширины и высоты элемента.
Согласно спецификации CSS ширина блока складывается из ширины контента ( width ), значений отступов ( margin ), полей ( padding ) и границ ( border ). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.
Синтаксис
box-sizing: content-box | border-box | padding-box | inherit
Значения
HTML5 CSS3 IE Cr Op Sa Fx
В данном примере ширина первого слоя будет равна 324 пиксела, поскольку она складывается из значения ширины контента ( width ), полей слева и справа ( padding ) и толщины границ ( border ). Ширина второго слоя равняется 300 пикселов за счет применения свойства box-sizing . Результат примера в браузере Opera показан на рис. 1.
Рис. 1. Ширина блоков
Браузеры
Firefox поддерживает нестандартное свойство -moz-box-sizing .
Safari до версии 5.0, Chrome до версии 10.0, Andro >-webkit-box-sizing .
Internet Explorer, Chrome, Opera и Safari не поддерживают значение padding-box .
Применяется для изменения алгоритма расчёта ширины и высоты элемента.
Краткая информация
| Значение по умолчанию | content-box |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Нет |
Синтаксис ?
Обозначения
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [, ]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
×
Значения
Песочница
Пример
В данном примере ширина первого слоя будет равна 324 пикселя, поскольку она складывается из значения ширины контента ( width ), полей слева и справа ( padding ) и толщины границ ( border ). Ширина второго слоя равняется 300 пикселей за счёт применения свойства box-sizing . Результат примера показан на рис. 1.
Рис. 1. Ширина блоков
Объектная модель
Примечание
Firefox до версии 29 поддерживает свойство -moz-box-sizing .
Safari до версии 5, Chrome до версии 10, Andro >-webkit-box-sizing .
Спецификация ?
| Спецификация | Статус |
|---|---|
| CSS Basic User Interface Module Level 3 | Рабочий проект |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
×
Браузеры ?
| 8 | 12 | 1 | 10 | 7 | 3 | 5.1 | 1 | 29 |
| 1 | 2.1 | 1 | 29 | 9 | 3 | 5,1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.