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, то этой проблемы нет:
Свойства блочной модели CSS. Объяснение с примерами
Приветствую всех жителей хабравиля! Сегодня я подготовил для вас материал по основам по блочной модели CSS. Безусловно, многие из вас знают о чём идёт речь, но сегодня я постараюсь объяснить прописные истины более понятно и наглядно, что поможет вам создавать веб-сайты, с идеально подходящими друг другу элементами (с точностью до пикселя), и научит более точно использовать свойства размеров, полей, отступов и границ. Итак, всех приглашаю под кат и погнали!
Оглавление
Зачем изучать блочную модель CSS?
Блочная модель CSS состоит из свойств: box-sizing, padding и margin. Если их не использовать, то получим что-то похожее
Веб-сайт без полей и отступов
Но если вы будете правильно использовать свойства блочной модели, ваш сайт будет выглядеть так
Веб-сайт, использующий свойства блочной модели
В этой статье мы поговорим о том, как использовать эти свойства:
Как использовать свойства блочной модели CSS
Давайте посмотрим на несколько примеров, где мы можем использовать свойства блочной модели CSS. Мы собираемся проанализировать сайт, показанный выше.
Давайте внимательнее посмотрим на навигационную панель (navbar). Вы можете заметить разницу между примером, в котором используется свойство padding, и примером, в котором его нет:
Элементы навигационной панели, использующие свойство padding
Раздел содержимого, использующий свойство padding
Структура блочной модели CSS
Говоря о блочной модели, стоит воспринимать её как луковицу. И эта «луковица» имеет 4 слоя:
1 слой: Content
2 слой: Padding
3 слой: Border
4 слой: Margin
1 слой блочной модели: Content
В HTML все ведет себя как ящик с контентом. Давайте вставим контент с изображением котенка.
Первый слой
2 слой блочной модели: Padding
Второй слой
3 слой блочной модели: Border
4 слой блочной модели: Margin
Следующим и последним слоем блочной модели CSS является слой полей. Он обертывает наш контент + отступ + границу следующим образом
Четвёртый слой
Итак, давайте посмотрим, как эти свойства работают в проекте.
Как настроить проект
Это руководство подходит для всех, в том числе для новичков. Если вы хотите писать код, выполните следующие действия.
Откройте VS Code или Codepen.io и напишите этот код внутри тега body:
Очистите стили нашего браузера по умолчанию
Теперь давайте стилизуем наш блок
Все готово, приступим к программированию!
Свойство Padding
Но сначала давайте обсудим практическое использование свойства padding. Затем мы увидим, как использовать это свойство.
Обычно я использую отступы, чтобы оставить пространство между содержимым. Посмотрите на эту навигационную панель
Элементы навигационной панели, использующие свойство padding
раздел содержимого с использованием свойства заполнения
Как использовать свойство padding в CSS
Ниже представлены названия четырех свойств заполнения:
Свойства padding
Второй слой
Чтобы воссоздать результаты, указанные выше, напишите этот код в свой CSS:
Откроем консоль разработчика и перейдем в вычисляемый раздел:
Давайте попробуем добавить отступ только к одной стороне нашего контента (только с правой стороны):
свойство padding-right
Чтобы воссоздать результаты, указанные выше, напишите этот код в свой CSS:
Теперь откройте вычисляемый раздел в консоли разработчика
Свойство Border
Обычно вы будете использовать свойство border при создании кнопок. Вот демонстрация GIF
Кнопки, использующие свойство Border
Обратите внимание, как появляется белая рамка вокруг кнопки, когда наводится указатель мыши на кнопку.
Как использовать свойство границы в CSS
Есть три важных параметра свойства границы:
border style: solid (сплошная линия) / dotted («точечная» линия) / dashed (пунктир)
Синтаксис свойства границы
Как я перечислил выше, существует три стиля свойства границы. В этом примере мы будем использовать пунктирный стиль:
Чтобы воссоздать приведенные выше результаты, напишите этот код в своем CSS:
Откроем консоль и посмотрим расчеты блочной модели:
Свойство Margin
Обычно я использую свойство margin, чтобы добавить отступ между моим контентом и экраном на макете рабочего стола. Посмотрите на эту гифку:
Добавление отступов на сайт
Обратите внимание, что я добавил поля к левому и правому краям веб-сайта выше
Вот еще один пример использования свойства margin:
Добавление отступов на сайт
Как использовать свойство margin в CSS
Margin имеет всего четыре свойства поля:
Свойства margin
Давайте добавим отступ к нашему контенту. Весь наш набор смещается из-за margin, как в этом GIF:
Смещение
Чтобы воссоздать приведенные выше результаты, напишите этот код в своем CSS:
Можем еще раз проверить расчеты:
Давайте попробуем добавить поле только к одной стороне нашего контента (только левой стороне):
Свойство margin-left
Чтобы воссоздать результаты выше, напишите этот код в своем CSS
На консоли мы видим, что поле в 50 пикселей применено только к левой стороне
Свойство box-sizing
Это свойство определяет, как будут рассчитываться поля, отступы и границы. Есть три типа вычислений (можно называть их свойствами):
Примечание:
Мы не будем обсуждать padding-box, поскольку его поддерживает только Firefox, и он используется не очень часто.
В чем разница между content-box и border-box в CSS?
И border-box, и content-box работают одинаково. Посмотрите на эти изображения:
Блоки, использующие свойство border-box Блоки, использующие свойство content-box
Итак, в чем здесь главное отличие? Разница заметна, когда мы добавляем поля, границу или отступы к нашим блокам.
Когда мы используем box-sizing: content-box, который является значением по умолчанию, он добавит поля, отступы и границы за пределами поля, например:
Заполнение применяется стандартно
Вы также можете увидеть расчеты здесь:
Расчеты с content-box
Это означает, что все может выйти из-под контроля, и вы можете получить неожиданный результат. Это означает, что при таком подходе, будет сложно создавать адаптивные веб-сайты. Вместо этого всегда используйте свойство box-sizing: border-box.
Но когда мы используем свойство box-sizing: border-box, оно добавит поля, отступы и границы вовнутрь блока, например:
Применение вовнутрь блока
Заключение
Вот собственно и всё. Для желающих оставлю ссылку на видео-инструкцию к данному уроку от автора (Джоя Шахеба):
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.
Box Sizing
Grow sales with a smart marketing platform. Try Mailchimp today.
The box-sizing property can make building CSS layouts easier and a lot more intuitive. It’s such a boon for developers that here at CSS-Tricks we observe International Box-Sizing Awareness Day in February.
But, how is it so helpful and beloved that it deserves its own internet holiday? Time for a little bit of CSS history.
Since the dawn of CSS, the box model has worked like this by default:
width + padding + border = actual visible/rendered width of an element’s box
height + padding + border = actual visible/rendered height of an element’s box
This can be a little counter-intuitive, since the width and height you set for an element both go out the window as soon as you start adding padding and borders to the element.
Back in the old days of web design, early versions of Internet Explorer ( 
The box at the top shows the default box model. The box at the bottom shows what was once the “quirks mode” interpretation of the box model.
Some people preferred this “quirky” interpretation of the box model and considered it more intuitive. It’s a valid point. Having the actual visible width of a box turn out differently from what you declared in the CSS is a bit mind bending.
But, in the days of fixed-width design, it wasn’t particularly complicated to work with the default box model once you understood it. You could do a bit of arithmetic to figure out how many pixels you needed to trim off of an element’s declared width or height to accommodate its padding and border. The problem for present-day developers is that those absolute pixel lengths don’t translate to responsive design, so the same math doesn’t apply anymore.
As responsive design (or, as it was once known, “fluid” or “liquid” layout) started to gain popularity, developers and designers wished for an update to the box model. The great designer Jon Hicks, known for his excellent fluid width designs, had this to say on the subject in the CSS Wishlist we put together in 2008:
I would love a different box model! I find it bizarre that padding and border add the width of an object, and would love to be able to give something like a textarea 100% width and 3px padding without worrying what it’s going to do the layout. Perhaps something like padding-inside as a new selector?
In that vein I also wish I could specify a 100% width for an element, minus a set fixed width. Again, very useful when creating fluid designs with form elements!
At this point you may be asking yourself, “Is it possible that Old IE did something right?” Plenty of people think so.
This demo shows how border-box can help make responsive layouts more manageable. The parent div ‘s width is 50%, and it has 3 children with different widths, padding, and margins. Click the border-box button to get all the children in the right place inside the parent.
Good, Better, and (Probably) Best box-sizing Reset Methods
The “Old” border-box Reset
The earliest box-sizing: border-box; reset looked like this:
This works fairly well, but it leaves out pseudo elements, which can lead to some unexpected results. A revised reset that covers pseudo elements quickly emerged:
Universal Box Sizing
Universal Box Sizing with Inheritance
This reset gives you more flexibility than its predecessors — you can use content-box or padding-box (where supported) at will, without worrying about a universal selector overriding your CSS. We went into more depth on this technique and the reasoning behind it in “Inheriting box-sizing Probably Slightly Better Best Practice”. One potential gripe with it is that box-sizing isn’t normally inherited, so it’s specialized behavior, not quite the same as something you’d normally put in a reset.
box-sizing: border-box; is supported in the current versions of all major browsers. The less-commonly used padding-box is only supported in Firefox at the moment. There’s more comprehensive information about browser support in our box-sizing almanac entry.
There are a few issues with older versions of Internet Explorer (8 and older). IE 8 doesn’t recognize border-box on elements with min/max-width or min/max-height (this used to affect Firefox too, but it was fixed in 2012). IE 7 and below do not recognize box-sizing at all, but there’s a polyfill that can help.
Box-sizing: переключаем блочную модель
Как известно, в IE6 размеры блока считаются не так как в остальных баузерах и включают в себя не только контентную часть элемента, но и внутренние отступы с границами (см. статью Блочная модель в IE6). Но иногда такой подсчет будет весьма кстати!
Задача
Сделать, чтобы блок растягивался на 50% ширины родителя и при этом имел внутренние отступы padding и границу border.
Решение 1. Стандартное — обертка.
Добавляем дополнительный контейнер-обертку. Задаем ему ширину 50% родителя. Самому блоку задаем внутренние отступы и границы (не задавая ширину). Таким образом внутренний блок займет все доступное пространство обертки без учета внутренних отступов и границ. При изменении размеров внутренних отступов и границ, размер внешнего блока меняться не будет.
Главный недостаток метода — дополнительный контейнер.
Решение 2. Для блока с абсолютным позиционированием.
Для блоков с position: absolute можно использовать прием описанный в статье Два в одном: позиция + размеры. Код будет таким:
Преимущество — обошлись без контейнера.
Недостки — способ работает только для блоков спозиционированных абсолютно, используется expression.
Решение 3. Прогрессивное.
Как ты, конечно, догадался, речь идет о CSS3. А точнее, о CSS3 свойстве box-sizing. Это свойство позволяет переключаться между разными блочными моделями.
Это свойство по умолчанию имеет значение content-box и размеры элемента не включают внутренние отступы и границы (такая блочная модель по умолчанию принята во всех современных браузерах кроме IE6). При изменении значения на border-box размеры блока рассчитываются так как в IE6, т.е. содержат в себе внутренние отступы и границы элемента.
Теперь, чтобы добиться требуемого эффекта, для элемента нужно написать всего одну строчку:
Итого для нашего блока получим:
IE6 свойство box-sizing, естественно, не поймет, но в нашем случае это и не нужно! Ведь в режиме Quirks Mode у него размеры элемента по умолчанию включают отcупы и границы.
Для IE7 (и IE6 в режиме Almost Standards Mode) все-таки придется использовать костыль — например, такой expression:
В боевых условиях expression выносим в отдельный css файл, подключаемый с помощью условных комментариев.
Выводы
Если тебя не пугает expression для IE7, можно использовать box-sizing для решения подобных задач. Это позволит избавится от лишнего контейнера в HTML файле. Хотя, конечно, для резиновых сайтов использование такого expression вариант неудачный — оптимизированный expression сработает только один раз при загрузке докуманта, а неоптимизированный может порядочно тормозить.
