Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | ||||
8.0 + | 4.0 + | 10.0 + | 7.0 + | 3.1 + | 5.0 + | 1.0 + | 2.1 + | 4.0 + | 3.2 + | 5.0 + |
Коротка інформація
Значення за умовчанням | content-box |
---|---|
Успадковується | Ні |
Застосовується | До всіх елементів |
Відсотковий запис | незастосовні |
Посилання на специфікацію | http://www.w3.org/TR/css3-ui/#box-sizing |
Версії CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Опис
Застосовується для зміни алгоритму розрахунку ширини і висоти елемента.
Згідно зі специфікацією 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
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> box-sizing </title> <style> .box1 { background: #f0f0f0; /* Колір фону */ width: 300px; /* Ширина блоку */ padding: 10px; /* Поля */ border: 2px solid #000; /* Параметри рамки */ } .box2 { background: #fc0; /* Колір фону */ width: 300px; /* Ширина блоку */ padding: 10px; /* Поля */ margin-top: 10px; /* Відступ зверху */ border: 2px solid #000; /* Параметри рамки */ -moz-box-sizing: border-box; /* Для Firefox */ box-sizing: border-box; /* Ширина блоку з полями */ } </style> </head> <body> <div class="box1"> Ширина з урахуванням значення властивості width, полів і меж. </div> <div class="box2"> Ширина дорівнює значенню властивості width. </div> </body> </html>
В даному прикладі ширина першого шару буде дорівнює 324 пікселя, оскільки вона складається з значення ширини контенту ( width ), полів зліва і справа ( padding ) і товщини меж ( border ). Ширина другого шару дорівнює 300 пікселів за рахунок застосування властивості box-sizing . Результат прикладу показаний на рис. 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 .