Управління блокової моделлю CSS

16

Від автора: все складається з боксів – це, можливо, найважливіший для розуміння момент в CSS. Якщо в деталях, то кожен елемент в документі генерує бокс. Бокс може бути блочного або инлайнового рівня. Тип боксу визначає те, як елемент буде впливати на макет сторінки.

Створюється бокс чи ні, а також тип цього боксу залежить від мови розмітки. CSS спроектований як спосіб стилізації HTML-документів, тому модель візуального візуалізації CSS значною мірою корениться у відмінності між блоковими і инлайновыми елементами в HTML. За промовчанням елементи p та section створюють бокси блокового рівня, а теги a, u і em створюють инлайновые бокси. SVG взагалі не використовує блоковую модель, тому більша частина макетних властивостей CSS не працює з SVG.

Бокси блокового рівня створюють нові блоки контенту, як видно на Рисунку 4.1. Блокові бокси рендеряться вертикально у вихідному порядку і заповнюють (крім таблиць) всю ширину контейнера. Це звичайне відображення значень block, list-item, table і інших table-* значень (наприклад, table cell).

Управління блокової моделлю CSS

Малюнок 4.1. бокси блокового рівня в тегах h1, p, ul і table всередині контейнера (сіра область)

Бокси инлайнового рівня не формують нові блоки контенту. Ці бокси створюють рядки всередині блочного боксу. Вони розташовуються горизонтально і заповнюють ширину боксу-контейнера, перестрибуючи на нові рядки за необхідності, як показано на Рисунку 4.2. До боксів инлайнового рівня відносяться значення властивості display inline, inline-block, inline-table і ruby.

Управління блокової моделлю CSS

Малюнок 4.2. приклад инлайнового боксу з margin: 1em і padding: 5px

Але як же розраховуються розміри боксу? Ось тут все трохи складніше. На Малюнку 4.3 видно, що розміри боксу складаються з тематичній області, padding’а і ширини, плюс ширина рамки, як визначено в CSS2. Ширина margin’а створює на елементі margin-бокс і впливає на інші елементи в документі, але ніяк не впливає на розміри самого боксу.

Управління блокової моделлю CSS

Малюнок 4.3. блокова модель по CSS 2.1

Наприклад, тег p з width: 300px, padding: 20px та border: 10px буде мати значення, обчислене за ширину 360px. Ширина складається з ширини параграфа, лівого і правого паддінга, а також з лівого і правого border-width. Щоб загальна ширина елемента була 300px, при цьому зберігаючи 20px паддінга і 10 пікселів рамки, необхідно задати width: 240px. Більшість браузерів обчислюють ширину саме таким чином. Але це не відноситься до IE 5.5.

IE 5.5 використовує властивість width, як остаточне значення для розмірів боксу, заганяючи паддінґ і рамку всередину боксу, як показано на Рисунку 4.4. Обидва значення віднімаються з width, зменшуючи розмір тематичній області. Багато програмістів вважають такий підхід є більш розумним, незважаючи на те, що він працює не по специфікації.

Управління блокової моделлю CSS

Рисунок 4.4 блокова модель в CSS 2.1 і блокова модель в старому IE 5.5

Робоча група CSS представила властивість box-sizing, як частковий спосіб вирішення цих конкуруючих моделей. Воно дозволяє вибирати реалізація блокової моделі, а також сильно спрощує обчислення при роботі з адаптивним дизайном.

Вибір блокової моделі за допомогою властивості box-sizing

Властивість box-sizing визначено в специфікації CSS Basic User Interface Module Level 3 і приймає два можливих значення: content-box і border-box.

За умовчанням встановлено значення content-box. З цим значенням властивості width і height впливають на розмір тематичній області, що збігається з поведінкою, описаний в специфікації CSS 2.1. Така поведінка встановлено за умовчанням в сучасних браузерах (як показано на Малюнку 4.4).

Значення border-box додає трохи магії. Властивості width і height починають застосовуватися до зовнішньої межі рамки, а не до тематичної області. Рамка і паддінґ малюються всередині боксу елемента, що збігається зі старим поведінкою в IE 5.5. Давайте розберемо приклад, в якому ширина у відсотках поєднана з px на паддинге і рамці:

This is a headline

Lorem ipsum dolor sit amet, consectetur adipisicing …

This is a secondary headline

Lorem ipsum dolor sit amet, consectetur adipisicing …

До тегам article і aside застосований CSS-код нижче, що дає нам макет, зображений на Рисунку 4.5, де перший елемент має ширину 60%, а другий – 40%:

article, aside {
background: #FFEB3B;
border: 10px solid #9C27B0;
float: left;
padding: 10px;
}
article {
width: 60%;
}
aside {
width: 40%;
}

Управління блокової моделлю CSS

Малюнок 4.5. елементи з box-sizing: content-box

За замовчуванням aside і article встановлено властивість box-sizing зі значенням content-box. Значення border-width і padding додають 40 пікселів на ширині елементів, що змінює співвідношення 60%/40%. Давайте додамо до тегам article і aside властивість box-sizing: border-box:

article, aside {
box-sizing: border-box;
}

Зміни показано на Рисунку 4.6: ширина елементів збереглася, проте з-за box-sizing: border-box ширина тепер складається з рамки і паддінга. Width тепер застосовується до зовнішньої межі рамки, а не до тематичної області, тому наші елементи щільно притиснуті один до одного і не змістилися на новий рядок.

Управління блокової моделлю CSS

Малюнок 4.6 елементи з box-sizing: border-box

Я запропонував би використовувати властивість box-sizing: border-box. Воно спрощує життя, з ним не потрібно обчислювати width, щоб підігнати під ширину padding та border.

Краще всього застосовувати box-sizing: border-box з правилами скидання. Приклад нижче взято зі статті Кріса Койера з CSS-Tricks «спадкування box-sizing, ймовірно, ще більш краща практика»:

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

Код вище застосовує border-box ко всім тегам за замовчуванням, не змінюючи поведінки box-sizing в існуючих частинах вашого проекту. Якщо ви точно знаєте, що у вас не буде сторонніх або старих компонентів, які покладаються на content-box, то ці правила можна спростити:

*,
*:before,
*:after {
box-sizing: border-box;
}

В таблиці 4.1 представлена поточна підтримка в браузерах властивості box-size: border-box

Управління блокової моделлю CSS

Управління блокової моделлю – це лише один інгредієнт у розумінні того, як створювати складні макети. У наступному розділі ми з вами розберемо шаруваті елементи.