CSS свойство box-sizing позволяет выбрать алгоритм вычисления ширины и высоты элемента.
В спецификации CSS2.1 определено, что общая ширина элемента вычисляется путём сложения: ширина области содержимого () + внутренний отступ слева и справа ( и ) + рамка слева и справа ( и ). Аналогичным образом вычисляется и общая высота элемента. Свойство box-sizing позволяет использовать другой алгоритм, в этом случае, свойства width и/или определяют общую ширину и/или высоту элемента, а не области содержимого.
| Значение по умолчанию: |
content-box |
| Наследуется: |
нет |
| Версия: |
CSS3 |
| Синтаксис JavaScript: |
object.style.boxSizing="border-box" |
| Значение |
Описание |
| content-box |
Используется по умолчанию. Ширина (width) и высота (height) работают как определено в CSS2.1, т.е. они определяют размер области содержимого. Внутренние отступы () и рамка () элемента располагаются за пределами указанной ширины и высоты. |
| border-box |
Ширина и высота определяется для всего элемента, т.е. внутренние отступы и рамка элемента находятся в пределах указанной высоты и ширины. Ширина и высота области содержимого вычисляется путём вычитания из значений ширины и высоты значений рамки и внутренних отступов элемента. Например, если общая ширина 200px, рамка слева и справа 20px и внутренний отступ слева и справа 10xp: 200 - 40 - 20 = ширина области содержимого 140px. |
| inherit |
Указывает, что значение наследуется от родительского элемента. |
Пример
html
head
style type="text/css"
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
|