TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

12

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

Связанный: Как создать виджет с прокруткой вверх с помощью CSS и jQuery?

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

вВычисляется относительно текущего размера шрифта родительского элемента. Например, 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 сантиметра.
смСантиметры
mmМиллиметры
дляБаллы (1 балл = 1/72 дюйма)
ПКФото (1 фото = 12 баллов)

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

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

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

Примеры

Ниже приведены некоторые примеры того, как разные единицы длины 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 для начинающих.

Единицы измерения угла и времени

Единицы измерения угла и времени не используются со значениями длины. Но обычно используется со свойствами 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;».

Связанный: Как создать страницу с параллаксом в полную ширину с помощью CSS?

Источник записи: webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. ПринимаюПодробнее