Свойство box-sizing

В CSS3 встроено еще одно свойство, относящееся к структуре и традиционной блочной модели. Свойство box-sizing позволяет менять способ расчета размера элемента: например, можно заставить браузер считать ширину забивки и рамки частью исходного размера элемента.

Как уже говорилось, для вычисления общей ширины области, занимаемой элементом, браузер применяет следующую формулу: размер + поля + забивка + рамки. Таким образом, если значение свойства width равно 100 пикселам, margin — 20 пикселам, padding — 10 пикселам, а border — 1 пикселу, то ширина области, занимаемой документом, получается следующей: 100 + 40 + 20 + 2 = 162 пиксела. Обратите внимание на то, что значения margin, padding и border удваиваются, так как необходимо принять во внимание и левую, и правую стороны блока. Следовательно, при каждом объявлении размера элемента с использованием свойства width нужно учитывать, что реальная площадь, которая потребуется для размещения элемента, скорее всего, будет больше.

В зависимости от вашего стиля кодирования неплохой идеей может быть внедрение значений padding и border в значение width, для того чтобы формула расчета реальной ширины упрощалась до такой: размер + поля.

Листинг 2.36. Возможность учесть забивку и рамку в исходном размере элемента

Div {

Width: 100px;

Margin: 20px;

Padding: 10px;

Border: 1px solid #000000;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box; box-sizing: border-box;

}

Свойство box-sizing может принимать два значения. По умолчанию оно равно content-box — это означает, что браузеры прибавляют значения padding и border к размеру, задаваемому свойством width. Если же вместо этого указать значение border-box, то поведение изменится: забивка и рамка будут учитываться в размере самого элемента.

Листинг 2.36 демонстрирует применение данного свойства к элементу <div>. Это всего лишь пример, который мы в нашем шаблоне использовать не будем. Однако он может оказаться полезным для некоторых дизайнеров — это зависит от того, насколько хорошо они знакомы с традиционными методами расчета размера элементов, унаследованными от предыдущих версий CSS.

Сейчас существуют только экспериментальные реализации свойства box-sizing в некоторых браузерах. Для эффективного использования в своих документах данное свойство нужно объявлять с подходящим префиксом. К этой теме мы вернемся чуть позже.