CSS box-sizing — як рахується ширина елемента
Властивість box-sizing дозволяє змінити алгоритм розрахунку розмірів блоку, щоб властивості width і height задавали розміри не контенту, а саме розміри блоку.
Без задання, коли ви вказуєте ширину блоку (width), браузер розраховує її без врахування меж (border) та внутрішніх відступів (padding), вказавши border-box у якості значення властивості box-sizing, браузер почне враховувати кордони та відступи у формуванні ширини та висоти блоку.
Типовий алгоритм за замовчуванням використовує content-box, а це означає, що будь-які розміри, які ви надаєте, використовуються лише для визначення розміру вікна вмісту - будь-які поля і межі виводяться за межами вікна вмісту. Тому, застосовуючи ширину 200 пікселів та поле 10 пікселів до елемента, елемент буде займати загальну ширину 220 пікселів (припускаючи, що повзунок додається до всіх чотирьох сторін або, принаймні, з лівого та правого боку). Це відбувається тому що підкладка додана до ширини вікна.
Ви можете використовувати значення border-box, щоб змінити це так, що будь-які поля та межі будуть включені в розміри висоти та ширини елемента. У цьому випадку елемент буде займати лише 200 пікселів, тому що заповнення додано до внутрішньої частини елемента.
Ця властивість особливо важлива для створення адаптивного дизайну.
автор: NagarD
Загальний опис
автор: NagarD
- Нотатка
-
Деякі фахівці рекомендують веб-розробникам застосовувати значення
автор: NagarDborder-boxдля всіх елементів на сторінці.
Синтаксис
box-sizing: content-box|border-box|initial|inherit;Властивість box-sizing може отримувати 4 значень:
-
content-box -
Грунтується на стандартах CSS, при цьому властивості
автор: NagarDwidthіheightзадають ширину і висоту контенту і не включають в себе значення відступів, полів і кордонів. -
border-box -
Властивості
автор: NagarDwidthіheightвключають в себе значення полів і кордонів, але не відступів (margin). Ця модель використовується браузером Internet Exporer в режимі сумісності. -
initial -
Встановлює властивість у значення без задання
автор: NagarD -
inherit -
Вказує на спадковість властивості від свого батьківського елемента
автор: NagarD
| Значення без задання: | content-box |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.boxSizing="border-box" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 10 | 29 | 5.1 | 7 | 12 | 8 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4 | 18 | 29 | 6 |
Приклади
+ запропонувати свій приклад у пісочниці
Обом блокам задано width: 300px, однакові рамки й відступи. З content-box (типово) 300px — це лише вміст, тож блок реально ширший; з border-box у 300px входить усе.
HTML
<div class="cb">content-box: 300px — тільки вміст, рамки додаються зверху</div>
<div class="bb">border-box: 300px разом із рамками й відступами</div>CSS
div {
width: 300px;
padding: 20px;
border: 10px solid #0172ad;
margin-bottom: 8px;
background: #eef6ff;
}
.cb { box-sizing: content-box; }
.bb { box-sizing: border-box; }Дві колонки по 50% з рамками і відступами стоять пліч-о-пліч: завдяки border-box рамки не додаються до ширини, інакше 50% + рамки перевищили б 100% і друга колонка з'їхала б униз.
HTML
<div class="col">ліва колонка 50%</div>
<div class="col">права колонка 50%</div>CSS
.col {
box-sizing: border-box;
width: 50%;
float: left;
padding: 12px;
border: 2px solid #0172ad;
background: #eef6ff;
}Використання властивості
HTML
<div id="content-box">
<p>
<h3>box-sizing: content-box;</h3>
<h4> Цей контейнер має розмір 400px. Ширину + 40px. padding + 20px = 480px.</h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
<div id="border-box">
<p>
<h3>box-sizing: border-box;</h3>
<h4>Цей контейнер має розмір 400px.</h4> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>CSS
div {
transition:;
}
#content-box{
width:400px;
background:#ccc;
padding:20px;
border:10px solid black;
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
float:left;
margin-right: 20px;
}
#border-box {
width:400px;
background:#ccc;
padding:20px;
border:10px solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
float:left;
}Різні значення у дії
HTML
<div class="field-items">
<div class="field-item even">
<div id="playground-result">
<div id="playground-property" style="padding: 20px; border: 3px solid red; width: 200px; box-sizing: content-box">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus omnis ut eveniet dolorem ratione, mollitia expedita porro provident? Officia, blanditiis. Aliquam aut saepe obcaecati ullam quas totam placeat molestias consectetur!</div>
</div>
<div class="grid-x grid-margin-x">
<p>Вибери потрібне значення для властивості <b>box-sizing</b>:</p>
<div id="playground-value" class="cell medium-12 large-6">
<label><input type="radio" name="value" value="content-box" checked="">content-box</label>
<label><input type="radio" name="value" value="border-box">border-box</label></div>
<div id="playground-code" class="cell medium-12 large-6">
<pre>div {
width: 400px;
padding: 20px;
border: 3px dashed #c26558;
box-sizing: <span id="playground-code-value">content-box</span>;
}<div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></pre>
</div>
</div>
</div>
</div>CSS
#playground-property{
margin-bottom: 20px;
font-size: 18px;
}
pre{
background: lightgrey;
font-weight: 700;
font-size: 17px;
}
p{
font-size: 18px;
}JS
var radios = document.querySelectorAll('#playground-value input[type="radio"]');
function changeHandler(event) {
document.getElementById('playground-property').style.boxSizing = this.value;document.getElementById('playground-code-value').innerText = this.value;
}
Array.prototype.forEach.call(radios, function (radio) {
radio.addEventListener('change', changeHandler);
});Два блоки з однаковими width: 200px, padding: 20px і border: 5px. Верхній рахується як content-box і фактично займає 250px, нижній із border-box — рівно 200px.
HTML
<div class="ruler">лінійка 200px</div>
<div class="box content">content-box</div>
<div class="box border">border-box</div>CSS
.ruler {
width: 200px;
background: #ffe9b0;
border-top: 2px solid #c08a00;
border-bottom: 2px solid #c08a00;
font: 13px sans-serif;
text-align: center;
margin-bottom: 10px;
}
.box {
width: 200px;
padding: 20px;
border: 5px solid #4a6fa5;
background: #e8eef7;
font: 14px sans-serif;
margin-bottom: 10px;
}
.content { box-sizing: content-box; }
.border { box-sizing: border-box; }Коментарі
Коментарів ще немає — будьте першим!