Здравствуйте, дорогие читатели! Сегодня поговорим о новом свойстве CSS3 - box-sizing .
Здравствуйте, дорогие читатели! Сегодня поговорим о новом свойстве CSS3 - box-sizing.
Это очень простое, но достаточно полезное свойство. Служит оно для того, чтобы менять поведение вычисления ширины и высоты блоков. К примеру, у нас есть блок с шириной и высотой 70px.
<div class="block"></div>
.block {
width: 70px;
height: 70px;
}
Теперь давайте добавим к нему немного внутренних отступов и рамку.
.block {
width: 70px;
height: 70px;
padding: 10px;
border: 1px solid green;
}
Что мы имеем теперь: блок у нас стал по ширине и высоте не 70px, как мы задали, а 92px.
Давайте теперь зададим наше новое свойство box-sizing со значением border-box.
.block {
width: 70px;
height: 70px;
padding: 10px;
border: 1px solid green;
box-sizing: border-box;
}
Теперь наш блок по ширине и высоте 70px. Но, если где-то прибывает, то где-то убывает, верно? Так и тут. Теперь для контента внутри блока останется меньше места, а именно 48px.
Свойство поддерживается всеми современными браузерами нормально, но IE поддерживает только с 8 версии.
Вот и все, что можно рассказать про это свойство. Спасибо за внимание и до следующей статьи!
