box-sizing — Как это работает?


Техническое объяснение

Свойство box-sizing определяет, как вычисляется ширина и высота элемента.

box-sizing принимает только два значения: content-box и border-box.

Значение по умолчанию box-sizingcontent-box, что означает, что ширина элемента вычисляется следующим образом:

actual width = width + border-left + border-right + padding-left + padding-right

Таким образом иногда трудно вычислить фактическую ширину элемента, особенно при использовании относительных значений.

Пример

В следующем примере мы используем content-box по умолчанию. Дочерний элемент имеет ширину 100%, границу 8px и padding 4px. Фактическая ширина вычисляется следующим образом (вы можете проинспектировать элемент, чтобы проверить это):

actual width = width 100% + border 8px + padding 4px

Вместо этого, если мы изменим box-sizing на border-box, ширина элемента будет учитывать padding и границы. Дочерний компонент по-прежнему имеет ширину 100%, границу 8px и padding 4px, но фактическая ширина равна 100%.

Внизу статьи на моем сайте вы можете поиграть со следующим интерактивным примером, чтобы увидеть, как меняется ширина дочернего компонента в зависимости от значения box-sizing.


Ресурсы

  • MDN box-sizing

Оцените статью
devanswers.ru
Добавить комментарий