Единицы CSS (Единицы)

Единицы измерения используются для указания ненулевых значений длины в свойствах CSS, наиболее часто используемые единицы измерения в CSS: px, em, pt, проценты (%) и т.д.

Изучение CSS единиц измерения

Единицы измерения длины могут быть абсолютными, такими как пиксели, точки и т.д., или относительными, такими как проценты (%) и единицы em.

Ненулевые значения должны указывать CSS единицы измерения, так как по умолчанию единица измерения не установлена. Отсутствие или игнорирование единицы измерения будет считаться ошибкой. Но если значение равно 0, единица измерения может быть опущена (в конце концов, нулевые пиксели и нулевые дюймы одинаковы по мере измерения).

Относительные единицы измерения

Относительные единицы измерения указывают размер по отношению к другой длине属性的. Относительные единицы измерения:

Эти единицы измерения em и ex зависят от размера шрифта, примененного к элементу.

Использование единицы измерения em

Измерение 1em равноfont-sizeиспользовать его значение свойства для вычисления. Это можно использовать для вертикальных или горизонтальных измерений.

Например, если font-size установить для элемента в 16px иline-heightЕсли установить line-height в 2.5em, то значение в пикселях будет 2.5 x 16px = 40px.

p {
　　　　font-size: 16px;
　　　　line-height: 2.5em;
}

Если в значении font-size указан em, может возникнуть исключение, в этом случае он ссылается на размер шрифта родителя.

Таким образом, когда мы указываем размер шрифта в em в font-size, 1em равен размеру шрифта, наследованному от родителя. Таким образом, font-size: 1.2em; делает текст в 1.2 раза больше текста родителя.

body {
　　　　font-size: 62.5%;
　　　　font-family: Arial, Helvetica, sans-serif;
}
p {
　　　　font-size: 1.6em;
}
p: first-letter {
　　　　font-size: 3em;
　　　　font-weight: bold;
}

Давайте разберемся с полным значением этого кода. В всех современных браузерах размер шрифта по умолчанию составляет 16px. Наш первый шаг - уменьшить размер всего документа, установив font-size в 62.5%, что вернет размер шрифта к 10px (62.5% от 16px).

Это значение по умолчанию для四舍五入font-sizeдля удобства конвертации px в em.

Использование防爆ного устройства

Единицы ex равны высоте "x" текущего шрифта.

Почему это называется x-высотой, потому что это обычно равно высоте маленькой буквы "x", как показано ниже. Однако, ex также определен для шрифтов, не содержащих "x".

Абсолютные единицы длины

Абсолютные единицы длины彼此 фиксированы. Они сильно зависят от介质 вывода, поэтому особенно полезны при известной среде вывода. Абсолютные единицы состоят из физических единиц (in, cm, mm, pt, pc) и единиц px.

Абсолютные физические единицы, такие как in, cm, mm и т.д., должны использоваться для материалов печати и аналогичных устройств с высокой разрешающей способностью. Для экранов с низким разрешением, таких как настольные компьютеры, рекомендуется использовать единицы пикселей или em.

h1 { margin: 0.5in; } /* дюймы */
h2 { line-height: 3cm; } /* сантиметры */
h3 { word-spacing: 4mm; } /* миллиметры */
h4 { font-size: 12pt; } /* points */
h5 { font-size: 1pc; } /* picas */
h6 { font-size: 12px; } /* picas */