Хусусияти box-sizing
Хусусияти box-sizing иҷозат медиҳад, ки
усули ҳисоб кардани андозаҳои элементро тағйир диҳед.
Ба таври пешфарз илова кардани padding
элементро васеъ мекунад: агар мо паҳнӣ (width)-ро
width
100px ва padding-left
ба 20px муқаррар карда бошем, он гоҳ паҳнии воқеии элемент
120px хоҳад буд.
Ва агар мо border-left-ро ҳам
ба 10px муқаррар кунем, он гоҳ паҳнии воқеии элемент
130px хоҳад шуд. Яъне padding ва border
блокро васеъ мекунанд (ва аз рӯи паҳнӣ, ва аз рӯи баландӣ).
Ин рафторро бо ёрии box-sizing тағйир додан мумкин аст.
Синтаксис
интихобкунанда {
box-sizing: content-box | border-box;
}
Қиматҳо
| Қимат | Тавсиф |
|---|---|
content-box |
Padding ва border ҳарду блокро васеъ мекунанд.
|
border-box |
На padding ва на border блокро васеъ намекунанд. |
Қимати пешфарз: content-box.
Намуна . Рафтори стандартӣ
Ҳоло ҳарду блок баландӣ
ва паҳнии якхело доранд, аммо барои блоки дуюм padding
муқаррар шудааст, ва барои якум - не. Нигаред, ки чӣ гуна
андозаҳояшон фарқ мекунанд:
<div id="elem1">elem1</div>
<div id="elem2">elem2</div>
#elem1 {
width: 300px;
height: 100px;
margin-bottom: 10px;
background: #f1f1f1;
}
#elem2 {
padding: 50px;
width: 300px;
height: 100px;
background: #f1f1f1;
}
:
Намуна . Рафтори стандартӣ
Ҳоло ҳарду блок баландӣ
ва паҳнии якхело доранд, аммо барои блоки дуюм ҳудуд
ба 10px муқаррар шудааст, ва барои якум - не. Нигаред,
ки чӣ гуна андозаҳояшон фарқ мекунанд:
<div id="elem1">elem1</div>
<div id="elem2">elem2</div>
#elem1 {
width: 300px;
height: 100px;
background: #f1f1f1;
}
#elem2 {
border: 10px solid black;
width: 300px;
height: 100px;
background: #f1f1f1;
}
:
Намуна . Рафтори стандартӣ
Ҳоло блоки дуюм ҳам padding дорад, ва ҳам ҳудуд
ба 10px:
<div id="elem1">elem1</div>
<div id="elem2">elem2</div>
#elem1 {
width: 300px;
height: 100px;
background: #f1f1f1;
}
#elem2 {
padding: 50px;
border: 20px solid black;
width: 300px;
height: 100px;
background: #f1f1f1;
}
:
Намуна . Қимати border-box
Барои унсури дуюм қимати border-box-ро ба
хусусияти box-sizing илова мекунем. Ҳоло андозаҳои
ҳарду унсур яксон мешаванд:
<div id="elem1">elem1</div>
<div id="elem2">elem2</div>
#elem1 {
width: 300px;
height: 100px;
background: #f1f1f1;
}
#elem2 {
box-sizing: border-box;
padding: 50px;
border: 10px solid black;
width: 300px;
height: 100px;
background: #f1f1f1;
}
:
Нигаред низ
-
хусусияти
outline,
ки ҳудудеро месозад, ки элементро васеъ намекунад