EasyCode365EasyCode365

Базове візуальне форматування і позиціонування

CSS — це не лише кольори, шрифти й borders.

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

У цьому уроці ти вивчиш основи document flow, display і простого позиціонування.

Чому візуальне форматування важливе

HTML задає структуру сторінки.

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

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

Що означає document flow

Document flow — це звичайний спосіб, у який браузер розміщує елементи на сторінці.

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

Багато проблем із layout у початківців виникають тоді, коли природний flow відрізняється від очікуваного.

Block-елементи

Block-елемент починається з нового рядка.

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

Поширені block-елементи:

  • <div>
  • <p>
  • <h1>
  • <section>
Можна редагувати
<div class="block-example">Перший блок</div>
<div class="block-example">Другий блок</div>

<style>
  .block-example {
    display: block;
    margin-bottom: 8px;
    padding: 12px;
    background-color: #dbeafe;
    border: 1px solid #2563eb;
    font-family: Arial, sans-serif;
  }
</style>

Навіть якщо текст короткий, кожен block усе одно починається з окремого рядка.

Inline-елементи

Inline-елемент розміщується всередині поточного рядка.

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

Поширені inline-елементи:

  • <span>
  • <a>
  • <strong>
  • <em>
Можна редагувати
<p class="inline-demo">
  У цьому абзаці є
  <span class="inline-example">inline-текст</span>
  всередині речення.
</p>

<style>
  .inline-demo {
    font-family: Arial, sans-serif;
  }

  .inline-example {
    display: inline;
    width: 200px;
    height: 80px;
    padding: 4px;
    background-color: #fef3c7;
    border: 1px solid #d97706;
  }
</style>

Зверни увагу: width і height не керують inline-елементом так, як керували б block-елементом.

Inline-block-елементи

inline-block — це корисний проміжний варіант.

Inline-block-елемент може стояти поруч з іншим контентом, як inline-елемент. Він також може використовувати width, height, padding і margins більш передбачувано, як block-елемент.

Можна редагувати
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>

<style>
  .tag {
    display: inline-block;
    width: 110px;
    padding: 10px;
    margin: 4px;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    text-align: center;
  }
</style>

Це корисно для бейджів, маленьких навігаційних посилань, labels і простих елементів у стилі кнопок.

Порівняння block, inline та inline-block

  • display: block починається з нового рядка і може використовувати width та height.
  • display: inline залишається в рядку тексту й не використовує width та height звичайним способом.
  • display: inline-block стоїть у рядку, але все одно поважає width та height.
Можна редагувати
<div class="display-demo">
  <div class="item block-item">block</div>
  <span class="item inline-item">inline</span>
  <span class="item inline-item">inline</span>
  <span class="item inline-block-item">inline-block</span>
  <span class="item inline-block-item">inline-block</span>
</div>

<style>
  .display-demo {
    font-family: Arial, sans-serif;
  }

  .item {
    width: 130px;
    height: 44px;
    margin: 6px;
    padding: 8px;
    border: 2px solid #4b5563;
    background-color: #f3f4f6;
  }

  .block-item {
    display: block;
  }

  .inline-item {
    display: inline;
    background-color: #fee2e2;
  }

  .inline-block-item {
    display: inline-block;
    background-color: #dbeafe;
  }
</style>

Ті самі правила width і height поводяться по-різному, бо значення display різні.

Що означає positioning

Властивість position керує тим, чи елемент залишається у normal flow, чи рухається з нього.

Позиціонування використовує offset-властивості:

  • top
  • right
  • bottom
  • left

Ці властивості працюють лише тоді, коли елемент має position-значення, яке підтримує offsets.

Цей урок охоплює static, relative та absolute. Також існують fixed і sticky, які розглядаються в наступному уроці.

Static-позиціонування

position: static — це значення за замовчуванням для HTML-елементів.

Static-елемент іде за normal document flow. Offset-властивості на нього не впливають.

Лише читання

Більшість елементів мають залишатися static, якщо немає чіткої причини їх рухати.

Relative-позиціонування

position: relative залишає елемент у normal flow.

Після цього можна використовувати top, right, bottom або left, щоб візуально зсунути його з початкового місця.

Можна редагувати
<div class="row">Звичайний елемент</div>
<div class="row moved-item">Relative-елемент</div>
<div class="row">Звичайний елемент</div>

