div {
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #eaeaea;
}
Браузеры расширяли блок до 140 пикселей, что являлось суммой ширины/высоты с добавлением отступов и границ. 100px [ширина/высота] + (2 x 10px [отступы]) + (2 x 10px [граница]).
Тем не менее, иногда этот результат являлся не совсем тем, что мы ожидали. Иногда нам нужно, чтобы блок сохранял 100 пикселей вне зависимости от ширины отступов и границ.
Чтобы решить эту проблему сегодня, мы можем воспользоваться параметром CSS3 box-sizing – он поможет нам контролировать то, как будет выглядеть блок.
Применение box-sizing
Параметр box-sizing имеет два значения: первое content-box, которое является стандартным значением, и при использовании которого блок действует по тому образу, который мы описали выше.
Второй – это border-box, когда размер блока подсчитывается посредством вычитания указанного размера контента с добавлением отступов и границ.
div {
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #eaeaea;
box-sizing: border-box;
-moz-box-sizing: border-box; /*Firefox 1-3*/
-webkit-box-sizing: border-box; /* Safari */
}
К примеру, если у нас есть блок вроде того, что мы описали выше (квадрат на 100 пикселей с 10 пикселями отступов и границами), то размер контента уменьшится до 60 пикселей, и общий размер блока будет сохранять 100 пикселей, где процесс вычисления можно описать следующим образом: 100px [ширина/высота] – ((2 x 10px [отступы]) + (2 x 10px [граница])).
Смотреть демо | Скачать исходный код
Браузерная поддержка
Параметр box-sizing поддерживается всеми браузерами: Firefox 3.6+, Safari 3, Opera 8.5+ и Internet Explorer 8 (и версии выше).
Так что, если вам известно, что большинство пользователей вашего сайта используют Internet Explorer ниже 8 версии, то можете воспользоваться этой полезной рекомендацией от Пола Айриша.
* {
box-sizing: border-box;
-moz-box-sizing: border-box; /*Firefox 1-3*/
-webkit-box-sizing: border-box; /* Safari */
}
Вышеприведенный отрывок кода применит параметр box-sizing ко всем элементам на вашей веб-странице.
Пример
В данном разделе мы покажем вам пример из реальной жизни о том, как вы можете применять параметр box-sizing. Мы создадим простенькую навигацию с 5-ю пунктами меню, основанную на разметке HTML, приведенной ниже.
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
Затем мы добавим некоторое оформление вроде фиксированной ширины навигации (500 пикселей) и каждой ссылке дадим фиксированную ширину равную 100 пикселям, затем элементы списка выровняем по строке и зададим разный фон для каждого пункта меню, чтобы вы могли отличить их друг от друга.
nav {
width: 500px;
margin: 50px auto 0;
height: 50px;
}
nav ul {
padding: 0;
margin: 0;
}
nav li {
float: left;
}
nav a {
display: inline-block;
width: 100px;
height: 100%;
background-color: #ccc;
color: #555;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 12pt;
line-height: 300%;
text-align: center;
}
nav a {
display: inline-block;
width: 100px;
height: 100%;
color: #555;
text-decoration: none;
font-family: Arial, sans-serif;
}
nav li:nth-child(1) a {
background-color: #E9E9E9;
border-left: 0;
}
nav li:nth-child(2) a {
background-color: #E4E4E4;
}
nav li:nth-child(3) a {
background-color: #DFDFDF;
}
nav li:nth-child(4) a {
background-color: #D9D9D9;
}
nav li:nth-child(5) a {
background-color: #D4D4D4;
border-right: 0;
}
На данном этапе наша навигация должна выглядеть следующим образом.
Тем не менее, выскакивает проблема, когда мы хотим добавить меню левую или правую границы.
nav a {
border-left: 1px solid #aaa;
border-right: 1px solid #f3f3f3;
}
Меню будет переходить на нижнюю строку, так как теперь на каждый элемент списка требуется 102 пикселя, что в общем дает лишних 10 пикселей, которые выходят за пределы указанного нами значения (500 пикселей).
Чтобы избежать данной проблемы, нам нужно применить параметр box-sizing следующим образом:
nav a {
border-left: 1px solid #aaa;
border-right: 1px solid #f3f3f3;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
Смотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.