5. CSS – Относительные и абсолютные единицы измерения

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

CSS поддерживает множество единиц измерений, включая абсолютные единицы измерения, такие как дюймы, сантиметры, пункты и т.д., а также относительные единицы измерения, такие как проценты, em и т.д. Эти значения необходимо использовать при указании различных измерений в ваших правилах стиля, например border = "5px solid blue".

Ниже перечислены все единицы измерения CSS вместе с соответствующими примерами:

Единица измерения	Описание	Пример
%	Устанавливает измерение в процентах относительно другого значения, как правило, охватывающего элемента.	div {width: 50%;}
cm	Определяет измерение в сантиметрах.	p {padding-top: 1cm;}
em	Относительное измерение высоты шрифта в em пространстве. Поскольку единица em эквивалентна размеру данного шрифта, то, если Вы укажите шрифт 12pt, каждый элемент «em» будет 12pt. Таким образом, 2em будет 24pt.	h1 {letter-spacing: 3em;}
ex	Это значение устанавливает измерение относительно x-высоты шрифта. x-высота определяется высотой строчной буквы x шрифта.	p {letter-spacing: 7ex;}
in	Определяет измерение в дюймах.	h2 {word-spacing: .10in;}
mm	Устанавливает измерение в миллиметрах.	div {margin: .15mm;}
pc	Определяет измерение в пиках. Пика эквивалентна 12 пунктам (12pt).	h3 {font-size: 10pc;}
pt	Определяет измерение в типографских пунктах (твип), введённых компанией Adobe. Пункт равен 1/72 дюйма или 25,4/72 мм = 0,3528 мм. В странах СНГ, входящих в Таможенный союз, 1 пункт равен 0,376 мм.	table {font-size: 20pt;}
px	Устанавливает измерение в пикселях экрана.	p {margin: 30px;}
vh	Равен 1% высоты окна просмотра.	h1 {font-size: 2.0vh;}
vw	Равен 1% ширины окна просмотра.	h2 {font-size: 2.0vw;}
vmin	Равен 1vw или 1vh, в зависимости от того, что меньше.	div {font-size: 5vmin;}