Box-sizing – это свойство CSS, которое делает верстку макетов сайта более понятным. Если вы работали с CSS, то вы знаете, что использование свойств width, padding и border ведет к путанице. Иногда, когда используется свойство width, оно не может быть всегда применено к тому, что вы ожидаете – например ширина width задается в процентах, а граница border указывается в пикселях. Тем не менее, используя свойство box-sizing, ширина блока в 200px будет действительно отображать блок шириной 200px.
Это никак не связано с JavaScript и это также работает в Internet Explorer, начиная с 8й версии.
Блочная модель
Ширина и высота любого элемента на веб-странице описана в блочной модели CSS. Тонкости блочной модели могут быть сложными, но самая важная часть к понимаю это то, как вычисляются ширина и высота блока на странице. Сумма нескольких свойств CSS образует фактически отображаемую ширину и высоту блока.
padding + border + width = актуальная ширина width
padding + border + height = актуальная высота height
Без box-sizing, ширина width представляет собой область содержимого (158px).
Актуальная ширина включает ширину области – content, отступы – padding, и границу – border.
Это означает, что если будет установлена ширина 200px, то элемент займет точно указанный размер, если не будет padding и border. Т.е., свойство width означает ширину контентной области, а не ширину всего блока (включая padding и border).
Если вы хотите сделать ширину блока равной 200px, а потом захотите сделать отступы по 20px с каждой стороны, необходимо позаимствовать 40px (20px для левой и 20px для правой сторон) от этой ширины. То же самое надо сделать, при установке величины border. Все это делает код менее читабельным. Чтобы блок имел общую ширину 200px, необходимо код писать так:
.sidebar {
width: 158px;
padding: 20px;
border: 1px solid #DDD;
}Все это не очень удобно. К счастью, есть более лучший и наглядный способ, который может привести к аналогичному результату.
* { box-sizing: border-box; }
Вместо вычисления ширины, включающей отступы и границы, свойство box-sizing в сочетании с border-box использует собственную ширину в качестве общей ширины блока. И предыдущий код можно изменить так:
.sidebar {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 1px solid #DDD;
}
Теперь любые отступы или границы не будут добавлены к общей ширине. Вместо этого, они будут автоматически вычитаться из предоставленного пространства. Это приводит к тому, что код становится более понятным для чтения и понимания.
Ниже показано изображение, каким образом свойство box-sizing:border-box расчитывает ширину
Когда box-sizing включен – ширина width является шириной всего блока.
Ширина контента автоматически подстраивается в зависимости от правого и левого отступа, и значений бордеров.
На самом деле, многие веб-дизайнеры и разработчики выступают за использование на веб-страницах для всех элементов более естественного и интуитивного подхода к компоновке блоков.
Paul Irish предлагает использовать следующий код для этого:
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Свойство box-sizing не новое, и только из-за того, что оно не поддерживалось в браузерах Internet Explorer ниже 8й версии, его не применяли. Теперь, когда вышли новые версии браузеров эта техника работы с box-sizing становится популярной и рекомендуется использовать ее при создании своих сайтов. Для более полной информации о поддерживаемых браузеров, смотрите в таблице.
Также свойство box-sizing, по-умолчанию, встроено в стили популярных фреймворков Bootstrap и Foundation. Оба эти фреймворка применяют значение border-box к абсолютно всем элементам, что делает их системы более понятными.
