033.4 Урок 1

Сертифікат:

Основи веброзробки

Версія:

1.0

Розділ:

033 Дизайн контенту за допомогою CSS

Тема:

033.4 CSS Box модель і макет

Урок:

1 з 1

Вступ

Кожен видимий елемент у HTML-документі відображається як прямокутне поле. Таким чином, термін box model описує підхід CSS до зміни візуальних властивостей елементів. Подібно до коробок різного розміру, елементи HTML можуть бути вкладені до контейнерних елементів, зазвичай це елемент div, тому їх можна розділити на розділи.

Ми можемо використовувати CSS, щоб змінити положення блоків, від незначних до різких змін у розміщенні елементів на сторінці. Окрім звичайного потоку, позиція кожного поля може базуватись на елементах навколо нього, або на його відношенні до батьківського контейнера, або на його відношенні до viewport (області видимості), яка є областю сторінки, видимою для користувача. Жоден механізм не відповідає всім можливим вимогам до компонування, тому може знадобитися їх комбінація.

Нормальний потік

Спосіб, у який за замовчуванням браузер відображає дерево документів називається normal flow (нормальний потік). Прямокутники, що відповідають елементам, розміщуються більш-менш у тому ж порядку, що й у дереві документа, відносно їхніх батьківських елементів. Тим не менш, залежно від типу елемента, відповідне поле може дотримуватись окремих правил позиціонування.

Хороший спосіб зрозуміти логіку нормального потоку – зробити блоки видимими. Ми можемо почати з дуже простої сторінки, яка має лише три окремих елементи div, кожен з яких має абзац із випадковим текстом:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS Box модель і макет</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="first">
  <h2>Перший div</h2>
  <p><span>Sed</span> <span>eget</span> <span>velit</span>
  <span>id</span> <span>ante</span> <span>tempus</span>
  <span>porta</span> <span>pulvinar</span> <span>et</span>
  <span>ex.</span></p>
</div><!-- #first -->

<div id="second">
  <h2>Другий div</h2>
  <p><span>Fusce</span> <span>vitae</span> <span>vehicula</span>
  <span>neque.</span> <span>Etiam</span> <span>maximus</span>
  <span>vulputate</span> <span>neque</span> <span>eu</span>
  <span>lobortis.</span> <span>Phasellus</span> <span>condimentum,</span>
  <span>felis</span> <span>eget</span> <span>eleifend</span>
  <span>aliquam,</span> <span>dui</span> <span>dolor</span>
  <span>bibendum</span> <span>leo.</span></p>
</div><!-- #second -->

<div id="third">
  <h2>Третій div</h2>
  <p><span>Pellentesque</span> <span>ornare</span> <span>ultricies</span>
  <span>elementum.</span> <span>Morbi</span> <span>vulputate</span>
  <span>pretium</span> <span>arcu,</span> <span>sed</span>
  <span>faucibus.</span></p>
</div><!-- #third -->

</body>
</html>

Кожне слово міститься в елементі span, тому ми можемо стилізувати слова та побачити, що вони також розглядаються як блоки. Щоб зробити поля видимими, ми повинні відредагувати файл таблиці стилів style.css, на який посилається HTML-документ. Наступні правила зроблять те, що нам потрібно:

* {
  font-family: sans;
  font-size: 14pt;
}

div {
  border: 2px solid #00000044;
}

#first {
  background-color: #c4a000ff;
}

#second {
  background-color: #4e9a06ff;
}

#third {
  background-color: #5c3566da;
}

h2 {
  background-color: #ffffff66;
}

p {
  background-color: #ffffff66;
}

span {
  background-color: #ffffffaa;
}

Результат показано на Figure 1.

Figure 1. Основний потік елементів - зверху вниз і зліва направо.

Figure 1 показує, що кожен тег HTML має відповідний блок в макеті. Елементи div, h2 та p займають ширину їхнього батьківського елемента. Наприклад, батьківським елементом елементів div є елемент body, тому вони поширюються на ширину тіла документа, тоді як батьківським елементом кожного елемента h2 та p є відповідний йому div. Поля, які поширюються на ширину батьківського елемента, називаються блочними елементами. Деякі з найпоширеніших тегів HTML, які відображаються як блоки, це h1, h2, h3, p, ul, ol, table, li, div, section , form, і aside. Споріднені блочні елементи, блочні елементи, що мають один і той самий безпосередній батьківський елемент, укладаються всередині свого батьківського елемента в порядку зверху вниз.

