Главная > CSS/Style Sheets > Знакомство с CSS3 Box-sizing

Знакомство с CSS3 Box-sizing


22 августа 2012, 13:50. Разместил: Design FactoRy
Совсем недавно, когда нам нужно было создать блок на странице, предположим посредством div’а, на нужно было указывать 100 пикселей как для ширины, так и для высоты, а также прописывать 10 пикселей отступов и границы.

div {
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #eaeaea;
}

Браузеры расширяли блок до 140 пикселей, что являлось суммой ширины/высоты с добавлением отступов и границ. 100px [ширина/высота] + (2 x 10px [отступы]) + (2 x 10px [граница]).

Знакомство с CSS3 Box-sizing

Тем не менее, иногда этот результат являлся не совсем тем, что мы ожидали. Иногда нам нужно, чтобы блок сохранял 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 [граница])).

Знакомство с CSS3 Box-sizing

Смотреть демо | Скачать исходный код

Браузерная поддержка

Параметр 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;
}

На данном этапе наша навигация должна выглядеть следующим образом.

Знакомство с CSS3 Box-sizing

Тем не менее, выскакивает проблема, когда мы хотим добавить меню левую или правую границы.

nav a {
border-left: 1px solid #aaa;
border-right: 1px solid #f3f3f3;
}

Меню будет переходить на нижнюю строку, так как теперь на каждый элемент списка требуется 102 пикселя, что в общем дает лишних 10 пикселей, которые выходят за пределы указанного нами значения (500 пикселей).

Знакомство с CSS3 Box-sizing

Чтобы избежать данной проблемы, нам нужно применить параметр 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;
}

Смотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.

Вернуться назад