box-sizing

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Описание

Свойство  box-sizing используется для изменения блочной модели CSS применяемой по умолчанию, с помощью которой вычисляются ширина и высота элементов.  Это свойство можно использовать для  эмулирования работы браузеров, которые не корректно  следуют спецификации Блочной модели CSS.

Начальное значениеcontent-box
Применяется квсе элементы, которые могут иметь ширину и высоту
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Анимируемостьнет
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

/* Ключевые значения */
box-sizing: content-box;
box-sizing: border-box;

/* Глобальные значения */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

Значения

content-box
Это стандартное значение. Свойства width и height вычисляются исключительно по контенту, и не включая margin, padding и border.
Заметка: margin, padding и border будут за пределами блока.
Например: ЕСЛИ {width: 350px} И {border: 10px solid black} ТОГДА ширина блока будет равной 370px.
border-box
Свойства width и height вычисляются по контенту, padding и border, но не включая margin. Эта блоковая модель используется в Internet Explorer когда документ находится в Режиме совместимости.
Заметка: padding и border будут внутри блока.
Например: ЕСЛИ {width: 350px} И {border: 10px solid black} ТОГДА ширина блока будет, все также, равной 350px, а ширина контента будет равной 330px.

Формальный синтаксис

content-box | border-box

Примеры

/* поддерживает Firefox, WebKit, Opera и IE8+ */

.example {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

Спецификации

Спецификация Статус Комментарий
CSS Basic User Interface Module Level 3
Определение 'box-sizing' в этой спецификации.
Кандидат в рекомендации  

Совмествимость с браузерами

Свойство Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Базовые свойства 1.0 -webkit [1]
10.0
1.0 (1.7 или ранее)-moz[1]
29.0 (29.0)

8.0 [1]

7.0 3.0 (522)-webkit
5.1 (534.12)
padding-box Нет 1.0 (1.0) Нет Нет Нет
Свойство Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Базовые свойства 2.1-webkit [1]
4.0
1.0 (1.0)-moz [1]
29.0 (29.0)
Mango 7.5 (Да) (Да)
padding-box Нет 1.0 (1.0) Нет Нет Нет

[1] box-sizing свойство не соблюдается когда высота вычисляется с помощью window.getComputedStyle(), для Internet Explorer, Firefox до 23, и Chrome.

Заметка: currentStyle для IE9 возвратит корректное значение высоты.

[2] Префикс -webkit был удален в 534.12.

Смотрите также

Метки документа и участники

 Внесли вклад в эту страницу: xilaraux, volodymyr.matvienko, Kapiroska, vova, Sebastianz, Sergey.Vdovareize
 Обновлялась последний раз: xilaraux,