Всем привет! Сегодня поговорим про функцию calc() , которая появилась в CSS3 .
Всем привет! Сегодня поговорим про функцию calc(), которая появилась в CSS3.
Стоит сразу сказать, что поддерживается данная функция с IE9.
Используется функция calc(), как понятно из ее названия, для вычислений.
Синтаксис данной функции такой:
property: calc(expression);
В выражении вы можете использовать любые элементарные математические операторы
- + - сложение
- - - вычитание
- * - умножение
- / - деление
Рассмотрим конкретный пример
<div class="alert">This is an alert! Be accurate!</div>
Теперь добавим немного стилей
.alert {
width: 100%;
width: calc(100% - 100px);
margin: 0 auto;
background: tomato;
color: #fff;
padding: 20px;
box-sizing: border-box;
}
Таким образом мы получим блок, который выравнен по центру, а по его бокам будет по 50px отступов, но, главное, что все это дело будет вычисляться автоматически в зависимости от ширины браузера. Попробуйте поизменять размер своего браузера, чтобы убедиться в этом.
А у меня на этом все! Спасибо за внимание и удачи!
