CSS box-sizing Свойство
Пример
Включить заполнение и границу в общую ширину и высоту элемента:
#example1 {
box-sizing: border-box;
}
Подробнее примеры ниже.
Определение и использование
Свойство box-sizing
определяет, как вычисляется ширина и высота элемента: должны ли они включать отступы и границы, или нет.
Значение по умолчанию: | content-box |
---|---|
Inherited: | no |
Animatable: | no. Читайте о animatable |
Version: | CSS3 |
Синтаксис JavaScript: | object.style.boxSizing="border-box" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
Синтаксис CSS
box-sizing: content-box|border-box|initial|inherit;
Значения свойств
Значение | Описание |
---|---|
content-box | По умолчанию. Свойства Width и Height (и свойства min/max) содержат только содержимое. Граница и обивка не включены |
border-box | Свойства Width и Height (и минимальные/максимальные свойства) включают содержимое, заполнение и границы |
initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) |
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Укажите два обрамленных прямоугольника рядом друг с другом:
div
{
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
Пример
Установите "универсальный бокс-калибровка":
* {
box-sizing: border-box;
}
Похожие страницы
CSS Справочник: CSS Box Sizing
HTML DOM Справочник: boxSizing Свойство