Note

Деякі блокові елементи не призначені для використання в якості контейнерів для інших блокових елементів. Можна, наприклад, вставити блоковий елемент всередину елемента h1 або p, але це не вважається найкращою практикою. Швидше, дизайнер повинен використовувати відповідний тег як контейнер. Поширеними тегами-контейнерами є div, section та aside.

Окрім звичайного тексту, такі елементи, як h1, p та li, очікують лише вбудовані елементи у якості дочірніх. Як і в більшості сценаріїв вестернів, вбудовані елементи слідують за потоком тексту зліва направо. Коли в правій частині не залишається місця, потік вбудованих елементів продовжується в наступному рядку, як будь-який текст. Деякі звичайні HTML-теги, які розглядаються як вбудовані блоки, це span, a, em, strong, img, input, і label.

У нашому прикладі HTML-сторінки кожне слово всередині абзаців було оточено тегом span, тому їх можна було виділити відповідним правилом CSS. Як показано на зображенні, кожен елемент span розміщується горизонтально, зліва направо, доки не залишиться місця в батьківському елементі.

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

Властивості margin і padding впливають на всі типи блоків. Якщо ви не встановите ці властивості явно, браузер встановлює деякі з них, використовуючи стандартні значення. Як показано в Figure 1, елементи h2 і p були відтворені з проміжком між ними. Ці розриви є верхнім і нижнім полями, які браузер додає до цих елементів за замовчуванням. Ми можемо видалити їх, змінивши правила CSS для селекторів h2 і p:

h2 {
  background-color: #ffffff66;
  margin: 0;
}

p {
  background-color: #ffffff66;
  margin: 0;
}

Результат показано на Figure 2.

Figure 2. Властивість margin може змінювати або видаляти поля з елементів.

Елемент body також за замовчуванням, має невелике поле, яке створює відстань навколо. Цей зазор також можна видалити за допомогою властивості margin.

Хоча властивість margin визначає проміжок між елементом та його оточенням, властивість елемента padding визначає внутрішній розрив між обмеженнями контейнера та його дочірніми елементами. Розглянемо, наприклад, елементи h2 та p всередині кожного div у прикладі коду. Ми могли б використовувати їх властивість margin, щоб створити відступ від меж відповідного div, але простіше змінити властивість padding контейнера:

#second {
  background-color: #4e9a06ff;
  padding: 1em;
}

Було змінено лише правило для другого div, тому результати (Figure 3) показують різницю між другим div та іншими контейнерами div.

Figure 3. Різні контейнери div можуть мати різні заповнення.

Властивість margin є скороченним записом чотирьох властивостей, що керують чотирма сторонами поля: margin-top, margin-right, margin-bottom і margin-left. Коли margin призначено єдине значення, як у розглянутих прикладах, усі чотири поля використовують це значення. Коли записуються два значення, перше визначає верхнє і нижнє поля, а друге – праве і ліве поля. Використання margin: 1em 2em, наприклад, визначає проміжок у 1 em для верхнього та нижнього полів і проміжок у 2 em для правого та лівого полів. Запис чотирьох значень встановлює поля для чотирьох сторін за годинниковою стрілкою, починаючи зверху. Різні значення у скороченому записі властивості не потрібні для використання одних і тих самих одиниць.

Властивість padding також є скороченням і дотримується тих самих принципів, що й властивість margin.

У своїй поведінці за замовчуванням блочні елементи розтягуються, щоб відповідати доступній ширині. Але це не є обов’язковим. Властивість width може встановити фіксований горизонтальний розмір для блоку:

#first {
  background-color: #c4a000ff;
  width: 6em;
}

Додавання width: 6em до правила CSS зменшує перший div горизонтально, залишаючи порожній простір з його правої сторони (Figure 4).

Figure 4. Властивість width змінює горизонтальну ширину першого div.

