Від автора: все складається з боксів – це, можливо, найважливіший для розуміння момент в CSS. Якщо в деталях, то кожен елемент в документі генерує бокс. Бокс може бути блочного або инлайнового рівня. Тип боксу визначає те, як елемент буде впливати на макет сторінки.
Створюється бокс чи ні, а також тип цього боксу залежить від мови розмітки. CSS спроектований як спосіб стилізації HTML-документів, тому модель візуального візуалізації CSS значною мірою корениться у відмінності між блоковими і инлайновыми елементами в HTML. За промовчанням елементи p та section створюють бокси блокового рівня, а теги a, u і em створюють инлайновые бокси. SVG взагалі не використовує блоковую модель, тому більша частина макетних властивостей CSS не працює з SVG.
Бокси блокового рівня створюють нові блоки контенту, як видно на Рисунку 4.1. Блокові бокси рендеряться вертикально у вихідному порядку і заповнюють (крім таблиць) всю ширину контейнера. Це звичайне відображення значень block, list-item, table і інших table-* значень (наприклад, table cell).
Малюнок 4.1. бокси блокового рівня в тегах h1, p, ul і table всередині контейнера (сіра область)
Бокси инлайнового рівня не формують нові блоки контенту. Ці бокси створюють рядки всередині блочного боксу. Вони розташовуються горизонтально і заповнюють ширину боксу-контейнера, перестрибуючи на нові рядки за необхідності, як показано на Рисунку 4.2. До боксів инлайнового рівня відносяться значення властивості display inline, inline-block, inline-table і ruby.
Малюнок 4.2. приклад инлайнового боксу з margin: 1em і padding: 5px
Але як же розраховуються розміри боксу? Ось тут все трохи складніше. На Малюнку 4.3 видно, що розміри боксу складаються з тематичній області, padding’а і ширини, плюс ширина рамки, як визначено в CSS2. Ширина margin’а створює на елементі margin-бокс і впливає на інші елементи в документі, але ніяк не впливає на розміри самого боксу.
Малюнок 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, зменшуючи розмір тематичній області. Багато програмістів вважають такий підхід є більш розумним, незважаючи на те, що він працює не по специфікації.
Рисунок 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%;
}
Малюнок 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 тепер застосовується до зовнішньої межі рамки, а не до тематичної області, тому наші елементи щільно притиснуті один до одного і не змістилися на новий рядок.
Малюнок 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
Управління блокової моделлю – це лише один інгредієнт у розумінні того, як створювати складні макети. У наступному розділі ми з вами розберемо шаруваті елементи.