УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS

CSS3 Свойство box-sizing


CSS Справочник Полный CSS Справочник

Пример

Указать два контейнера с границами, расположенных бок о бок:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Попробуйте сами »

Поддержка Браузерами

Internet Explorer Firefox Opera Google Chrome Safari

Свойство box-sizing поддерживается в Internet Explorer, Opera и Chrome.

Firefox поддерживает альтернативное свойство -moz-box-sizing.

Safari поддерживает альтернативное свойство -webkit-box-sizing.


Определение и Использование

Свойство box-sizing позволяет вам заставить определенные элементы заполнять область определенным способом.

К примеру, вы бы хотели расположить два контейнера с границами бок о бок, этого можно достичь установкой свойства box-sizing в "border-box". Это заставляет браузер отображать контейнер с указанными шириной и высотой и располагать границу и отступы внутри контейнера.

Значение по умолчанию: content-box
Наследуется: нет
Версия: CSS3
JavaScript синтаксис: объект.style.boxSizing="border-box"


Синтаксис

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

Значение Описание
content-box Это поведение ширины и высоты, указанное в CSS2.1. Указанные ширина и высота (и свойства min/max) применяются к соответственно ширине и высоте контейнера содержания элемента. Оступы и граница элемента лежат вне указанных ширины и высоты
border-box Указанные ширина и высота (и свойства min/max) этого элемента определяют контейнер границы элемента. То есть, отступы и граница, указанные для элемента, лежат и отображаются внутри указанных свойств ширины и высоты. Ширина и высота содержания вычисляются путем вычитания размеров границы и отступов по соответствующим сторонам из указанных свойств 'width' и 'height'
inherit Указывает, что значение свойства box-sizing должно наследоваться от родительского элемента


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

CSS3 уроки: CSS3 Интерфейс Пользователя


CSS Справочник Полный CSS Справочник




© 2011 - 2022 Уроки CSS