Взгляд в CSS3 Размеры коробки

Эта статья является частью нашей «Серия руководств по HTML5 / CSS3» - призван помочь вам стать лучшим дизайнером и / или разработчиком. кликните сюда чтобы увидеть больше статей из этой серии.

Не так давно, когда мы создаем коробка на веб-странице, скажем, с ДИВ, мы указываем 100px для ширины и высоты, а затем набивка за 10px и границы около 10px также.

 div width: 100px; высота: 100 пикселей; набивка: 10 пикселей; граница: сплошная #eaeaea 10px;

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

Однако иногда этот результат не соответствует ожидаемому. Иногда нам нужна коробка, чтобы всегда быть 100px независимо от отступов или добавленных границ.

Чтобы преодолеть такую постоянную проблему при создании макета веб-страницы, мы можем использовать CSS3 коробчатого проклейки свойство контролировать, как Блочная модель CSS должен работать в браузерах.

Использование размеров коробки

коробчатого проклейки свойство имеет два варианта значения, во-первых Содержание ящика; которое является значением по умолчанию, при использовании этого значения блочная модель будет вести себя так, как мы описали выше.

И второй граница-бокс, где будет вычислен размер коробки вычитая размер указанного содержимого с добавлением отступов и границ.

 div width: 100px; высота: 100 пикселей; набивка: 10 пикселей; граница: сплошная #eaeaea 10px; размер коробки: бордюр; -моз-бокс-проклейка: бордюр-бокс; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /

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

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

Поддержка браузера

коробчатого проклейки свойство поддерживается во всех браузерах; Firefox 3.6+, Safari 3, Opera 8.5+ и Internet Explorer 8 и выше.

Итак, если вы знаете, что большинство ваших посетителей не будут использовать версии Internet Explorer ниже 8, вы можете воспользоваться этой полезной рекомендацией (спасибо Полу Айришу).

 * box-sizing: border-box; -моз-бокс-проклейка: бордюр-бокс; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /

Фрагмент выше будет применять коробчатого проклейки свойство для всех элементов на вашей веб-странице.

пример

В этом разделе мы покажем вам реальный пример того, как мы можем использовать это коробчатого проклейки имущество. Мы создадим простую навигацию, основанную на разметке HTML ниже, с меню из пяти ссылок.

  Меню 1
 Меню 2
 Меню 3
 Меню 4
 Меню 5

Затем мы добавим несколько декоративных стилей; например, установить навигацию установить ширину для 500px а также ширина ссылки на 100 пикселей каждая, затем вставьте элемент списка в список и задайте разные фоны для каждого меню ссылок, чтобы вы могли увидеть разницу между ними.

 nav ширина: 500 пикселей; поле: 50px, авто 0; высота: 50 пикселей;  nav ul padding: 0; поле: 0;  nav li float: left;  nav a display: inline-block; ширина: 100 пикселей; высота: 100%; цвет фона: #ccc; цвет: # 555; текстовое оформление: нет; семейство шрифтов: Arial, без засечек; размер шрифта: 12pt; высота линии: 300%; выравнивание текста: по центру;  nav a display: inline-block; ширина: 100 пикселей; высота: 100%; цвет: # 555; текстовое оформление: нет; семейство шрифтов: Arial, без засечек;  nav li: nth-child (1) a background-color: # E9E9E9; граница слева: 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; граница-право: 0;

На данный момент наша навигация просто выглядит нормально.

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

 nav a border-left: 1px solid #aaa; Граница справа: 1px solid # f3f3f3;

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

Чтобы преодолеть эту проблему, мы должны применить коробчатого проклейки свойство, а именно:

 nav a border-left: 1px solid #aaa; Граница справа: 1px solid # f3f3f3; размер коробки: бордюр; -моз-бокс-проклейка: бордюр-бокс; -webkit-box-sizing: бордюр-бокс;

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

Дальнейшее чтение

И, наконец, если вы любитель приключений и хотите углубиться в эту тему, мы собрали для вас несколько избранных ссылок:

Понимание блочной модели CSS - Tech Republic
Ошибка размеров коробки в Firefox - BugZilla
Размер коробки FTW - Пол Ирландский