htmllessons.ru

Свойство box-sizing
При изучении вёрстки возникают некоторые сложности при определении размеров элементов. Мы узнаем о необычном свойстве и решим, что же нам необходимо, чтобы вёрстка была такая же, как на макете.
Размеры элементов определяет свойство стилей box-sizing
. Давайте рассмотрим это свойство с азов. У него есть 3 значения: content-box
, border-box
и inherit
. Начальное значение у него content-box. Также свойство не наследуется.
Существует ещё и 4 значение – padding-box
, это значение повторяет border-box
, но оно устарело и не поддерживается браузерами.
1) Значение inherit
наследует значение родителя. Это полезно, когда, например, мы для body задаём определённый box-sizing и, ко всем элементам div задаём box-sizing: inherit
. Это значит, что на все элементы div будет действовать то значение, которое мы задали для body.
2) Значение content-box
, как можно догадаться задаёт расчёт размеров элемента по контентной части, не включая внутренние отступы (padding) и границы (border).
3) Значение border-box
заставляет браузер высчитывать размеры элемента вместе с внутренними отступами (padding) и границами (border).
По сути это всё, что нужно знать о этом свойстве. Но вопрос о том, как же его применять остаётся открытым.
Сравним поближе значения content-box
и border-box
.
Как видно, чтобы размеры элемента были такими, какими мы и задали, нужно использовать box-sizing: border-box
.
Есть 2 способа не сталкиваться с проблемами размеров элементов:
1) Для всех элементов на странице задать box-sizing: border-box
. Это делается через универсальный селектор *
.
2) Для body задать box-sizing: border-box
и для всех остальных элементов задать box-sizing: inherit
.
Я подготовил песочницу, где вы можете сделать шаг влево и закрепить полученные знания. Смело меняйте значения у элементов и смотрите, что из этого получится.
Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация - Войти - Наши курсы. Задавайте вопросы в комментариях!