Вычисление ширины блока через box-sizing

В CSS3 появилось свойство

1	box-sizing

, смысл которого в способе вычисления ширины HTML-блока браузером. Но, прежде чем переходить к его рассмотрению, сначала давайте вспомним, как обычно браузер производит расчет ширины блока элемента в HTML-разметке?

Вычисление всегда выполняется по формуле:

1	Width = Margin + Border + Padding + Content

. То есть, если ширина контента задана в 200px,

1

padding

равен 25px,

1

border

равен 10px, а

1

margin

равен 15px; то результирующая ширина блока будет равна 300px.

Такой способ вычисления ширины блока делают все современные браузеры:

200px + 25px*2 + 10px*2 + 15px*2 = 300px

Однако, были времена, когда не все браузеры вычисляли размеры блока элемента подобным образом. Существовал Internet Explorer версии 5/6, который ширину блока считал несколько иначе: из заданной ширины блока вычитались padding и border, получалась результирующая ширина области content. В те времена веб-разработчики “показывали пальцем” на этот браузер и говорили, что это ошибка и недочет разработчиков IE5/6.

Но теперь времена изменились благодаря появлению адаптивного (

1	responsive

) дизайна. Причины возникновения адаптивного дизайна - в огромном количестве устройств с разными размерами экранов, по большей части мобильных. Задача адаптивного дизайна в “подстраивании” одного и того же дизайна сайта под различные размеры мониторов. При таком “подстраивании” важной становиться задача вычисления ширины блоков элементов, чтобы верстка не “разваливалась”.

Чтобы такого не произошло, как раз и становиться удобным “возврат” к той модели расчета ширины блока, какая присутствовала в IE5/6. Для этого было разработано свойство

1	box-sizing

, с помощью которого можно управлять подобной моделью расчета.

Свойство 1 box-sizing принимает три значения (три модели вычисления ширины блока): **content-box

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

- приплюсовываются к заданной ширине, как обычно. Данная модель, хоть и заявлена в спецификации CSS3, не поддерживается на сегодняшний день почти никакими браузерами; так что о ней можно забыть (пока забыть):

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

размером 5px прибавляется к ширине блока-потомка. Суммарная ширина обоих блоков-потомков превышает ширину блока-родителя и один из них выходит из его, опускаясь (снова) вниз:

В этом примере мы не применили к свойству

1	box-sizing

значения

1	padding-box

, потому что [браузеры не понимают этого значения][1] и свойство

1	box-sizing

работать не будет в этом случае.

Заключение

Вот и все, что можно сказать о свойстве

1	box-sizing

. Понимание этого свойства понадобиться еще, когда придет время изучать адаптивный (responsive) дизайн.

Основой для данной статьи послужила замечательная “Большая книга CSS3 Д. Макфарланд (3-е издание).

---

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing “MDN

CSS - box-sizing”