Единицы CSS

Узнайте, как работать с модулями в CSS

Одна из вещей, которые вы будете использовать каждый день в CSS:единицы. Они используются для установки длины, отступов, полей, выравнивания элементов и т. Д.

Вещи какpx,em,rem, или проценты.

Они повсюду. Есть и относительно неизвестные.

Пикселей

Самая распространенная единица измерения. Пиксель на самом деле не коррелирует с физическим пикселем на вашем экране, так как это сильно зависит от устройства (подумайте об устройствах с высоким разрешением по сравнению с устройствами без сетчатки).

Существует соглашение, согласно которому этот модуль согласованно работает на всех устройствах.

Проценты

Еще одна очень полезная мера, проценты, позволяют вам указывать значения в процентах от соответствующего свойства родительского элемента.

Пример:

.parent {
  width: 400px;
}

.child { width: 50%; /* = 200px */ }

Реальные единицы измерения

У нас есть те единицы измерения, которые переводятся из внешнего мира. В основном бесполезные на экране, они могут быть полезны для печати таблиц стилей. Они есть:

  • cmсантиметр (соответствует 37,8 пикселей)
  • mmмиллиметр (0,1 см)
  • qчетверть миллиметра
  • inдюйм (соответствует 96 пикселей)
  • ptточка (1 дюйм = 72 точки)
  • pcпика (1 пика = 12 баллов)

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

  • emэто значение, присвоенное этому элементуfont-size, поэтому его точное значение меняется между элементами. Он не меняется в зависимости от используемого шрифта, только от его размера. В типографике это измеряет ширинуmписьмо.
  • remпохоже наem, но вместо того, чтобы изменять размер шрифта текущего элемента, он использует корневой элемент (html) размер шрифта. Вы устанавливаете этот размер шрифта один раз иremбудет единообразной мерой по всей странице.
  • exкакem, но вставлены измерения шириныm, он измеряет высотуxписьмо. Он может меняться в зависимости от используемого шрифта и размера шрифта.
  • chкакexно вместо измерения высотыxон измеряет ширину0(нуль).

Единицы просмотра

  • vwвединица ширины окна просмотрапредставляет процент ширины области просмотра.50vwозначает 50% ширины области просмотра.
  • vhвединица высоты окна просмотрапредставляет процент от высоты области просмотра.50vhозначает 50% высоты области просмотра.
  • vminвминимальная единица области просмотрапредставляет минимум между высотой или шириной в процентах.30vminэто 30% текущей ширины или высоты, в зависимости от того, какая из них меньше
  • vmaxвмаксимальная единица области просмотрапредставляет максимум между высотой или шириной в процентах.30vmaxэто 30% текущей ширины или высоты, в зависимости от того, какая из них больше

Единицы фракции

frявляются дробными единицами, и они используются вCSS-сеткаразделить пространство на фракции.

Скачать мою бесплатнуюСправочник CSS


Больше руководств по css: