что такое box sizing border box
CSS3: свойство Box-Sizing
Раньше, если мы делали div шириной и высотой 100px, добавляли padding 10px и border 10px, то получался квадрат не 100х100, а 140х140 px:
Но иногда требуется, чтобы div был фиксированной ширины при любых значениях padding и border. В CSS3 нам поможет свойство box-sizing.
Использование box-sizing
Поддержка браузерами
Свойство box-sizing поддерживает большинство современных браузеров: Firefox 3.6+, Safari 3+, Opera 8.5+ и Internet Explorer 8+. Актуальные данные можно посмотреть на сайте caniuse.com.
Практический пример
Рассмотрим реальный пример использования свойства box-sizing. Есть меню из пяти пунктов:
Добавим немного CSS, в т.ч. фиксированную ширину меню в 500 px и ширину каждого элемента в 100 px:
Меню выглядит нормально:
Но при добавлении левого или правого border’а последний пункт меню съезжает, потому что не помещается:
Но если использовать box-sizing, то этой проблемы нет:
CSS3 свойство box-sizing
Как работает border-box?
HTML-структура сайта основана на блочной модели. Для наглядности создадим два одинаковых блока, но с разными значениями свойства box-sizing.
// CSS стили
.content-box <
box-sizing: content-box;
margin: 30px;
padding: 20px;
width: 200px;
height: 200px;
background-color: blanchedalmond;
border: 5px solid gray;
>
.border-box <
box-sizing: border-box;
margin: 30px;
padding: 20px;
width: 200px;
height: 200px;
background-color: blanchedalmond;
border: 5px solid gray;
>
content-box вредит верстальщику
Расчет реальной ширины блока: 200 + 20*2 +5*2 = 250
Высота рассчитывается аналогичным образом. На скриншоте можно увидеть, как в принципе устроена блочная модель.
Данное дефолтное свойство мешает нормально верстать по макету, сильно усложняет необходимость соблюдать точные размеры элементов. При указании размеров, нужно ещё учитывать влияние паддингов и рамок на ширину и высоту элемента. При таком раскладе повышается вероятность ошибок и в целом замедляется процесс верстки.
border-box помогает верстальщику
Если вы новичок и все еще испытываете трудности с пониманием тех или иных CSS свойств, нужно просто запомнить это. Каждый раз, когда верстаете сайт, всегда прописывайте box-sizing: border-box для селектора звездочка (*). Со временем придет большее понимание, не все сразу. Послушать простым языком теоретическую часть и увидеть, как делают верстку профессионалы, вы можете уже сейчас, перейдя по ссылке на мой видеокурс.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
box-sizing
Время чтения: меньше 5 мин
Обновлено 6 октября 2021
Кратко
При помощи свойства box-sizing можно изменить то, как браузер будет рассчитывать размеры элемента.
Подробнее об особенностях расчёта размеров элемента можно прочитать в статье «Блочная модель».
Пример
Создадим два элемента и зададим обоим элементам идентичные стили:
В итоге элементы получились разного размера! Как так? Мы ведь указали одинаковые ширину, высоту и внутренние отступы, а так же рамку 🤔
Как это понять
Ширина контентной области (100) + внутренний отступ слева и справа (25 + 25) + ширина правой и левой рамок (10 + 10). Итого: 170 пикселей.
Аналогично с высотой.
Выходит что первый элемент получил размеры 170 х 170.
Размер второго элемента считается иначе. Из-за значения свойства box-sizing браузер воспринимает width и height как конечные размеры элемента. Получается что в 100 пикселей указанной ширины уже включены и внутренние боковые отступы и боковые рамки. Размеры второго элемента будут 100 х 100.
Как это пишется
В качестве значения для свойства box-sizing невозможно использовать что-то кроме ключевых слов. Значение может быть только одно.
Подсказки
💡 Свойство нельзя анимировать при помощи transition 😔
💡 Свойство не наследуется.
💡 При любом значении свойства внешние отступы ( margin ) в расчёт не берутся.
На практике
Алёна Батицкая
🛠 Из-за стандартного механизма расчёта размера элемента многие начинающие разработчики получают не те размеры элемента, которые ожидали. При этом есть два решения:
CSS Box Sizing
Размер окна CSS
Свойство CSS box-sizing позволяет нам включать заполнение и границу в общую ширину и высоту элемента.
Без CSS окно-Изменение размера свойства
По умолчанию ширина и высота элемента вычисляется так:
Ширина + отступ + граница = фактическая ширина элемента
Высота + отступ + граница = фактическая высота элемента
Это означает, что при задании ширины/высоты элемента элемент часто отображается больше, чем задано (поскольку граница элемента и отступ добавляются к указанной ширине/высоте элемента).
На следующем рисунке показаны два элемента
Пример
.div1 <
width: 300px;
height: 100px;
border: 1px solid blue;
>
.div2 <
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
>
Свойство box-sizing решает эту проблему.
С помощью окна CSS-изменение размера свойства
Свойство box-sizing позволяет нам включать заполнение и границу в общую ширину и высоту элемента.
Если установить box-sizing: border-box; на элементе Padding и граница включены в ширину и высоту:
Вот такой же пример, как и выше, с box-sizing: border-box; Добавлено в оба элемента
Пример
.div1 <
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
>
.div2 <
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
>
Так как результат использования box-sizing: border-box; намного лучше, многие разработчики хотят, чтобы все элементы на своих страницах работали таким образом.
Приведенный ниже код гарантирует, что все элементы имеют размер в этом более интуитивно понятным способом. Многие браузеры уже используют box-sizing: border-box; для многих элементов формы (но не все, поэтому входные и текстовые области выглядят по-разному по ширине: 100%;).
Применение этого ко всем элементам является безопасным и мудрым:
Пример
Tip: Try to remove the box-sizing property from the style element and look what happens. Notice that the width of input, textarea, and submit button will go outside of the screen.
CSS Размер блока
CSS свойство box-sizing позволяет включать отступы и границы в общую ширину и высоту элемента.
Без CSS свойства box-sizing
По умолчанию ширина и высота элемента рассчитывается следующим образом:
width + padding + border = фактическая ширина элемента
height + padding + border = фактическая высота элемента
Это означает, что когда вы устанавливаете ширину / высоту элемента, элемент часто кажется больше, чем вы установили (потому что граница и отступ элемента добавляются к указанной ширине / высоте элемента).
На следующем рисунке показаны два элемента
Пример
.div1 <
width: 300px;
height: 100px;
border: 1px solid blue;
>
.div2 <
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
>
Свойство box-sizing решает эту проблему.
Из CSS свойством box-sizing
Свойство box-sizing позволяет нам включать отступы и границы в общую ширину и высоту элемента.
Если вы установили box-sizing: border-box; для элементов отступ и границы включаются в ширину и высоту:
Вот тот же пример, что и выше, с box-sizing: border-box; добавлен в оба элемента
Пример
.div1 <
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
>
.div2 <
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
>
Поскольку результат использования box-sizing: border-box; намного лучше, многие разработчики хотят, чтобы все элементы на их страницах работали таким образом.
Применять это ко всем элементам безопасно и разумно: