Управління блокової моделлю css
Створюється бокс чи ні, а також тип цього боксу залежить від мови розмітки. CSS спроектований як спосіб стилізації HTML-документів, тому модель візуального рендеринга CSS в значній мірі полягати у відмінностях між блоковими і інлайновимі елементами в HTML. За замовчуванням елементи p і section створюють бокси блочного рівня, а теги a, span і 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 на паддінге і рамці:
До тегам article і aside застосований CSS-код нижче, що дає нам макет, показаний на рисунку 4.5, де перший елемент має ширину 60%, а другий - 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:
Зміни показані на рисунку 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, ймовірно, ще більш краща практика»:
Код вище застосовує border-box до всіх тегам за замовчуванням, не змінюючи поведінки box-sizing в існуючих частинах вашого проекту. Якщо ви точно знаєте, що у вас не буде сторонніх або старих компонентів, які покладаються на content-box, то ці правила можна спростити:
У таблиці 4.1 представлена поточна підтримка в браузерах властивості box-size: border-box
Управління блокової моделлю - це лише один інгредієнт в розумінні того, як створювати складні макети. У наступному розділі ми з вами розберемо шаруваті елементи.
Редакція: Команда webformyself.
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі