Руководство по CSS

Правила CSS @

Полный список свойств CSS

Атрибут caption-side CSS Атрибут box-shadow CSS3

Метод использования и примеры свойств box-sizing CSS3

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

Таблица ниже предоставляет описание использования и историю версий этого свойства, а также грамматику использования этого свойства в скриптах JavaScript.

Значение по умолчанию:	content-box
Применяется к:	Все элементы, принимающие ширину или высоту
Наследование:	Нет
Анимация возможна:	Нет Просмотрите атрибут анимации.
Версия:	Новые функции CSS3
JavaScript грамматика:	object.style.boxSizing="border-box"

Грамматика использования box-sizing

Грамматика этого свойства такая:

box-sizing:　content-box　|　padding-box　|　border-box　|　initial　|　inherit

Ниже приведен пример того, как использовать свойство box-sizing.

Пример

.box　{
　　　　width:　50%;
　　　　padding:　15px;
　　　　float:　left;
　　　　border:　5px　solid　#000;
　　　　box-sizing:　border-box;
}

Проверьте, < / >

Значения свойств

Таблица ниже описывает значения этого свойства.

Значение	Описание
content-box	Указанные свойства width и height включают только содержимое элемента. Оно не включает пол填充, рамку или отступ.
padding-box	Указанные свойства width и height включают размер полосы, но не включают рамку или отступ.
border-box	Указанные свойства width и height включают пол填充 и рамку, но не включают отступ.
initial	Установить этот параметр в его значение по умолчанию.
inherit	Если указано, то связанный элемент использует значение свойства box-sizing родительского элемента.

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

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

	Firefox 2+ ^-moz-, 29+ Google Chrome 4+ ^-webkit-, 10+ Internet Explorer 8+ Apple Safari 3.2+ ^-webkit-, 5.1 + Opera 9.5+

Дополнительное чтение

Пожалуйста, обратитесь к учебникам по следующим темам:Модель Box CSS,Размеры CSS.

Соответствующие свойства:padding,border,margin.

Атрибут caption-side CSS Атрибут box-shadow CSS3