box-sizing
Поддержка браузерами
|
|
|
|
|
|
12.0+ |
8.0+ |
29.0+ |
10.0+ |
9.5+ |
5.1+ |
Описание
CSS свойство box-sizing позволяет выбрать алгоритм вычисления ширины и высоты элемента.
В спецификации CSS2.1 определено, что общая ширина элемента вычисляется путём сложения: ширина области содержимого (width) + внутренний отступ слева и справа (padding-left и padding-right) + рамка слева и справа (border-left и border-right). Аналогичным образом вычисляется и общая высота элемента. Свойство box-sizing позволяет использовать другой алгоритм, в этом случае, свойства width и/или height определяют общую ширину и/или высоту элемента, а не области содержимого.
Значение по умолчанию: |
content-box |
Применяется: |
ко всем элементам, к которым можно применить свойства width и height |
Анимируется: |
нет |
Наследуется: |
нет |
Версия: |
CSS3 |
Синтаксис JavaScript: |
object.style.boxSizing="border-box" |
Синтаксис
box-sizing: content-box|border-box|inherit;
Значения свойства
Значение |
Описание |
content-box |
Используется по умолчанию. Ширина (width) и высота (height) работают как определено в CSS2.1, т.е. они определяют размер области содержимого. Внутренние отступы (padding) и рамка (border) элемента располагаются за пределами указанной ширины и высоты. |
border-box |
Ширина и высота определяется для всего элемента, т.е. внутренние отступы и рамка элемента находятся в пределах указанной высоты и ширины. Ширина и высота области содержимого вычисляется путём вычитания из значений ширины и высоты значений рамки и внутренних отступов элемента. Например, если общая ширина 200px, рамка слева и справа 20px и внутренний отступ слева и справа 10xp: 200 - 40 - 20 = ширина области содержимого 140px. |
inherit |
Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
div.container {
width: 30em;
border: 1em solid;
overflow: auto;
}
div.box {
box-sizing: border-box;
width: 50%;
border: 1em solid red;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Этот Div занимает левую половину.</div>
<div class="box">Этот Div занимает правую половину.</div>
</div>
</body>
</html>
Попробовать »