css властивість box-sizing
Властивість box-sizing дозволяє змінити алгоритм розрахунку розмірів блоку, щоб властивості width і height задавали розміри не контенту, а саме розміри блоку.
Без задання, коли ви вказуєте ширину блоку (width), браузер розраховує її без врахування меж (border) та внутрішніх відступів (padding), вказавши border-box у якості значення властивості box-sizing, браузер почне враховувати кордони та відступи у формуванні ширини та висоти блоку.
Типовий алгоритм за замовчуванням використовує content-box, а це означає, що будь-які розміри, які ви надаєте, використовуються лише для визначення розміру вікна вмісту - будь-які поля і межі виводяться за межами вікна вмісту. Тому, застосовуючи ширину 200 пікселів та поле 10 пікселів до елемента, елемент буде займати загальну ширину 220 пікселів (припускаючи, що повзунок додається до всіх чотирьох сторін або, принаймні, з лівого та правого боку). Це відбувається тому що підкладка додана до ширини вікна.
Ви можете використовувати значення border-box, щоб змінити це так, що будь-які поля та межі будуть включені в розміри висоти та ширини елемента. У цьому випадку елемент буде займати лише 200 пікселів, тому що заповнення додано до внутрішньої частини елемента.
Ця властивість особливо важлива для створення адаптивного дизайну.
| Нотатка: | Деякі фахівці рекомендують веб-розробникам застосовувати значення |
Синтаксис
box-sizing: content-box|border-box|initial|inherit;Властивість box-sizing може отримувати 4 значення:
content-boxГрунтується на стандартах CSS, при цьому властивості
widthіheightзадають ширину і висоту контенту і не включають в себе значення відступів, полів і кордонів.border-boxВластивості
widthіheightвключають в себе значення полів і кордонів, але не відступів (margin). Ця модель використовується браузером Internet Exporer в режимі сумісності.initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента
| Значення без задання: | content-box |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.boxSizing="border-box" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| box-sizing | 10.0 |
8.0 |
29.0 |
5.1 |
7.0 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| box-sizing | 2.1 |
29.0 |
5.1 |
Мобільних переглядачів ще не додано.
Приклади
Різні значення у дії
Використання властивості
Вказує, що елементи повинні мати заповнення і рамка включається в загальну ширину і висоту елемента
div {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}Визначає два блоки, які розташовуються пліч-о-пліч
div {
box-sizing: border-box;
width: 50%;
float: left;
}