Модель контенту та меж

4.1 Властивість box-sizing

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

Основні моделі box-sizing

Content-box (модель контенту)

Значення content-box є значенням за замовчуванням для всіх елементів. У цій моделі розміри елемента (width та height) визначають тільки розміри контенту, виключаючи відступи та межі. Це означає, що відступи та межі додаються до загальної ширини та висоти елемента.

Border-box (модель меж)

Значення border-box змінює модель вимірювання так, що розміри елемента (width та height) включають внутрішні відступи та межі. Це означає, що якщо ви встановите елементу ширину 200 пікселів, то ці 200 пікселів будуть включати в себе і межі, і внутрішні відступи. При цьому сам контент автоматично стиснеться, щоб звільнити для них місце.

Приклад використання box-sizing:

    
      .box {
        background-color: #3498db;
        color: white;
        padding: 20px;
        border: 5px solid #2c3e50;
        margin: 10px;
        width: 200px;
        height: 100px;
      }

      .content-box {
        box-sizing: content-box;
      }

      .border-box {
        box-sizing: border-box;
      }
    
  

    
      <div class="box content-box">Content-box: ширина та висота включають тільки контент.</div>
      <div class="box border-box">Border-box: ширина та висота включають відступи й межі.</div>
    
  

Пояснення коду:

• .box: базовий стиль для всіх коробок, включаючи відступи, межі та розміри
• .content-box: елемент з box-sizing: content-box, де ширина та висота включають тільки контент
• .border-box: елемент з box-sizing: border-box, де ширина та висота включають відступи та межі

4.2 Вплив box-sizing на макет

Модель контенту (Content-box)

Коли використовується box-sizing: content-box;, відступи та межі додаються до загальної ширини та висоти елемента. Це може призвести до потреби додатково враховувати їх при розрахунках розмірів і позиціонуванні елементів.

Приклад використання

У цьому випадку загальна ширина елемента буде 200px + 20px (padding) * 2 + 5px (border) * 2 = 250px, а загальна висота буде 100px + 20px (padding) * 2 + 5px (border) * 2 = 150px.

    
      .content-box {
        box-sizing: content-box;
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 5px solid #000;
      }
    
  

    
      <div class="box content-box">Content-box: ширина та висота включають тільки контент.</div>
    
  

Модель меж (Border-box)

Коли використовується box-sizing: border-box;, відступи та межі включаються в задані ширину та висоту елемента. Це спрощує обчислення та управління розмірами елемента, особливо при створенні адаптивних макетів.

Приклад використання:

    
      .border-box {
        box-sizing: border-box;
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 5px solid #000;
      }
    
  

    
      <div class="box border-box">Border-box: ширина та висота включають відступи й межі.</div>
    
  

4.3 Створення адаптивного макета

Використання box-sizing: border-box; дозволяє спростити створення адаптивних макетів, оскільки розміри елементів включають відступи та межі, запобігаючи несподіваним переповненням.

Приклад використання:

    
      * {
        box-sizing: border-box;
      }

      .container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
        background-color: #f4f4f4;
      }

      .item {
        flex: 1 1 calc(33.333% - 20px);
        padding: 20px;
        border: 5px solid #3498db;
        background-color: #fff;
      }
    
  

    
      <div class="container">
        <div class="item">Елемент 1</div>
        <div class="item">Елемент 2</div>
        <div class="item">Елемент 3</div>
        <div class="item">Елемент 4</div>
        <div class="item">Елемент 5</div>
        <div class="item">Елемент 6</div>
      </div>
    
  

Пояснення коду:

• * { box-sizing: border-box; }: застосування моделі меж до всіх елементів на сторінці для спрощення управління розмірами
• .container: Flex-контейнер з адаптивним макетом
• .item: Flex-елементи з рівномірним розподілом ширини та включенням padding і border у загальну ширину

4.4 Фіксовані розміри з внутрішніми відступами

Використання box-sizing: border-box; дозволяє легко задати фіксовані розміри для елементів з внутрішніми відступами, не хвилюючись про переповнення.

Приклад використання:

    
      .fixed-size {
        box-sizing: border-box;
        width: 300px;
        height: 150px;
        padding: 20px;
        border: 5px solid #2ecc71;
        background-color: #ecf0f1;
        text-align: center;
        line-height: 150px; /* Центрування тексту по вертикалі */
      }
    
  

    
      <div class="fixed-size">
        Фіксовані розміри
      </div>
    
  

Пояснення коду:

• .fixed-size: елемент з фіксованими розмірами 300x150 пікселів, включаючи padding і border, що дозволяє точно контролювати його розміри

1

Опитування

Блокова модель, рівень 16, лекція 4

Недоступний

Блокова модель

Блокова модель

Відкрити