Box-sizing: управляем вычислением ширины и высоты

В предыдущем уроке мы рассказывали, по какому принципу традиционно вычисляется ширина и высота элемента. Фактическую ширину/высоту образует сумма значений width/height, padding, border и margin.

Нередко в процессе верстки возникает необходимость управлять стандартным вычислением размеров элемента. Допустим, вы хотите, чтобы ширина определенного блока <div> составляла 50% от ширины веб-страницы. Для этого вы задаете свойству width значение 50%. И здесь возникает загвоздка: если у блока имеются отступы (padding), поля (margin) либо рамка (border), то они будут считаться отдельно. В итоге ширина блока будет более 50%, а это уже не входит в ваши планы.

Как же сделать так, чтобы браузер учитывал отступы, а иногда и рамку, вычисляя ширину блока? На помощь приходит свойство box-sizing, которое может принимать три значения, а именно:

• content-box — значение по умолчанию (поведение, описанное выше). Ширина и высота элемента определяется только свойствами width и height.
• border-box — в данном случае браузер включает отступы padding и рамку border в общую ширину/высоту элемента. Это значит, что если для блока задана ширина, скажем, width: 50%, отступы (например, padding-left: 10px и padding-right: 10px) и рамка (border-width: 1px), то браузер будет считать эти отступы и рамку частью ширины 50%. Ширина самого содержимого составит 50% минус 22 пикселя. Обратите внимание, что значения margin включены НЕ будут.
• padding-box — это значение похоже на предыдущее, только в ширину/высоту элемента будут включены только отступы padding, без рамки. Значения margin также не учитываются. Значение padding-box было исключено из спецификации CSS, однако оно все еще поддерживается браузером Firefox.

Box-sizing: кроссбраузерность

Чтобы свойство box-sizing работало в браузерах Firefox, а также старых версиях Safari, Chrome и Android, следует записывать несколько его вариаций, используя соответствующие префиксы производителя:

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

Что же насчет поддержки браузером Internet Explorer? Хорошие новости: box-sizing работает в IE8 и выше.

Итак, CSS-свойство box-sizing поддерживается почти всеми браузерами, кроме IE6 и IE7. Это 97% используемых браузеров, согласно данным с сайта Caniuse. И если у вас нет необходимости в поддержке двух старых версий IE, вы можете смело использовать это свойство (но не забудьте про префиксы!).

Далее в учебнике: контент, выходящий за пределы необходимой области, и свойство overflow, решающее данную проблему.