Webkit css box sizing border box

box-sizing

Применяется для изменения алгоритма расчета ширины и высоты элемента.

Согласно спецификации CSS ширина блока складывается из ширины контента ( width ), значений отступов ( margin ), полей ( padding ) и границ ( border ). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

Синтаксис

box-sizing: content-box | border-box | padding-box | inherit

Значения

content-box Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ. border-box Свойства width и height включают в себя значения полей и границ, но не отступов ( margin ). Эта модель используется браузером Internet Exporer в режиме несовместимости. padding-box Свойства width и height включают в себя значения полей, но не отступов ( margin ) и границ ( border ). inherit Наследует значение родителя.

HTML5 CSS3 IE Cr Op Sa Fx

В данном примере ширина первого слоя будет равна 324 пиксела, поскольку она складывается из значения ширины контента ( width ), полей слева и справа ( padding ) и толщины границ ( border ). Ширина второго слоя равняется 300 пикселов за счет применения свойства box-sizing . Результат примера в браузере Opera показан на рис. 1.

Браузеры

Firefox поддерживает нестандартное свойство -moz-box-sizing .

Safari до версии 5.0, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0 поддерживают нестандартное свойство -webkit-box-sizing .

Internet Explorer, Chrome, Opera и Safari не поддерживают значение padding-box .

Источник

CSS3: свойство Box-Sizing

Раньше, если мы делали div шириной и высотой 100px, добавляли padding 10px и border 10px, то получался квадрат не 100х100, а 140х140 px:

Но иногда требуется, чтобы div был фиксированной ширины при любых значениях padding и border. В CSS3 нам поможет свойство box-sizing.

Использование box-sizing

• content-box — по умолчанию, контент внутри div’а будет отображаться по-старому, т.е. как в примере выше: вместо 100х100 будет 140х140
• border-box позволяет значения padding и border вычитать из ширины и длины блока, т.е. в нашем примере div останется с фиксированными параметрами, но для контента останется 60х60 px

Поддержка браузерами

Свойство box-sizing поддерживает большинство современных браузеров: Firefox 3.6+, Safari 3+, Opera 8.5+ и Internet Explorer 8+. Актуальные данные можно посмотреть на сайте caniuse.com.

Практический пример

Рассмотрим реальный пример использования свойства box-sizing. Есть меню из пяти пунктов:

Добавим немного CSS, в т.ч. фиксированную ширину меню в 500 px и ширину каждого элемента в 100 px:

nav < width: 500px; margin: 50px auto 0; height: 50px; >nav ul < padding: 0; margin: 0; >nav li < float: left; >nav a < display: inline-block; width: 100px; height: 100%; background-color: #ccc; color: #555; text-decoration: none; font-family: Arial, sans-serif; font-size: 12pt; line-height: 300%; text-align: center; >nav a < display: inline-block; width: 100px; height: 100%; color: #555; text-decoration: none; font-family: Arial, sans-serif; >nav li:nth-child(1) a < background-color: #E9E9E9; border-left: 0; >nav li:nth-child(2) a < background-color: #E4E4E4; >nav li:nth-child(3) a < background-color: #DFDFDF; >nav li:nth-child(4) a < background-color: #D9D9D9; >nav li:nth-child(5) a

Но при добавлении левого или правого border’а последний пункт меню съезжает, потому что не помещается:

Но если использовать box-sizing, то этой проблемы нет:

Источник

box-sizing

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

Интерактивный пример

По умолчанию в блоковой модели CSS ширина и высота, которую вы задаёте элементу применяется только для контента элемента. Если у элемента есть граница или внутренний отступ, то они добавляются к ширине и высоте, чтобы получить отображаемый на экране размер. Это значит, что когда вы выставляете ширину и высоту, вам придётся изменять значение, при добавлении границ и отступов. Например, если у вас есть четыре блока с width: 25%; , и у какого-нибудь из них есть граница или внутренний отступ слева или справа, то по умолчанию они не поместятся на одной строке.

Свойство box-sizing может изменять это поведение:

• content-box даёт стандартное поведение свойства box-sizing. Если вы выставите элементу ширину 100 пикселей, то ширина его контента будет 100 пикселей, а ширина границ и внутренних отступов при рендере будет добавлена к финальной ширине, делая элемент шире ста пикселей.
• border-box говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые вы указываете в ширине и высоте элемента. Если вы выставите элементу ширину 100 пикселей, то эти 100 пикселей будут включать в себя границы и внутренние отступы, а контент сожмётся, чтобы выделить для них место. Обычно это упрощает работу с размерами элементов.

**Примечание:**Часто выставление box-sizing: border-box полезно для размещения элементов. Оно сильно упрощает работу с размерами элементов, и как правило устраняет ряд подводных камней, на которые вы можете наткнуться, размещая контент. С другой стороны, используя position-relative или position: absolute , box-sizing: content-box позволяет позиционным значениям быть зависимыми только от контента, а не от границ и отступов, что иногда желательно.

Синтаксис

Для свойства box-sizing устанавливается единственное ключевое слово из списка значений ниже.

Значения

Это значение по умолчанию, определённое в CSS стандарте. Свойства width и height включают исключительно контент, и не включают padding и border. Например .box будет иметь ширину 370 пикселей.Размеры элемента рассчитываются следующим образом: width = ширина контента, и height = высота контента. (Границы и внутренние отступы не включаются в вычисление.)

Свойства width и height включают контент, внутренний отступ и границы, но не включают внешний отступ. Заметьте, что внутренний отступ и граница будут внутри блока. Например, .box будет иметь общую ширину 350 пикселей, а ширина контента составит 330 пикселей. Размер контента не может быть отрицательным, минимальное значение — 0, поэтому border-box невозможно использовать для скрытия элемента.Размеры элемента рассчитываются следующим образом: width = граница + внутренний отступ + ширина контента, и height = граница + внутренний отступ + высота контента.

Формальный синтаксис

Примечание: Значение padding-box устарело

Пример

Этот пример показывает как разные значения box-sizing изменяют видимый размер двух идентичных элементов.

HTML

div class="content-box">Content boxdiv> br> div class="border-box">Border boxdiv> 

CSS

div  width: 160px; height: 80px; padding: 20px; border: 8px solid red; background: yellow; > .content-box  box-sizing: content-box; /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px Total height: 80px + (2 * 20px) + (2 * 8px) = 136px Content box width: 160px Content box height: 80px */ > .border-box  box-sizing: border-box; /* Total width: 160px Total height: 80px Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */ > 

Результат

Спецификации

Начальное значение	content-box
Применяется к	все элементы, которые могут иметь ширину и высоту
Наследуется	нет
Обработка значения	как указано
Animation type	discrete

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 10 окт. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

box-sizing

Применяется для изменения алгоритма расчета ширины и высоты элемента.

Согласно спецификации CSS ширина блока складывается из ширины контента ( width ), значений отступов ( margin ), полей ( padding ) и границ ( border ). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

Синтаксис

box-sizing: content-box | border-box | padding-box | inherit

Значения

content-box Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ. border-box Свойства width и height включают в себя значения полей и границ, но не отступов ( margin ). Эта модель используется браузером Internet Exporer в режиме несовместимости. padding-box Свойства width и height включают в себя значения полей, но не отступов ( margin ) и границ ( border ). inherit Наследует значение родителя.

HTML5 CSS3 IE Cr Op Sa Fx

В данном примере ширина первого слоя будет равна 324 пиксела, поскольку она складывается из значения ширины контента ( width ), полей слева и справа ( padding ) и толщины границ ( border ). Ширина второго слоя равняется 300 пикселов за счет применения свойства box-sizing . Результат примера в браузере Opera показан на рис. 1.

Браузеры

Firefox поддерживает нестандартное свойство -moz-box-sizing .

Safari до версии 5.0, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0 поддерживают нестандартное свойство -webkit-box-sizing .

Internet Explorer, Chrome, Opera и Safari не поддерживают значение padding-box .

Источник

Блоки

В CSS блочная модель описывает прямоугольные блоки, которые образуются для элементов, размещённых на странице.

По сути, всё это является прямоугольником.

Некоторые интересные факты:

• border-radius скругляет внешние уголки этого блока;
• box-shadow добавляет тень к этому блоку;
• outline и box-shadow не являются частью блока и, соответственно, не влияют на макет.

Размеры блока

Свойство box-sizing позволяет вам немного управлять моделью, применяемой для задания размеров блоков. Два возможных значения — это content-box и border-box .

content-box

По умолчанию. При вычислении размера блока добавляются padding и border .

border-box

При вычислении размера блока padding и border не учитываются.

Пример

Оба блока содержат одинаковый CSS, но у одного значение box-sizing установлено как content-box , а другого — border-box .

Вид блоков с разным значением box-sizing показан ниже.

В случае border-box ширина и высота .box равны 5em, именно то, что мы задали. В случае content-box ширина и высота равны 7.5em = 5+(2*1)+(2*.25) , поскольку мы добавляем padding и border с каждой стороны.

Эластичные поля ввода

Одним из преимуществ применения border-box — это возможность установить отступы и ширину в разных единицах, без крайних случаев. Одним из фантастических примеров использования этого является создание эластичных полей ввода с фиксированным padding .

В приведённом ниже примере, у input задан определённый padding в единицах em и при этом мы ещё можем указать ширину в процентах ( padding: .4em .55em и width: 100% , соответственно).

Настройте ширину блока и следите за размерами самого поля, который прекрасно располагается внутри блока, сохраняя фиксированный padding .

Резюмирую

Если вы хотите получить высоту и ширину, которая ведёт себя интуитивно понятным образом, послушайте Пола Ириша и вставьте это в верхнюю часть своего CSS:

Дальнейшее чтение

Источник