Свойство 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 версии.
Вот и все, что можно рассказать про это свойство. Спасибо за внимание и до следующей статьи!
-
Создано 17.06.2014 20:15:35
-
Михаил Русаков
Комментарии (3):
Михаил, а где это свойство применяется на практике?
Ответить
Да много где. Главное знайте про него, а когда нужно будет, применяйте! Как пример, у нас есть горизонтальное меню на списках(думаю, вы знаете, как это делается с помощью float). Меню растянуто по ширине на максимум. И тут мы решили добавить к нему рамку(border справа или слева), а т.к. он тоже занимает места и наше меню теперь не помещается в ширину, то некоторые элементы начнут съезжать вниз и становиться вторым рядом. Вот, чтобы этого избежать, как пример, можно использовать это свойство. Но, естественно, не ради только этого оно было придумано)))
Ответить
Всё, понятно, спасибо большое за помощь!
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.