Css вычисление ширины экрана

calc ( )

Настоящая математика внутри CSS! Что может быть безумнее удобнее?

Время чтения: меньше 5 мин

Обновлено 13 декабря 2021

Кратко

Скопировать ссылку «Кратко» Скопировано

Классная функция, позволяющая производить математические вычисления прямо в CSS. Раньше, до появления calc ( ) , приходилось страдать и вычислять размеры примерно.

Пример

Скопировать ссылку «Пример» Скопировано

Частая ситуация: в вёрстке три колонки, ширина каждой из которых должна быть ровно третью от 100%. 100% / 3 = 33.3333333333. %. Раньше мы допускали неточность и указывали ширину как 33%. Теперь можно использовать calc ( ) и пусть браузер сам считает.

При отрисовке страницы браузер сам высчитает и подставит значение:

 .selector  width: calc(100% / 3);> .selector  width: calc(100% / 3); >    Скопировать Скопировано Не удалось скопировать   

Но лучше не перегружать браузер расчётами. На каждую операцию он тратит некую долю секунды и часть оперативной памяти. Если расчётов будет много, то это потенциально повлияет на скорость загрузки страницы. Используйте calc ( ) с умом.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

В круглых скобках мы можем писать любые математические операции с любыми единицами измерения, доступными в вебе (%, px, rem, em, vw, vh, vmin и т.д.). Доступны четыре стандартных операнда:

Операторы сложения и вычитания обязательно с двух сторон должны отбиваться пробелом. Иначе браузер воспримет их как часть числа. Хоть операторы деления и умножения не требуют такой строгости к себе, но принято и их тоже отбивать пробелами для удобства чтения.

 .selector  width: calc(100% - 2rem);> .selector  width: calc(100% - 2rem); >    Скопировать Скопировано Не удалось скопировать   

 .selector  width: calc(100% -2rem);> .selector  width: calc(100% -2rem); >    Скопировать Скопировано Не удалось скопировать   

Внутри скобок может быть больше одного вычисления, можно группировать операции при помощи скобок. Всё как в настоящем языке программирования 😺 Но не стоит увлекаться: чем короче вычисление, тем проще потом его прочитать и понять что там вообще происходит.

Для каких свойств можно указать calc ( ) в качестве значения? Для любых, значением которых должна быть цифра! Причём если свойство предполагает составное значение, то можно указать функцию как часть этого значения:

 .selector  margin: calc(5vh / 4) 20px; transition: transform calc(0.5s + 120ms);> .selector  margin: calc(5vh / 4) 20px; transition: transform calc(0.5s + 120ms); >    Скопировать Скопировано Не удалось скопировать   

Внутри круглых скобок можно складывать только числовые значения. Нельзя сложить число со строкой, хотя в полноценных языках программирования, типа JavaScript, такой трюк с лёгкостью бы удался.

Ещё одно неудачное место для этой функции — медиавыражения. Вот такая запись считается не валидной:

 @media (min-width: calc(465px + 1vw))  . ;> @media (min-width: calc(465px + 1vw))  . ; >    Скопировать Скопировано Не удалось скопировать   

Хотя бы у одной из цифр внутри скобок нужно указать единицу измерения, иначе браузер не сможет понять, от чего же вести вычисление.

Как понять

Скопировать ссылку «Как понять» Скопировано

Во время отрисовки (рендеринга) страницы браузер заглядывает в CSS и производит все вычисления из функций calc ( ) , подставляя на их место итоговое значение. Исходя из этих значений и отрисовываются стили элементов.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Очень удобно (и часто приходится) использовать, когда из одной величины в относительных единицах надо вычесть другую величину в абсолютных единицах. Самостоятельно это никак не посчитать, а браузеру раз плюнуть. Например, каким будет результат такого вычисления?

 .selector  height: calc(100vh - 34px);> .selector  height: calc(100vh - 34px); >    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Возьмём тот же пример с тремя колонками из начала статьи. Пусть у каждой из колонок будет внешний отступ по 40 px с каждой из сторон. Если зададим свойства в лоб, то ничего не выйдет, последний блок падает на новую строку.

    
