[Примечания CSS] - используйте Calc () для расчета ширины и высоты (VW / VH)

CSS

[Примечания CSS] - используйте Calc () для расчета ширины и высоты (VW / VH)

что такое кальк()?

Проще говоря, это новая функция в CSS3, сокращение от calculate. Для динамического расчета ширины/высоты вы можете использовать calc() для установки значений [margin, border, padding, font-size] и т. д.

синтаксис вычисления ()

Синтаксис calc состоит из четырех простых операций,

  1. Используйте «+», «-», «*» и «/» четыре арифметических операции;
  2. Можно использовать проценты, px, em, бэр и другие единицы измерения;
  3. Различные единицы могут быть смешаны для расчета;
  4. Когда в выражении есть "+" и "-", перед ними и после них должны быть пробелы, например "width: calc(12%+5em)" без пробелов неверно;
  5. При наличии в выражении "*" и "/" пробелов до и после них быть не может, но рекомендуется использовать пробелы.

Назначение вычисления()

Он в основном используется для вычисления неопределенных значений, таких как элемент с отступом 10px и шириной 100% Как мы его устанавливаем в этом случае? если установлено

width: 100%;
margin: 10px;

Вы видите, что коробка переполнилась, так как это решить? Вы можете использовать функцию расчета.

width: 800px;
width: calc(100% - (10 *2)px);
margin: 10px;

Что такое vw и vh?

VW, VH, VMIN, VMAX — единица окна и относительные единицы. Это не корневой узел родительского узла или страницы. Вместо этого он определяется VIEWPORT, а единица измерения 1 аналогична 1%. Область просмотра — это область, в которой ваш браузер фактически отображает содержимое. РЕШЕНО — это веб-браузер, который не включает панели инструментов и кнопки.

Конкретное описание выглядит следующим образом:

  1. vw: процент ширины окна (1vw означает, что окно имеет ширину 1%).
  2. vh: процент высоты области просмотра
  3. vmin: возьмите меньшее значение текущих Vw и Vh
  4. vmax: взять большее значение текущих Vw и Vh

Разница между vw, vh и % процентов

(1) % — это соотношение относительно размера родительского элемента, а vw и vh определяются размером окна. (2) Преимущество vw и vh заключается в том, что они могут напрямую получить высоту, но использование % без установки высоты тела не может правильно получить высоту видимой области, так что это хорошее преимущество.

calc в сочетании с vh/vw

Выше мы можем использовать % в сочетании с calc для достижения желаемого эффекта Зачем вводить vw и vh? В разнице между % и vw, vh, упомянутой выше, % не может правильно получить высоту видимой области без установки высоты тела.

calc + vw для расчета ширины
width: 800px; /* fallback for b*/
width: -moz-calc(100vw - (2 * 10)px);
width: -webkit-calc(100vw -(2 * 10)px);
width: calc(100vw - (2 * 10)px);
calc + vh рассчитать высоту
height: 800px;
height: -moz-calc(100vh - (2 * 10)px);
height: -webkit-calc(100vh - (2 * 10)px);
height: calc(100vh - (2 * 10)px);
Категории