Основи блокової моделі
Last updated
Last updated
Блокова модель (Box Model) в CSS - це спосіб, яким браузер визначає та розміщує елементи на веб-сторінці. Кожен HTML-елемент може бути розглянутий як прямокутний блок, що складається з кількох частин: контенту, поля, внутрішньої рамки та зовнішньої рамки. Ці частини об'єднуються, щоб сформувати вигляд і розмір кожного елемента на сторінці.
Компоненти блокової моделі:
Контент (Content): Це фактичний вміст елемента, який відображається в середині елемента (текст, зображення тощо).
Внутрішня рамка (Padding): Простір між контентом і внутрішньою межею блока. Це відстань між контентом та рамкою.
Поля (Margin): Простір між зовнішньою межею блока та іншими елементами на сторінці. Поля визначають відстань між елементом і навколишніми елементами.
Зовнішня рамка (Border): Це обрамлення навколо елемента. Зовнішня рамка знаходиться між паддінгами і марджинами.
width і height - це властивості CSS, які використовуються для задання ширини та висоти елемента відповідно.
width: Властивість width визначає ширину елемента. Ця властивість може приймати різні одиниці виміру, такі як пікселі (px), відсотки (%), ем (em), і так далі. Наприклад, width: 300px; задає ширину елемента в 300 пікселях.
height: Властивість height визначає висоту елемента. Як і width, вона також може приймати різні одиниці виміру, такі як пікселі, відсотки, ем, і так далі. Наприклад, height: 200px; задає висоту елемента в 200 пікселях.
box-sizing - це властивість CSS, яка визначає, як враховувати ширину та висоту елемента, включаючи його контент, поля та рамку. Ця властивість може приймати різні значення, які вказують на різні моделі врахування розмірів елемента.
Content-Box (За замовчуванням): У цій моделі розміри елемента вказуються для контенту (тексту та зображення), і потім до них додаються внутрішні поля та зовнішня рамка.
Border-Box: У цій моделі розміри елемента включають його контент, внутрішні поля та зовнішню рамку. Розмір контенту фактично включає в себе внутрішні поля та зовнішню рамку.
Inherit: наслідує значення блокової моделі предка.
content-box - це одне із значень властивості box-sizing в CSS.
Якщо встановити box-sizing: content-box;, ширини та висоти елемента враховують лише його внутрішній вміст (контент), і будь-які відступи, рамки або поля не включаються у визначення розмірів. Іншими словами, зовнішні виміри елемента (ширина та висота) включають лише його внутрішній контент, і будь-які додаткові відступи та рамки додаються до цих внутрішніх розмірів.
Наприклад, якщо у вас є блок з фіксованою шириною 200px та ви встановлюєте йому внутрішній текст шириною 200px, а також додаєте внутрішні відступи або рамку, то обсяг блоку залишиться 200px, а відступи або рамка будуть виступати за межі цього обсягу.
Як рахується кінцеве значення геометричних розмінів елементів:
Наприклад:
Кінцева ширина елемента буде 200px+20px+20px+10px+10px = 260px
В інструментах розробника, на вкладці Computed, можна подивитися геометрію цього елемента.
border-box - це одне зі значень властивості box-sizing в CSS. Якщо встановити box-sizing: border-box;, ширини та висоти елемента враховують його внутрішній вміст (контент), включаючи внутрішні відступи та рамку, але не включають зовнішні відступи. Це означає, що обсяг елемента включає в себе контент, рамку та внутрішні відступи, і будь-які зміни ширини або висоти відступів або рамок автоматично впливають на розміри контенту, не змінюючи зовнішні розміри елемента.
Контент автоматично «стискається» таким чином, щоб всередині контейнера ще помістилися padding і border.
Як рахується кінцеве значення геометричних розмінів елементів:
Наприклад:
В інструментах розробника, на вкладці Computed, можна подивитися геометрію цього елемента.
Глобальний border-box - це спеціальна властивість CSS, яка встановлює значення box-sizing: border-box; для всіх елементів на сторінці. Вона забезпечує зручний спосіб налаштувати всі елементи на сторінці таким чином, щоб їх розміри (ширина та висота) включали в себе контент, рамку та внутрішні відступи, не змінюючи зовнішніх розмірів елементів.
У разі встановлення глобального border-box не буде потреби встановлювати його для кожного окремого елемента. Для цього на самому початку файлу стилів вставляємо такий код:
В такому разі border-box буде застосовано для всіх елементів та псевдоелементів.
Нормалізація стилів (англ. CSS normalization або CSS reset) - це техніка веб-розробки, яка використовується для створення стабільної та спростованої бази стилів для веб-сайтів. Основна ідея полягає в тому, щоб встановити стандартні стилі для всіх елементів HTML, забезпечуючи однаковий вигляд на різних веб-переглядачах. Це допомагає уникнути проблем із відображенням, що можуть виникнути через відмінності у стандартах та рендерінгу між різними браузерами.
Базова таблиця стилів (user agent stylesheet) у кожного браузера своя. Переглянути застосовані стилі можна в інструментах розробника.
Normalize.css - це популярний файл нормалізації стилів, який намагається зробити вигляд різних HTML-елементів однаковим на всіх браузерах. Він зберігає корисні стандартні стилі, які роблять елементи більш передбачуваними, зберігаючи при цьому зовнішній вигляд якнайбільше зближеним зі стандартами.
Щоб застосувати нормалайзер потрібно підключити ще один файл стилів перед усіма стилями.
В нормалізаторі за замовчуванням встановлено глобальний border-box, тому в своїх стилях його можна не вказувати.
