Главная » Языки программирования

Css рассчитать ширину блока

На чтение 8 мин
Содержание
  1. Жемчужина CSS3 — функция calc()
  2. Поддержка браузеров
  3. min() и max()
  4. calc ( )
  5. Кратко
  6. Пример
  7. Как пишется
  8. Как понять
  9. Подсказки
  10. На практике
  11. Алёна Батицкая советует
  12. Функция calc()
  13. Интерактивный пример
  14. Синтаксис
  15. Формальный синтаксис
  16. Примеры
  17. Позиционирование объекта в окне с помощью отступа
  18. Автоматическое изменение размера формы ввода для соответствия размеру контейнера
  19. Вложенный calc() с CSS переменными
  20. Спецификации
  21. Поддержка браузерами
  22. Смотрите также
  23. Found a content problem with this page?
  24. MDN
  25. Support
  26. Our communities
  27. Developers

Жемчужина CSS3 — функция calc()

В модулях спецификации CSS3 найдётся множество скрытых жемчужин. В этой статье мы взглянем на calc() — невероятно полезное свойство, которое может изменить ваш подход к вёрстке сайта.

Функция CSS3 calc() в первую очередь используется для вычисления длины, чисел, углов, времени перехода или анимации, а также частоты звука. Тем не менее, она позволяет смешивать типы значений — это мощная идея в CSS.

Рассмотрим макет сайта содержащего два плавающих элемента. Вы хотите чтобы оба элемента были одинаковой ширины и разделены между собой горизонтальным margin в 60px. Звучит просто? Не проблема в фиксированном дизайне; если страница имеет ширину 960px, то оба элемента будут шириной 450px.

Как насчёт резинового или адаптивного макета? Нет возможности определить ширину страницы, поэтому большинство разработчиков установили бы ширину каждого элемента, скажем, как 45%. Отступ 10% будет равен 60px при ширине страницы 600px; увеличение или сужение окна браузера, соответственно, станет увеличивать или сокращать margin.

К счастью, новая функция calc() позволяет нам вычислять ширину. В нашем случае мы хотим, чтобы ширина каждого элемента составляла 50% минус 30px.

#element1, #element2 < float: left; width: calc(50% - 30px); >#element2

Возможно вы желаете отступ, связанный с размером шрифта, вроде 4em? Не проблема.

Или вы хотите рамку в 2px вокруг каждого элемента.

Я рекомендую делать простые расчёты, но допустимо использовать и сложные формулы, например.

Поддержка браузеров

Функция calc() относится к рекомендациям W3C, теперь угадайте, какой браузер имеет встроенную поддержку?

Не угадали. На момент написания статьи это Internet Explorer 9. Firefox также поддерживает с префиксом: -moz-calc() . Так и не реализовано в webkit (Chrome и Safari) и Opera, но из-за полезности, полагаю, нам не придётся долго ждать (уже реализовано — прим. пер.).

К счастью, в своих стилях вы можете использовать прогрессивное улучшение.

min() и max()

Если вам понравился calc() , вы полюбите функции min() и max() . Они принимают два и более значений, разделенных запятыми, и возвращают, соответственно, минимум или максимум, например.

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

Читайте также:  Json обработка в java

К сожалению, min() и max() не поддерживаются ни одним из последних браузеров. Будем надеяться, они скоро это сделают.

Источник

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.

Источник

Оцените статью
© 2023 Программирование