что такое box sizing border box
Box-Sizing: секрет простых лейаутов
Box-sizing – это свойство CSS, которое делает верстку макетов сайта более понятным. Если вы работали с CSS, то вы знаете, что использование свойств width, padding и border ведет к путанице. Иногда, когда используется свойство width, оно не может быть всегда применено к тому, что вы ожидаете – например ширина width задается в процентах, а граница border указывается в пикселях. Тем не менее, используя свойство box-sizing, ширина блока в 200px будет действительно отображать блок шириной 200px.
Это никак не связано с JavaScript и это также работает в Internet Explorer, начиная с 8й версии.
Блочная модель
Ширина и высота любого элемента на веб-странице описана в блочной модели CSS. Тонкости блочной модели могут быть сложными, но самая важная часть к понимаю это то, как вычисляются ширина и высота блока на странице. Сумма нескольких свойств CSS образует фактически отображаемую ширину и высоту блока.
Без box-sizing, ширина width представляет собой область содержимого (158px).
Актуальная ширина включает ширину области – content, отступы – padding, и границу – border.
Это означает, что если будет установлена ширина 200px, то элемент займет точно указанный размер, если не будет padding и border. Т.е., свойство width означает ширину контентной области, а не ширину всего блока (включая padding и border).
Если вы хотите сделать ширину блока равной 200px, а потом захотите сделать отступы по 20px с каждой стороны, необходимо позаимствовать 40px (20px для левой и 20px для правой сторон) от этой ширины. То же самое надо сделать, при установке величины border. Все это делает код менее читабельным. Чтобы блок имел общую ширину 200px, необходимо код писать так:
Все это не очень удобно. К счастью, есть более лучший и наглядный способ, который может привести к аналогичному результату.
Вместо вычисления ширины, включающей отступы и границы, свойство box-sizing в сочетании с border-box использует собственную ширину в качестве общей ширины блока. И предыдущий код можно изменить так:
Теперь любые отступы или границы не будут добавлены к общей ширине. Вместо этого, они будут автоматически вычитаться из предоставленного пространства. Это приводит к тому, что код становится более понятным для чтения и понимания.
Ниже показано изображение, каким образом свойство box-sizing:border-box расчитывает ширину
Когда box-sizing включен – ширина width является шириной всего блока.
Ширина контента автоматически подстраивается в зависимости от правого и левого отступа, и значений бордеров.
На самом деле, многие веб-дизайнеры и разработчики выступают за использование на веб-страницах для всех элементов более естественного и интуитивного подхода к компоновке блоков.
Paul Irish предлагает использовать следующий код для этого:
Свойство box-sizing не новое, и только из-за того, что оно не поддерживалось в браузерах Internet Explorer ниже 8й версии, его не применяли. Теперь, когда вышли новые версии браузеров эта техника работы с box-sizing становится популярной и рекомендуется использовать ее при создании своих сайтов. Для более полной информации о поддерживаемых браузеров, смотрите в таблице.
Также свойство box-sizing, по-умолчанию, встроено в стили популярных фреймворков Bootstrap и Foundation. Оба эти фреймворка применяют значение border-box к абсолютно всем элементам, что делает их системы более понятными.
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; намного лучше, многие разработчики хотят, чтобы все элементы на их страницах работали таким образом.
Применять это ко всем элементам безопасно и разумно:
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 Русаков Михаил Юрьевич. Все права защищены.
Размеры блоков, или Назад в будущее
Мы стоим на пороге третьей эры Открытого веба (век таблиц и однопиксельных гифов уже не более, чем история), и наши инструменты и процессы развиваются, начиная походить на инструменты обычных программистов — это скрипты сборки, препроцессоры, линтеры (при некотором приближении, напоминающие компиляторы), автоматическое тестирование и контроль версий.
Те из вас, кто помнит тяжелые старые времена, помнит и неправильную блочную модель, которую IE использовал вместо стандартной модели W3C. В этой модели рамка ( border ) и отступ ( padding ) считались частью ширины ( width ) и высоты ( height ) блока, в то время как в модели W3C отступ и рамка прибавлялись к ширине и высоте при расчёте конечных размеров блока. В модели IE свойство width отражало конечную ширину блока, в то время как в модели W3C оно отражало ширину контентной части блока (то есть части блока, в которой находится непосредственно его содержимое). Чтобы заставить IE играть по правилам, мы должны были использовать хак блочной модели Тантека Челика.
Пора переключиться на border-box? Скопировать ссылку
Использование border-box по умолчанию никогда не будет включено в стандарт, так как это скажется на отображении слишком большого количества сайтов, но не пришло ли время переключиться на использование его для всех элементов на всех проектах с помощью универсального селектора, как предлагает Пол? Об этом я думал в последнее время.
Если дело касается только моих собственных проектов или проектов с небольшими командами разработчиков, которых я знаю и с которыми могу общаться непосредственно, я думаю, сказал бы — да, это стоит сделать. Но когда речь идет о руководстве для многих разработчиков, проектах с открытым исходным кодом или демо-материалах, доступных для просмотра большому количеству пользователей, с которыми я никогда не общался, я всё ещё сомневаюсь.
За и против Скопировать ссылку
Определенно, в лагере профессионалов есть несколько наиболее известных разработчиков. Пол Айриш, несомненно, фанат своего дела. Он подытоживает разочарование от текущей модели:
Уф. Если я говорю, что ширина блока должна быть 200 пикселей, то блок должен занимать 200 пикселей по ширине, даже если у него есть отступы по 20 пикселей.
Я большой фанат этой техники, я использовал ее в некоторых мобильных веб-приложениях и все больше использую в веб-проектах.
Джереми Кит просто называет её «очень крутой». В то же время, Стефани Рюис в удивляется в комментарии:
Мы должны лоббировать смену модели W3C. Я постоянно слышу, что разработчики разочарованы.
К слову о «неправильной блочной модели», как мы привыкли её называть. Я думаю, проблема в том, что вы не можете управлять контентной областью блока, и любое изменение отступа или рамки окажет на нее влияние. Я понимаю, что людям может быть проще оформлять блоки таким способом, но это не волшебная палочка, и вам придется смириться с другими сложностями«.
Спецификация недостаточно подробно описывает, как это должно работать, чтобы реализовать это при помощи CSS3 Box, вот что я могу сказать.
В то время как Дэвид Барон (тоже представитель Mozilla, а также рабочей группы CSS) заявляет:
Насколько я вижу, «за» и «против» таковы:
За Скопировать ссылку
Против Скопировать ссылку
Что вы думаете? Скопировать ссылку
Через неделю в блоге появилась еще одна запись, уже с результатами оригинального опроса. Мы решили опубликовать перевод записи с результатами здесь же.
Результаты опроса Скопировать ссылку
В приведённой таблице под «командным проектом» понимается проект, в котором разработчики знакомы с человеком, принимающем решение об использовании модели border-box — например, группа разработчиков в одной компании или группа друзей, с которыми вы близко общаетесь в ходе работы. Под «публичным проектом» понимается проект, в котором разработчиком может быть кто угодно, с кем вы, вероятно, не можете лично согласовать выбор модели — проект с открытым исходным кодом или публичное API.
Хотя это не окончательные результаты голосования, есть признаки того, что разработчики комфортно чувствуют себя при использовании модели border-box (или планируют её использовать) и рады использовать ее в «командных проектах». Меня немного удивило количество разработчиков, уже использующих эту модель. Число разработчиков, предпочитающих применять модель border-box в «публичных проектах» ниже, но все равно на 20% выше, чем число тех, кто не планирует этого делать. Если результаты опроса что-то значат, не удивляйтесь, если встретите все больше проектов, использующих модель, формально считающуюся неправильной.
Я оставлю опрос открытым в надежде собрать больше ответов. Но поскольку соотношение результатов в box-sizing: border-box; составило 60 к 40 в течение недели, я не жду, что результат значительно изменится.
Вы все еще можете принять участие в опросе. К сожалению, результаты опроса сейчас скрыты. Но это только подогревает наше любопытство. Расскажите: а что вы думаете о возможности выбора блочной модели? Используете box-sizing: border-box; в текущих проектах? Планируете использовать?
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 ) в расчёт не берутся.
На практике
Алёна Батицкая
🛠 Из-за стандартного механизма расчёта размера элемента многие начинающие разработчики получают не те размеры элемента, которые ожидали. При этом есть два решения: