Властивість css3 - box-sizing.

Привіт, дорогі читачі! Сьогодні ми поговоримо про новий властивості CSS3 - box-sizing.

Це дуже просте, але досить корисна властивість. Служить воно для того, щоб змінювати поведінку обчислення ширини і висоти блоків. Наприклад, у нас є блок з шириною і висотою 70px.

Відео: Розуміння CSS: блочна модель елемента, властивості box-sizing і box-shadow

class="Block"gt;

.block { 
 width:70px- 
 height:70px- 
}

Тепер давайте додамо до нього трохи внутрішніх відступів і рамку.

.block { 
 width:70px- 
 height:70px- 
 padding:10px- 
 border:1px solid green- 
}

Що ми маємо тепер: блок у нас став по ширині і висоті не 70px, як ми задали, а 92px.

Відео: Learn Css3 in Arabic # 05 - Box Sizing

Давайте тепер поставимо наше нове властивість box-sizing зі значенням border-box.

.block { 
 width:70px- 
 height:70px- 
 padding:10px- 
 border:1px solid green- 
 box-sizing: border-box- 
}

Тепер наш блок по ширині і висоті 70px. Але, якщо десь прибуває, то десь убуває, вірно? Так і тут. Тепер для контенту всередині блоку залишиться менше місця, а саме 48px.

Властивість підтримується всіма сучасними браузерами нормально, але IE підтримує тільки з 8 версії.

Ось і все, що можна розповісти про цю властивість. Дякую за увагу і до наступної статті!

Поділися в соціальних мережах:

Схожі