Замість того, щоб залишати перший div вирівняним ліворуч, ми можемо захотіти розмістити його по центру. Центрування блока еквівалентно встановленню полів однакового розміру з обох сторін, тому ми можемо використовувати для цього властивість margin. Розмір доступного простору може відрізнятися, тому ми використовуємо значення auto для лівого та правого полів:

#first {
  background-color: #c4a000ff;
  width: 6em;
  margin: 0 auto;
}

Ліве та праве поля автоматично обчислюються браузером, і блок буде відцентровано (Figure 5).

Figure 5. Властивість margin використовується для центрування першого div.

Як показано, звуження блочного елемента не робить простір, що залишився, доступним для наступного елемента. Природний потік все ще зберігається так, ніби вужчий елемент ще займає всю доступну ширину.

Налаштування нормального потоку

Нормальний потік простий і послідовний. CSS також дає змогу порушувати нормальний потік і розташування елементів дуже специфічними способами, навіть перевизначаючи прокручування сторінки, за бажанням. У цьому розділі ми розглянемо кілька способів керування позиціонуванням елементів.

Плаваючі елементи

Можна зробити так, щоб споріднені блочні елементи розділяли один і той самий горизонтальний простір. Один із способів зробити це – за допомогою властивості float, яка видаляє елемент з нормального потоку. Як випливає з її назви, властивість float змушує поле плавати над елементами блоку, що йдуть після, тому вони будуть відображатися так, як ніби вони знаходяться під плаваючим полем. Щоб зробити перший div плаваючим праворуч, додайте float: right до відповідного правила CSS:

#first {
  background-color: #c4a000ff;
  width: 6em;
  float: right;
}

Автоматичні поля ігноруються у плаваючому полі, тому властивість margin можна видалити. Figure 6 показує результат переміщення першого div праворуч.

Figure 6. Перший div є плаваючим і не є частиною нормального потоку.

За замовчуванням усі елементи блоку, що йдуть після плаваючого елемента, потраплять під нього. Тому при достатній висоті плаваюче поле покриє всі інші елементи блоку.

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

Попереднє зображення показує, як перший div охоплює другий div і частину третього div. Припустимо, ми хочемо, щоб перший div плавав над другим div, але не над третім. Рішення полягає в тому, щоб включити властивість clear до правила CSS, що відповідає третьому div:

#third {
  background-color: #5c3566da;
  clear: right;
}

Встановлення властивості clear в значення right змушує відповідний елемент пропускати будь-які попередні елементи, переміщені вправо, відновлюючи нормальний потік (Figure 7).

Figure 7. Властивість clear повертає до нормального потоку.

Аналогічно, якщо попередній елемент плавав ліворуч, ви можете використовувати clear: left, щоб відновити нормальний потік. Якщо вам доводиться пропускати плаваючі елементи як ліворуч, так і праворуч, використовуйте clear: both.

Блоки позиціонування

У нормальному потоці кожен блок йде за блоками, що йдуть перед ним у дереві документа. Попередні споріднені елементи "виштовхують" елементи, що йдуть після них, переміщуючи їх праворуч і вниз всередині свого батьківського елемента. Батьківський елемент може мати своїх нащадків, вчиняючи з ними так само. Це схоже на розміщення плитки поруч одна з одною на стіні, починаючи зверху.

Цей метод позиціонування блоків називається static і є значенням за замовчуванням для CSS властивості position. Крім визначення полів і відступів, неможливо змінити розташування статичного поля на сторінці.

Як і плитка в аналогії з стінами, статичне розміщення не є обов’язковим. Як і у випадку з плиткою, ви можете розмістити блоки як завгодно, навіть накриваючи інші блоки. Для цього призначте властивості position одне з наступних значень:

