Подивіться на CSS3 Box-Sizing

Ця стаття є частиною нашої "Серія навчальних посібників HTML5 / CSS3" - присвячений допомозі зробити вас кращим дизайнером та / або розробником. Натисніть тут щоб побачити більше статей з тієї ж серії.

Не так давно, коли ми створюємо коробка на веб-сторінці, скажімо, з a div, вказуємо 100px як для ширини, так і для висоти, після чого прокладка для 10px і кордонів 10px так само.

 div ширина: 100px; висота: 100px; заповнення: 10px; кордон: 10px твердий #eaeaea;

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

Однак іноді цей результат не є тим, що ми очікуємо. Іноді нам завжди потрібна коробка 100px незалежно від того, чи додано кордону або кордони.

Щоб подолати таку повторювану проблему при створенні макета веб-сторінки, ми можемо використовувати CSS3 розмір коробки властивість контролювати як Модель CSS box повинні працювати в браузерах.

Використовуючи розмір коробки

The розмір коробки властивість має два опції значення, спочатку content-box; яка є значенням за замовчуванням, при використанні цього значення коробка модель буде вести себе, як ми описали вище.

А другий кордон, де розмір вікна буде розраховано шляхом видалення розміру зазначеного вмісту з додаванням відступу та кордонів.

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

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

Демо
Завантажити джерело

Підтримка браузера

The розмір коробки власність підтримується у всіх браузерах; Firefox 3.6+, Safari 3, Opera 8.5+ і Internet Explorer 8 і вище.

Отже, якщо ви знаєте, що більшість ваших відвідувачів не використовуватимуть версії Internet Explorer нижче 8, ви можете скористатися цією корисною рекомендацією (завдяки Paul Irish).

 * box-sizing: border-box; -moz-box-sizing: бордюр; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /

Цей фрагмент буде застосовано до розмір коробки до всіх елементів на вашій веб-сторінці.

Приклад

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

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

Потім додамо деякі декоративні стилі; наприклад, встановіть навігацію ширина фіксації для 500px і ширина посилання на кожні 100px, потім вставте елемент списку та надайте різний фон для кожного меню з’єднання, щоб побачити різницю між ними.

 nav ширина: 500px; запас: 50px auto 0; висота: 50px;  nav ul padding: 0; маржа: 0;  nav li float: left;  nav a display: inline-block; ширина: 100px; висота: 100%; background-color: #ccc; колір: # 555; текст-прикраса: немає; сімейство шрифтів: Arial, sans-serif; розмір шрифту: 12pt; висота лінії: 300%; text-align: center;  nav a display: inline-block; ширина: 100px; висота: 100%; колір: # 555; текст-прикраса: немає; сімейство шрифтів: Arial, sans-serif;  навігація: nth-child (1) a background-color: # E9E9E9; ліворуч: 0;  навігація: nth-child (2) a background-color: # E4E4E4;  навігація: nth-child (3) a background-color: #DFDFDF;  навігація: nth-child (4) a background-color: # D9D9D9;  навігація: nth-child (5) a background-color: # D4D4D4; прикордонний правий: 0;

На цьому етапі наша навігація виглядає нормально.

Проте проблема виникає, коли ми додаємо ліву або праву межу до меню посилання.

 nav a border-left: 1px solid #aaa; правий край: 1px твердий # f3f3f3;

Меню буде переповнено донизу, оскільки ширина посилання більше не існує 100px. Це зараз 102px, загальна ширина навігації 10px більше, ніж ми вказали вище (500px).

Щоб подолати цю проблему, нам необхідно застосувати розмір коробки властивість:

 nav a border-left: 1px solid #aaa; правий край: 1px твердий # f3f3f3; розмір коробки: кордон; -moz-box-sizing: бордюр; -вебкіт-короб-розмір: border-box;

Демо
Завантажити джерело

Подальше читання

І, нарешті, якщо ви - авантюристичний тип, і хочете глибше заглибитися в цю тему, ми створили для вас кілька вибраних посилань

Розуміння моделі CSS Box - Tech Republic
Помилка розмірів вікон в Firefox - BugZilla
Коробка розмірів FTW - Paul Irish