Учебник по модулям CSS

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

Относительные единицы длины

Эм Вычисляется относительно текущего размера шрифта родительского элемента. Например, 2em указывает в 2 раза больший размер шрифта текущего элемента.
бывший Вычисляется относительно высоты текущего font-size.
px Размер пикселей рассчитывается относительно устройства просмотра. Для устройств с низким разрешением 1 пиксель – это одна точка на дисплее. Для экранов с высоким разрешением 1 пиксель может указывать на несколько пикселей устройства.
% Значение в процентах относительно любого элемента. Например, 50% ширины контейнера.
rem Относительно размера шрифта корневого элемента.
vw Измеряется в процентах от ширины области просмотра. Если ширина области просмотра составляет 100 см, то 1vw = 1cm.
vh Измеряется в процентах от высоты области просмотра. Если высота области просмотра составляет 100 см, то 1vh = 1 см.
vmin Процентное значение меньшего размера области просмотра. Он поддерживается как «vm» в Internet Explorer 9 и более поздних версиях.
vmax Процентное значение большего размера области просмотра. Это не поддерживается IE.
ch Измеряется относительно нулевой ширины (0).

«Vmin» и «vmax» не поддерживаются Internet Explorer. Нестандартный модуль «vm» поддерживается IE 9 и новее. Он вычисляет относительное значение, учитывая минимум высоты или ширины области просмотра.

Единицы абсолютной длины

в Абсолютное значение в дюймах. 1 дюйм = 2,54 сантиметра.
см Сантиметры
мм Миллиметры
pt Баллы (1 балл = 1/72 дюйма)
ПК Пики (1 пик = 12 баллов)

Угловые единицы

град Степень
град Градианы
рад Радианы
перемена Повороты

Единицы времени

РС Миллисекунды
s Секунды

Примеры

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

Это шрифт размером 2em. Размер шрифта элемента составляет 18 пикселей, следовательно, эта строка относительно рассчитывается как 36 пикселей (2×18).

Это шрифт красного цвета размером 20 пикселей.

Это шрифт размером 36 пикселей синего цвета. Это эквивалентно 2em по размеру, так как размер шрифта элемента составляет 18 пикселей.

Это шрифт размером 18 пикселей зеленого цвета. Ширина ограничена 50% от общей ширины элемента. Мы добавляем больше контента, чтобы показать вам, что ширина ограничена по сравнению с предыдущими предложениями.

Эта строка создается со значением font-size = 2ex.

Эта строка создается со значением font-size = 2rem, которое в 2 раза больше, чем значение пикселя корневого элемента 36 пикселей (2×18).

Эта строка создается со значением font-size = 15vh, измените высоту браузера, чтобы увидеть, как изменится этот текст.

Эта линия создается с абсолютным значением font-size = 0,5 см.

Эта строка создается с абсолютным значением font-size = 2pc.

Угол и время

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

.image {
transform: rotate(10rad);
transition-duration: 2s;
}

Что следует помнить при использовании единиц длины в CSS

Ниже приведены некоторые важные моменты, о которых следует помнить при использовании модулей CSS:

  • Обычно для создания хороших макетов используются значения «em» и «rem».
  • «Em» относительно атрибута font-size родительского элемента. 2em указывает в 2 раза больший размер шрифта текущего элемента.
  • «Px» относится к разрешению устройства просмотра.
  • «%» Относится к другому значению единицы длины.
  • Все единицы длины CSS поддерживаются всеми основными браузерами, такими как Chrome, Firefox, IE, Safari и Opera.
  • Значения, вычисленные с помощью «em», относятся к родительскому элементу, поэтому его следует использовать осторожно при вложении нескольких элементов, чтобы избежать неожиданных результатов. Самый простой способ – использовать rem, основанный на размере корневого элемента.
  • Все единицы CSS измеряются без пробелов между значением и единицей.
  • Значение длины, равное нулю (0), не требует идентификатора. Например, «маржа = 0;» – это правильный способ определения, а не «margin = 0px;».

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *