Создание хорошего макета 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 (сборка канала Dev) с использованием свойства -webkit-calc , в Firefox с версии 8 с использованием свойства -moz-calc и в Internet Explorer с версии 9 без префикса. Дайте нам знать, что вы думаете, оставив комментарий ниже.