|
CSS3 Свойство box-sizing
 Полный CSS Справочник
Пример
Указать два контейнера с границами, расположенных бок о бок:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
} |
Попробуйте сами » |
Поддержка Браузерами
Свойство 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 Справочник
|
