CSS функция calc()
Вы можете проводить вычисления, чтобы задавать CSS свойства, которые в качестве значений используют размер, угол, время, число.
Firefox до 16й версии поддерживает -moz-calc
Chrome до 26й версии поддерживает -webkit-calc
Safari 6.0+ поддерживает -webkit-calc
Эта функция позволяет задавать значения, основанные на сложении или вычитании разных единиц измерений, к примеру, можно задать 100% - 60px
. Если требуемое значение не может быть вычислено, то оно будет проигнорировано.
Правила написания функции calc()
Свойство: calc(<выражение>)
Здесь выражение - это комбинация значений размеров и математических знаков:
+
— сложение (width: calc(120px + 50px));
-
— вычитание (padding: calc(40% - 50px););
*
— умножение (height: calc(20%*2);)
/
— деление (width: calc(100%/3);).
Знаки плюс и минус должны отделяться пробелами с двух сторон. Знаки умножение и деление не требуют отделения пробелами, но это не запрещено и даже приветствуется.
И помните, на ноль делить запрещено!
Пример применения CSS функции calc()
Пересчитаем длину блока div, уменьшив ее на 70px:
<!-- HTML -->
<div class="banner">Вот это баннер!</div>
/* CSS */
.banner {
margin-left: 35px;
width: calc(100% - 70px);
border: solid #000000 1px;
box-shadow: 1px 2px;
background-color: #ffff00;
padding: 6px;
text-align: center;
}