Учебник по модулям 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 не будет опубликован.