relative: Цей елемент дотримується нормального потоку документа, але він може використовувати властивості top, right, bottom та left, щоб задати зміщення відносно його початкового статичного положення. Зміщення також може бути від’ємним. Інші елементи залишаються на своїх початкових місцях так, як ніби відносний елемент все ще статичний.
absolute: Цей елемент ігнорує нормальний потік інших елементів і розташовується на сторінці за властивостями top, right, bottom та left. Їх значення відносяться до тіла документа або до нестатичного батьківського контейнера.
fixed: Цей елемент ігнорує нормальний потік інших елементів і позиціонує себе за властивостями top, right, bottom та left. Їх значення залежать від області перегляду (тобто області екрана, де відображається документ). Фіксовані елементи не рухаються, коли відвідувач прокручує документ, а нагадують наклейку, закріплену на екрані.
sticky: Елемент слідує за нормальнти потоком документа. Однак замість того, щоб виходити з області перегляду, коли документ прокручується, він зупинятиметься в позиції, заданій властивостями top, right, bottom та left. Наприклад, якщо значення top дорівнює 10px, елемент припинить прокручування під верхньою частиною вікна перегляду, коли досягне 10 пікселів від верхньої межі області перегляду. Коли це станеться, решта сторінки продовжує прокручуватися, але липкий елемент поводиться як фіксований елемент у цьому положенні. Він повернеться у вихідне положення, коли документ прокрутиться назад до свого положення у вікні перегляду. Сьогодні липкі елементи зазвичай використовуються для створення верхнього меню, яке завжди видно.

Позиції, які можуть використовувати властивості top, right, bottom та left, не вимагають використання їх усіх. Наприклад, якщо ви встановлюєте властивості top і height для абсолютного елемента, браузер неявно обчислює його властивість bottom (top + height = bottom).

Властивість `display`

Якщо порядок, заданий нормальним потоком, не є проблемою у вашому дизайні, але ви хочете змінити те, як поля вирівнюються на сторінці, змініть властивість display цього елемента. Властивість display може навіть змусити елемент повністю зникнути з відображеного документа, якщо встановити display: none. Це корисно, якщо ви хочете показати елемент пізніше за допомогою JavaScript.

Властивість display також може, наприклад, змусити блочний елемент поводитися як вбудований елемент (display: inline). Однак це не вважається хорошою практикою. Існують кращі методи розміщення елементів контейнера поруч, наприклад, модель flexbox.

Модель flexbox була винайдена для подолання обмеження плаваючих елементів і усунення неналежного використання таблиць для структурування макета сторінки. Коли ви встановлюєте для властивості display -елемента контейнера значення flex, щоб перетворити його на контейнер flexbox, його безпосередні дочірні елементи будуть вести себе приблизно як клітинки в рядку таблиці.

Tip	Якщо ви хочете ще більше контролювати розміщення елементів на сторінці, зверніть увагу на функцію CSS grid. Grid (сітка) – це потужна система, заснована на рядках і стовпцях для створення складних макетів.

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

<div id="container">

<div id="first">
  <h2>Перший div</h2>
  <p><span>Sed</span> <span>eget</span> <span>velit</span>
  <span>id</span> <span>ante</span> <span>tempus</span>
  <span>porta</span> <span>pulvinar</span> <span>et</span>
  <span>ex.</span></p>
</div><!-- #first -->

<div id="second">
  <h2>Другий div</h2>
  <p><span>Fusce</span> <span>vitae</span> <span>vehicula</span>
  <span>neque.</span> <span>Etiam</span> <span>maximus</span>
  <span>vulputate</span> <span>neque</span> <span>eu</span>
  <span>lobortis.</span> <span>Phasellus</span> <span>condimentum,</span>
  <span>felis</span> <span>eget</span> <span>eleifend</span>
  <span>aliquam,</span> <span>dui</span> <span>dolor</span>
  <span>bibendum</span> <span>leo.</span></p>
</div><!-- #second -->

<div id="third">
  <h2>Третій div</h2>
  <p><span>Pellentesque</span> <span>ornare</span> <span>ultricies</span>
  <span>elementum.</span> <span>Morbi</span> <span>vulputate</span>
  <span>pretium</span> <span>arcu,</span> <span>sed</span>
  <span>faucibus.</span></p>
</div><!-- #third -->


</div><!-- #контейнер -->

Додайте наступне правило CSS до таблиці стилів, щоб перетворити контейнер div у flexbox-контейнер:

#container {
  display: flex;
}

Результатом є три внутрішні елементи div, які відображаються поряд одне з одним (Figure 8).

Figure 8. Модель flexbox створює сітку.

Використання значення inline-flex замість flex дає здебільшого той самий результат, але змушує дочірні елементи поводити себе більше як вбудовані елементи.