<style>
  .row {
    width: 180px;
    margin-bottom: 8px;
    padding: 10px;
    background-color: #e5e7eb;
    border: 1px solid #6b7280;
    font-family: Arial, sans-serif;
  }

  .moved-item {
    position: relative;
    left: 30px;
    background-color: #fde68a;
  }
</style>

Relative-елемент рухається вправо, але браузер усе одно зберігає його початкове місце у flow.

Absolute-позиціонування

position: absolute прибирає елемент із normal flow.

Інші елементи поводяться так, ніби absolutely positioned елемент не займає звичайного місця.

Absolute-позиціонування корисне для невеликих деталей, які треба точно розмістити: бейджів, labels, іконок і кнопок закриття.

Це не хороший інструмент для побудови всього layout сторінки.

Найближчий позиціонований батьківський елемент

Absolutely positioned елементу потрібна точка відліку.

Він шукає найближчого предка зі значенням position, відмінним від static. Батьківський елемент із position: relative — найпоширеніший вибір.

Якщо він не знаходить позиціонованого предка, то використовує сторінку як точку відліку. Через це елемент часто з'являється далеко від очікуваного місця.

Приклад для запуску: бейдж на картці

У цьому прикладі картка є позиціонованим батьком, а бейдж — absolute-дочірнім елементом.

Можна редагувати
<div class="profile-card">
  <strong>Курс CSS</strong>
  <span class="lesson-badge">Нове</span>
</div>

<style>
  .profile-card {
    position: relative;
    width: 220px;
    padding: 32px 20px;
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    text-align: center;
  }

  .lesson-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: #dc2626;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
  }
</style>

Бейдж використовує картку як точку відліку, бо .profile-card має position: relative.

Поширені помилки початківців

  • Додавати width і height до inline-елементів: використовуй inline-block або block, коли потрібен передбачуваний розмір.
  • Використовувати absolute positioning для всього layout: спершу використовуй normal flow. Пізніше Flexbox і Grid будуть кращими інструментами для layout сторінки.
  • Забувати позиціонованого батька: додай position: relative до батьківського елемента, коли absolute-дочірній елемент має розміщуватися всередині нього.
  • Очікувати, що relative positioning зсуне інші елементи: relative-елемент зберігає своє початкове місце у flow.
  • Використовувати offsets на static-елементах: top, right, bottom і left не впливають на position: static.

Мініпрактика

Уяви .badge з position: absolute, розміщений всередині .card, у якої стандартне position: static.

Який елемент бейдж використає як точку відліку для позиціонування?

Перевір відповіді у quiz, коли будеш готовий.

Короткий quiz з відповідями

  1. Яке значення display дозволяє елементам стояти поруч і водночас поважати width та height?
  2. Яке значення position є стандартним для HTML-елементів?
  3. Що position: relative робить із початковим місцем елемента у normal flow?

Відповіді:

  1. inline-block.
  2. static.
  3. Початкове місце залишається зарезервованим, навіть якщо елемент візуально зсунутий.

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

Невеликий виклик

Стилізуй картку сповіщення нижче.

Твої цілі:

  • Зроби .card точкою відліку для позиціонування.
  • Зроби .new-badge absolutely positioned.
  • Розмісти бейдж у верхньому лівому куті картки.
  • Додай бейджу червоний фон і білий текст.
Можна редагувати
<div class="card">
  Вхідні
  <span class="new-badge">Нове</span>
</div>

<style>
  .card {
    /* Зроби цей елемент точкою відліку для позиціонування */

    width: 200px;
    margin: 32px;
    padding: 40px;
    background-color: #f3f4f6;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    text-align: center;
  }

  .new-badge {
    /* Прибери цей елемент із normal flow */

    /* Перемісти його у верхній лівий кут */

    /* Додай червоний фон і білий текст */

    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: bold;
  }
</style>

Підсумок

  • Document flow — це звичайний спосіб, у який браузер розміщує елементи на сторінці.
  • display: block починається з нового рядка і може використовувати width та height.
  • display: inline залишається в рядку тексту й не використовує width та height звичайним способом.
  • display: inline-block стоїть у рядку і водночас поважає width та height.
  • position: static — значення за замовчуванням, і offsets на нього не впливають.
  • position: relative візуально рухає елемент, але зберігає його початкове місце.
  • position: absolute прибирає елемент із normal flow.
  • Absolutely positioned елемент використовує найближчого позиціонованого предка як точку відліку.