—»     —»   Знакомство с CSS3 Box-sizing
  Раздел: CSS/Style Sheets   Комментариев: 2  

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



Совсем недавно, когда нам нужно было создать блок на странице, предположим посредством 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;
}

Смотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, верстка сайта
Опубликовал Design FactoRy   Прочитано (раз): 5335   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 27 сентября 2012 @ 14:05
Написал: MariaKM — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
В IE 8 меню выглядит как обычный список sad
Комментарий #2: 30 сентября 2012 @ 14:06
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
MariaKM, потому, что это IE 8 и автор статьи-оригинала явно ошибся, утверждая, что в IE 8 box-sizing поддерживается :(
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31