Создание красивого макета CSS начинается с назначения размеров всем элементам, размещаемым в веб-приложении. Одной из наиболее востребованных функций всегда была возможность указывать размеры, используя сочетание единиц измерения. Например, было бы неплохо иметь возможность зарезервировать 50% площади плюс фиксированный объем пространства, скажем, 10 пикселей. Что ж, вы можете сделать это прямо сейчас, используя свойство calc() . Вы можете использовать эту функцию везде, где используется длина или число, поэтому вы можете использовать ее для позиционирования объектов, а также в значениях цвета rgb() , поэтому у нее есть множество полезных применений в таблице стилей.
Что вы можете сделать с помощью Calc()?
Свойство calc() можно использовать везде, где в таблице стилей есть длина или число CSS.
Он дает вам две основные функции, позволяющие сделать макет более гибким:
- Смешение процентов и абсолютных значений.
- Смешивание калибровочных единиц.
Смешение процентов с абсолютными единицами
Давайте посмотрим на пример смешивания процентов с абсолютными единицами. Скажем, мы хотели бы выделить 50 % доступной области за вычетом фиксированного количества пикселей, тогда мы могли бы написать это так:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
Если бы у него был зеленый цвет фона, это выглядело бы так:
и если вы уменьшите родительский размер, это будет выглядеть так:
Приятно то, что мы всегда знаем, что правый край контента будет находиться на 100 пикселей влево от середины содержащей области. Возможность комбинировать различные типы значений таким образом позволяет вашему веб-приложению обрабатывать макет на устройствах разного размера с гораздо большим контролем, чем раньше.
Смесительные агрегаты
Еще одна замечательная вещь — возможность комбинировать единицы измерения разных размеров для получения итогового размера. Например, вы можете установить размеры относительно текущего размера шрифта, смешав единицы измерения «em» и «px».
#bar {
height: calc(10em + 3px);
}
Вы можете найти несколько замечательных примеров объединения значений здесь и здесь .
Попробуйте это
С помощью calc() вы можете использовать +, -, * и / для сложения, вычитания, умножения и деления значений, предоставляя всевозможные возможности. Вы можете использовать calc() везде, где можно использовать длину или число CSS. В ближайшее время мы также работаем над добавлением calc() для свойств угла и частоты. Свойство calc() для длин теперь доступно в Chrome 19 (сборка канала разработки) с использованием свойства -webkit-calc , в Firefox, начиная с версии 8, с использованием свойства -moz-calc и в Internet Explorer, начиная с версии 9, без префикса. Дайте нам знать, что вы думаете, оставив комментарий ниже.