Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS CSS-фоны CSS границы CSS поля CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS CSS-текст CSS-шрифты CSS-иконки CSS-ссылки CSS-списки CSS-таблицы Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты CSS-тени Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

CSS Отзывчивый

Введение в задний привод Окно просмотра RWD Представление сетки RWD Медиа-запросы RWD Изображения RWD Видео с задним приводом Рамки RWD Шаблоны RWD

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

Справочник по CSS Селекторы CSS CSS-функции Справочник по CSS Безопасные веб-шрифты CSS CSS анимация Единицы CSS Конвертер CSS PX-EM Цвета CSS Значения цвета CSS Значения CSS по умолчанию Поддержка CSS-браузера

Математические функции CSS


Математические функции CSS позволяют использовать математические выражения в качестве значений свойств. Здесь мы объясним функции calc(), max()и min().


Функция calc()

Функция calc()выполняет вычисление, которое будет использоваться в качестве значения свойства.

Синтаксис CSS

calc(expression)
Value Description
expression Required. A mathematical expression. The result will be used as the value.
The following operators can be used: + - * /

Давайте посмотрим на пример:

Пример

Используйте calc() для вычисления ширины элемента <div>:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}


Функция max()

Функция max()использует наибольшее значение из списка значений, разделенных запятыми, в качестве значения свойства.

Синтаксис CSS

max(value1, value2, ...)
Value Description
value1, value2, ... Required. A list of comma-separated values - where the largest value is chosen

Давайте посмотрим на пример:

Пример

Используйте max(), чтобы установить ширину #div1 на самое большое значение, 50% или 300px:

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}



Функция мин()

Функция min()использует наименьшее значение из списка значений, разделенных запятыми, в качестве значения свойства.

Синтаксис CSS

min(value1, value2, ...)
Value Description
value1, value2, ... Required. A list of comma-separated values - where the smallest value is chosen

Давайте посмотрим на пример:

Пример

Используйте min(), чтобы установить ширину #div1 на наименьшее значение, 50% или 300px:

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}


Все математические функции CSS

Function Description
calc() Allows you to perform calculations to determine CSS property values
max() Uses the largest value, from a comma-separated list of values, as the property value
min() Uses the smallest value, from a comma-separated list of values, as the property value