В CSS3 появилось свойство
, смысл которого в способе вычисления ширины HTML-блока браузером. Но, прежде чем переходить к его рассмотрению, сначала давайте вспомним, как обычно браузер производит расчет ширины блока элемента в HTML-разметке?
Вычисление всегда выполняется по формуле: 1
Width = Margin + Border + Padding + Content
1
padding
1
border
1
margin
Такой способ вычисления ширины блока делают все современные браузеры:
200px + 25px*2 + 10px*2 + 15px*2 = 300px
Однако, были времена, когда не все браузеры вычисляли размеры блока элемента подобным образом. Существовал Internet Explorer версии 5/6, который ширину блока считал несколько иначе: из заданной ширины блока вычитались padding и border, получалась результирующая ширина области content. В те времена веб-разработчики “показывали пальцем” на этот браузер и говорили, что это ошибка и недочет разработчиков IE5/6.
Но теперь времена изменились благодаря появлению адаптивного (1
responsive
Чтобы такого не произошло, как раз и становиться удобным “возврат” к той модели расчета ширины блока, какая присутствовала в IE5/6. Для этого было разработано свойство 1
box-sizing
Свойство |
padding-box | border-box**. |
Свойство box-sizing: content-box
Первая модель 1
content-box
box-sizing: content-boxШирина блока равна сумме: 1
Width = Width (Content) + Padding + Border + Margin
Свойство box-sizing: padding-box
Вторая модель 1
padding-box
1
content
1
padding
1
border-box
1
margin-box
box-sizing: padding-boxШирина блока равна сумме: 1
Width = Width (Content + Padding) + Border + Margin
Свойство box-sizing: border-box
Третья модель 1
border-box
1
padding-box
1
border-box
1
content-box
1
padding-box
1
border-box
1
margin-box
box-sizing: border-boxШирина блока равна сумме: 1
Width = Width (Content + Padding + Border) + Margin
Практический пример свойства box-sizing
Теперь не мешало бы продемонстрировать на практике, каким образом браузеры выполняют вычисления ширины блоков элементов под управлением свойства 1
box-sizing
1
div class="wrap"
1
div class="left"
1
div class="right"
HTML-разметка представлена ниже:
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>… и CSS-таблица, обычная для такого случая. Единственное “новое” правило в этом коде - это свойство 1
box-sizing
1
box-sizing
1
content-box
1
padding
1
border
1
margin
*{
margin: 0;
padding: 0;
}
html{
background-color: #a7c5a8;
}
body {
width: 80%;
margin: 0 auto;
}
.wrap{
width: 800px;
height: 400px;
margin: 50px auto;
background-color: #778899;
border: 3px solid #ff0000;
}
.left, .right{
float: left;
width: 400px;
height: 400px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.left{
background-color: #000;
}
.right{
background-color: #fff;
}
Блоки-потомки четко вписываются в блок-родитель, так как у них нет 1
border
1
padding
1
margin
Теперь добавим для блоков-потомков 1
padding: 5px
.left, .right{
float: left;
width: 400px;
height: 400px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding: 5px;
}Картина будет заранее предсказуемая - один из блоков-потомков опуститься вниз из-за добавления 1
padding: 5px
Настало время применить свойство 1
box-sizing
1
border-box
.left, .right{
float: left;
width: 400px;
height: 400px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 5px;
}
Даже если добавить к блокам-потомкам границу 1
border
.left{
background-color: #000;
border: 6px solid #0000ff;
}
.right{
background-color: #fff;
border: 6px solid #00ff00;
}
Но если прибавить к блокам 1
div class="left"
1
div class="right"
1
margin
.left, .right{
float: left;
width: 400px;
height: 400px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 5px;
margin-left: 5px;
}Это происходит потому, что в модель вычисления 1
border-box
1
margin
1
margin-left
В этом примере мы не применили к свойству 1
box-sizing
1
padding-box
1
box-sizing
Заключение
Вот и все, что можно сказать о свойстве 1
box-sizing
Основой для данной статьи послужила замечательная “Большая книга CSS3 Д. Макфарланд (3-е издание).
| [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing “MDN | CSS - box-sizing” |