Адаптивний дизайн

Ми знаємо, що CSS забезпечує властивості, які коригують розміри елементів і шрифтів відносно доступної області екрана. Однак ви можете піти далі й використовувати різний дизайн для різних пристроїв: наприклад, настільні системи порівняно з пристроями з розмірами екранів меншими за певний розмір. Цей підхід називається адаптивним вебдизайном, а CSS забезпечує методи, які називаються media queries (медіазапити), щоб зробити це можливим.

У попередньому прикладі ми змінили макет сторінки, щоб розмістити елементи div поруч у стовпцях. Такий макет підходить для великих екранів, але на менших екранах він буде занадто захаращеним. Щоб вирішити цю проблему, ми можемо додати медіазапит до таблиці стилів, що відповідає лише екранам із шириною щонайменше 600px пікселів:

@media (min-width: 600px){
  #container {
    display: flex;
  }
}

Правила CSS всередині директиви @media будуть використовуватися, лише якщо зазначені в дужках критерії задовольняються. У цьому прикладі, якщо ширина області перегляду менша за 600px, правило не буде застосовано до контейнера div, а його дочірні елементи відображатимуться як звичайні елементи div. Браузер повторно оцінює медіазапити щоразу, коли змінюється розмір області перегляду, тому макет можна змінювати в режимі реального часу, змінюючи розмір вікна браузера або повертаючи смартфон.

Вправи до посібника

Якщо властивість position не змінено, який метод позиціонування використовуватиме браузер?
Як переконатися, що поле елемента буде відтворено після будь-яких раніше плаваючих елементів?
Як можна використовувати скорочену властивість margin, щоб встановити верхнє/нижнє поля на 4px, а праве/ліве поля на 6em?
Як можна горизонтально центрувати статичний елемент контейнера з фіксованою шириною на сторінці?

Дослідницькі вправи

Запишіть правило CSS, що відповідає елементу <div class="picture"> так, щоб текст всередині наступних блочних елементів розташовувався праворуч.
Як властивість top впливає на статичний елемент відносно його батьківського елемента?
Як зміна для елемента властивості display на flex впливає на його розміщення в нормальному потоці?
Яка функція CSS дає змогу використовувати окремий набір правил залежно від розмірів екрана?

Підсумки

Цей урок охоплює CSS box модель і те, як ми можемо її налаштувати. На додаток до нормального потоку документа, дизайнер може використовувати різні механізми позиціонування для реалізації нестандартного макета. Урок охоплює такі поняття та процедури:

Нормальний потік документа.
Коригування поля та заповнення поля елемента.
Використання властивостей float і clear.
Механізми позиціонування: статичні, відносні, абсолютні, фіксовані та липкі.
Альтернативні значення властивості display.
Основи адаптивного дизайну.

Відповіді до вправ посібника

Якщо властивість position не змінено, який метод позиціонування використовуватиме браузер?

Метод static.
Як переконатися, що поле елемента буде відтворено після будь-яких раніше плаваючих елементів?

Для елемента властивість clear має бути встановлена в both.
Як можна використовувати скорочену властивість margin, щоб встановити верхнє/нижнє поля на 4px, а праве/ліве поля на 6em?

Це має бути margin: 4px 6em або margin: 4px 6em 4px 6em.
Як можна горизонтально центрувати статичний елемент контейнера з фіксованою шириною на сторінці?

Використанням значення auto у властивостях margin-left і margin-right.

Відповіді до дослідницьких вправ

Запишіть правило CSS, що відповідає елементу <div class="picture"> так, щоб текст всередині наступних блочних елементів розташовувався праворуч.

.picture { float: left; }
Як властивість top впливає на статичний елемент відносно його батьківського елемента?

Властивість top не застосовується до статичних елементів.
Як зміна для елемента властивості display на flex впливає на його розміщення в нормальному потоці?

Розміщення самого елемента не змінюється, але його безпосередні дочірні елементи відображатимуться поряд по горизонталі.
Яка функція CSS дає змогу використовувати окремий набір правил залежно від розмірів екрана?

Медіа-запити дають змогу браузеру перевірити розміри області перегляду перед застосуванням правила CSS.