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

box-sizing, overflow та видимість

💡 Приклад коду

Проблема: box без box-sizing:
width: 200px + padding: 20px + border: 2px = 244px фактична ширина!

Рішення — box-sizing: border-box:
*, *::before, *::after {
  box-sizing: border-box;
}
Тепер width: 200px — це ФІНАЛЬНА ширина включно з padding і border.

overflow — що робити якщо контент не поміщається:
overflow: visible;  /* показати (default) */
overflow: hidden;   /* обрізати */
overflow: scroll;   /* прокрутка завжди */
overflow: auto;     /* прокрутка якщо потрібна */

Visibility:
visibility: hidden;  /* прихований, але займає місце */
display: none;       /* прихований, не займає місце */
opacity: 0;          /* прозорий, займає місце */

← Попередній урок Наступний урок →