В 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 со значением content-box

Свойство 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 со значением padding-box

Свойство 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 со значением border-box

Практический пример свойства 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;
}

Свойство box-sizing со значением content-box

Блоки-потомки четко вписываются в блок-родитель, так как у них нет

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
к обоим блокам:

Свойство box-sizing со значением content-box и 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;
}

Свойство box-sizing со значением border-box и padding: 5px

Даже если добавить к блокам-потомкам границу

1
border
, то картинка останется прежней:

.left{
  background-color: #000;
  border: 6px solid #0000ff;
}

.right{
  background-color: #fff;
  border: 6px solid #00ff00;
}

Свойство box-sizing со значением border-box и border: 6px

Но если прибавить к блокам

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 прибавляется к ширине блока-потомка. Суммарная ширина обоих блоков-потомков превышает ширину блока-родителя и один из них выходит из его, опускаясь (снова) вниз:

Свойство box-sizing со значением border-box и 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”

Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024