CSS box-sizing открывает перед вами новые возможности управления размерами элементов – от ширины до высоты. В спецификации CSS 2.1 описывается, как считается общая ширина элемента: содержимое + внутренние отступы слева и справа + рамки с обеих сторон. Аналогично рассчитывается и высота. Но box-sizing позволяет изменить этот алгоритм: теперь свойства width и/или height задают размеры всего блока, а не только его содержимого. | Значение по умолчанию: | content-box |
|---|
| Наследуется: | нет |
|---|
| Версия: | CSS3 |
|---|
| Синтаксис JavaScript: | object.style.boxSizing = "border-box" |
|---|
| Значение | Описание |
|---|
| content-box | По умолчанию. Здесь ширина и высота определяют только область содержимого, а отступы и рамки располагаются за пределами заданных размеров. | | border-box | Ширина и высота охватывают весь элемент: внутренние отступы и границы включены в указанные размеры. Чтобы узнать размер содержимого, из общей ширины/высоты вычитаем рамки и отступы. Например, при общей ширине 200 px, боковых рамок по 20 px и внутренних отступов по 10 px: 200 – 40 – 20 = 140 px. | | inherit | Значение берётся у родительского элемента. | Примерhtmlhead 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/headbody div class="container" div class="box"Этот Div занимает левую половину./div div class="box"Этот Div занимает правую половину./div /div/body/html
|