6.1 Основные возможности функции calc()
Функция calc() предоставляет возможность выполнения математических операций в CSS, что позволяет создавать более гибкие и адаптивные стили. Эта функция особенно полезна для комбинирования различных единиц измерения и динамического вычисления значений, таких как размеры, отступы, границы и другие свойства.
Функция calc() позволяет выполнять четыре основные математические операции: сложение, вычитание, умножение и деление. Эти операции можно использовать для комбинирования различных единиц измерения (пиксели, проценты, em, rem и т. д.), что упрощает создание адаптивных и динамических стилей.
Синтаксис:
селектор {
свойство: calc(выражение);
}
Примеры операций
- Сложение:
calc(100% + 20px) - Вычитание:
calc(50% - 10px) - Умножение:
calc(10px * 2) - Деление:
calc(100px / 2)
Пример:
<div>
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
div {
width: calc(100% - 50px);
margin: calc(1em + 10px);
background: lightblue;
}
В этом примере:
- Ширина элемента вычисляется как
100%минус50px - Отступ вычисляется как сумма
1emи10px
6.2 Примеры использования функции calc()
1. Сложение и вычитание
Функция calc() часто используется для сложения и вычитания значений, что позволяет более точно контролировать размеры и отступы элементов.
Пример 1: Сложение процентов и пикселей
В этом примере ширина контейнера рассчитывается как 100% ширины родительского элемента минус 40 пикселей. Это позволяет учитывать отступы и другие элементы внутри контейнера:
<div class="container">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
.container {
width: calc(100% - 40px);
margin: 20px;
background: lightgreen;
}
Пример 2: Вычитание фиксированного значения
В этом примере ширина боковой панели рассчитывается как 100% ширины родительского элемента минус 250 пикселей, что позволяет оставить место для основного контента:
<div class="sidebar">
<ul>
<li><a href="#"></a>Article 1</li>
<li><a href="#"></a>Article 2</li>
<li><a href="#"></a>Article 3</li>
</ul>
</div>
.sidebar {
width: calc(100% - 250px);
background: tomato;
}
2. Умножение и деление
Функция calc() также позволяет выполнять умножение и деление, что может быть полезно для создания пропорциональных размеров и отступов.
Пример 3: Умножение
В этом примере высота элемента рассчитывается как 20 пикселей, умноженные на 3, что дает 60 пикселей:
<div class="element">Element</div>
.element {
height: calc(20px * 3);
background: lightpink;
}
Пример 4: Деление
В этом примере ширина блока рассчитывается как одна треть ширины родительского элемента, что позволяет создать три равных столбца:
<div class="box">
Box
</div>
.box {
width: calc(100% / 3);
background: yellow;
}
6.3 Комбинирование различных единиц измерения
Одна из ключевых возможностей функции calc() — это комбинирование различных единиц измерения, что позволяет создавать адаптивные и гибкие стили.
Пример 5: Комбинирование процентов и пикселей
В этом примере высота заголовка рассчитывается как 100% высоты окна просмотра (viewport height) минус 50 пикселей, что позволяет учитывать фиксированный отступ.
<header class="header">
<nav>
<ul>
<li>Главная</li>
<li>О Нас</li>
<li>Контакты</li>
</ul>
</nav>
</header>
.header {
height: calc(100vh - 100px);
background: lightgreen;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-around;
padding: 10px;
}
Динамическое вычисление размеров
Функция calc() полезна для создания динамически вычисляемых размеров элементов, что делает дизайн более адаптивным и гибким.
Пример 6: Динамическое вычисление ширины
В этом примере ширина контента рассчитывается как 100% ширины родительского элемента минус двойной отступ по 20 пикселей с каждой стороны:
<div class="content">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
.content {
width: calc(100% - 2 * 20px);
background: lightgreen;
}
6.4 Использование calc() в медиазапросах
Функция calc() может использоваться внутри медиа-запросов для создания адаптивных стилей.
Пример 7: Адаптивные отступы в медиазапросах
В этом примере отступы контейнера увеличиваются с учетом ширины окна просмотра при достижении минимальной ширины 600 пикселей:
<div class="container">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
.container {
padding: 10px;
background: tomato;
}
@media (min-width: 600px) {
.container {
padding: calc(10px + 2vw);
}
}
Пример 8: Адаптивные размеры в медиа-запросах
В этом примере отступы контейнера уменьшаются в два раза на экранах шириной до 600 пикселей, что улучшает адаптивность дизайна:
<div class="container">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
:root {
--main-padding: 20px;
}
.container {
padding: var(--main-padding);
background: yellow;
}
@media (max-width: 600px) {
.container {
padding: calc(var(--main-padding) / 2);
}
}
6.5 Плюсы и минусы
Преимущества использования функции calc():
1. Гибкость. Функция calc() позволяет создавать более гибкие и адаптивные дизайны, комбинируя различные единицы измерения и выполняя математические операции.
2. Динамическое управление стилями. С помощью calc() можно динамически изменять размеры и отступы элементов, что делает дизайн более отзывчивым и адаптивным.
3. Упрощение сложных вычислений. Функция calc() упрощает выполнение сложных вычислений прямо в CSS, что позволяет избежать необходимости использования JavaScript для простых математических операций.
Ограничения и особенности функции calc():
1. Пробелы вокруг операторов. В выражениях calc() обязательно должны быть пробелы вокруг операторов. Например, calc(100% - 50px) правильно, а calc(100%-50px) приведет к ошибке.
2. Совместимость браузеров. Функция calc() поддерживается большинством современных браузеров, но для устаревших версий может потребоваться проверка совместимости.
3. Производительность. Использование функции calc() может немного увеличивать время рендеринга страницы, особенно при сложных вычислениях или частых изменениях значений.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