Категория > Справочник CSS > box-sizing
box-sizing21-03-2016, 17:12. Автор: Administrator |
||||||||||||||||||||||||||||||||||||||||
Краткая информация
Версии CSS
ОписаниеПрименяется для изменения алгоритма расчета ширины и высоты элемента. Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока. Синтаксисbox-sizing: content-box | border-box | padding-box | inherit Значения
Пример HTML5CSS3IECrOpSaFx
В данном примере ширина первого слоя будет равна 324 пиксела, поскольку она складывается из значения ширины контента (width), полей слева и справа (padding) и толщины границ (border). Ширина второго слоя равняется 300 пикселов за счет применения свойства box-sizing. Результат примера в браузере Opera показан на рис. 1.
Рис. 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. Перейти обратно к новости |