Газеты   
Заводы   
Пароходы   div class="parent"> div class="child"> h2>Газетыh2> div> div class="child"> h2>Заводыh2> div> div class="child"> h2>Пароходыh2> div> div>    Скопировать Скопировано Не удалось скопировать   

 .child  display: inline-block; width: 33.3%; margin-left: 40px; margin-right: 40px;> .child  display: inline-block; width: 33.3%; margin-left: 40px; margin-right: 40px; >    Скопировать Скопировано Не удалось скопировать   

Можно использовать флексбокс. Избежим падения, но получим проблему сужения блоков, чтобы уместиться в ряд. Как всего этого избежать? Высчитывать размер блоков с учётом этих боковых отступов!

 .child  display: inline-block; width: calc(33.3% - 80px); margin-left: 40px; margin-right: 40px;> .child  display: inline-block; width: calc(33.3% - 80px); margin-left: 40px; margin-right: 40px; >    Скопировать Скопировано Не удалось скопировать   

Источник

Функция calc()

calc() — это функция CSS, которая даёт возможность рассчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы , (en-US), , , , или .

Интерактивный пример

Синтаксис

Функция calc() принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS-свойства. Выражение может включать операторы +, -, *, / с использованием стандартных правил приоритета операторов:

Умножение. По крайней мере хоть один из сомножителей должен быть .

Деление. Делитель должен быть .

Примечание: Деление на ноль выдаст ошибку при парсинге HTML.

Примечание: Операторы + и — всегда должны быть по обеим сторонам отделены пробелом. Выражение calc(50% -8px) будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (не верное выражение), в то время как calc(50% — 8px) — правильное выражение, будет интерпретировано как вычитание из процентов длины в пикселях. Операторы * и / не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.

Формальный синтаксис

Примеры

Позиционирование объекта в окне с помощью отступа

calc() делает простым позиционирование объекта с помощью отступа. В этом примере создаётся баннер занимающий в ширину все окно с отступами по краям в 40px.

.banner  position: absolute; left: 5%; /* для браузеров не поддерживающих calc() */ left: calc(40px); width: 90%; /* для браузеров не поддерживающих calc() */ width: calc(100% - 80px); border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; padding: 6px; text-align: center; > 

div class="banner">Это баннер!div> 

Автоматическое изменение размера формы ввода для соответствия размеру контейнера

В следующем случае calc() помогает обеспечить не выпадание полей формы за края блока, задав отступ.

Давайте посмотрим некоторый код CSS:

input  padding: 2px; display: block; width: 98%; /* для браузеров, не поддерживающих calc() */ width: calc(100% - 1em); > #formbox  width: 130px; /* для браузеров, не поддерживающих calc() */ width: calc(100% / 6); border: 1px solid black; padding: 4px; > 

Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать размер полей, мы вновь используем функцию calc() , которая вычитает 1em из ширины блока. Теперь применим этот CSS к следующему HTML-коду:

form> div id="formbox"> label>Type something:label> input type="text"> div> form> 

Вложенный calc() с CSS переменными

Вы также можете использовать calc() с CSS переменными. Рассмотрим пример кода:

.foo  --widthA: 100px; --widthB: calc(var(--widthA) / 2); --widthC: calc(var(--widthB) / 2); width: var(--widthC); > 

Спецификации

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 11 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

calc()

calc() CSS функция позволяет выполнять расчеты при определении значений свойств CSS. Его можно использовать везде, где разрешены , , , , , или .

Try it

Syntax

/ * свойство: calc (выражение) * / width: calc(100% - 80px);

Функция calc() принимает в качестве параметра одно выражение, а результат выражения используется в качестве значения. Выражение может быть любым простым выражением, объединяющим следующие операторы с использованием стандартных правил приоритета операторов :

Умножение. По крайней мере, один из аргументов должен быть .

Отдел. Правая часть должна быть .

Notes

• Операторы + и — должныбытьокружены пробелами . Например, calc(50% -8px) будет проанализирован как процент, за которым следует отрицательная длина — недопустимое выражение, — а calc(50% — 8px) — это процент, за которым следует оператор вычитания и длина. Точно так же calc(8px + -50%) обрабатывается как длина, за которой следует оператор сложения и отрицательный процент.
• Операторы * и / не требуют пробелов, но добавление их для согласованности разрешено и рекомендуется.
• Деление на ноль приводит к ошибке,генерируемой парсером HTML.
• Математические выражения, включающие проценты для ширины и высоты столбцов таблицы, групп столбцов таблицы, строк таблицы, групп строк таблицы и ячеек таблицы в таблицах автоматической и фиксированной разметки, могут обрабатываться так, как если бы была задана auto .
• Разрешается calc() функции calc () , в этом случае внутренние обрабатываются как простые скобки.
• Для длины вы не можете использовать 0 для обозначения 0px (или другой единицы длины); вместо этого вы должны использовать версию с единицей измерения: margin-top: calc(0px + 20px); действителен, а margin-top: calc(0 + 20px); является недействительным.

Formal syntax

 = calc( calc-sum> ) calc-sum> = calc-product> [ [ '+' | '-' ] calc-product> ]* calc-product> = calc-value> [ [ '*' | '/' ] calc-value> ]* calc-value> = number> | dimension> | percentage> | calc-constant> | ( calc-sum> ) calc-constant> = e | pi | infinity | -infinity | NaN

Accessibility concerns

Когда calc() используется для управления размером текста, убедитесь, что одно из значений включает относительную единицу длины , например:

h1 < font-size: calc(1.5rem + 3vw); >

Это гарантирует,что размер текста будет масштабироваться при увеличении страницы.

Использование с целыми числами

Это даст .modal окончательное значение z-index , равное 2.

Примечание. Браузер Chrome в настоящее время не принимает некоторые значения, возвращаемые calc() , когда ожидается целое число. Сюда относится любое деление, даже если в результате получается целое число, т.е. z-index: calc(4 / 2); не будет принято.

Examples

Позиционирование объекта на экране с полями

calc() позволяет легко позиционировать объект с установленным полем. В этом примере CSS создает баннер, который растягивается по всему окну с промежутком в 40 пикселей между обеими сторонами баннера и краями окна:

.banner < position: absolute; left: 40px; width: calc(100% - 80px); border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; padding: 6px; text-align: center; box-sizing: border-box; >

class="banner">This is a banner!
 

Автоматическое определение размеров полей формы в соответствии с их контейнером

Другой вариант использования calc() — это обеспечение того, чтобы поля формы помещались в доступное пространство, не выдавливаясь за край их контейнера, при сохранении соответствующего поля.

input < padding: 2px; display: block; width: calc(100% - 1em); > #formbox < width: calc(100% / 6); border: 1px solid black; padding: 4px; >

Здесь сама форма устанавливается для использования 1/6 доступной ширины окна. Затем, чтобы гарантировать, что поля ввода сохраняют соответствующий размер, мы снова используем calc() чтобы установить, что они должны быть шириной их контейнера минус 1em. Затем следующий HTML использует этот CSS:

form> div id="formbox"> label for="misc">Type something: label> input type="text" id="misc" name="misc"> div> form> 

Вложенный calc() с переменными CSS

Вы также можете использовать calc() с переменными CSS . Рассмотрим следующий код:

.foo < --widthA: 100px; --widthB: calc(var(--widthA) / 2); --widthC: calc(var(--widthB) / 2); width: var(--widthC); >

После расширения всех переменных значение widthC будет равно calc(calc(100px / 2) / 2) , а затем, когда оно будет присвоено свойству ширины .foo , все внутренние calc() (независимо от того, насколько глубоко они вложены) будут быть сглаженным до круглых скобок, поэтому значение свойства width в конечном итоге будет равно calc((100px / 2) / 2) , то есть 25px . Вкратце: calc() внутри calc() идентичен только скобкам.

Specifications

Источник