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;}
Поделитесь:

О сайте

Все материалы сайта proglang.su являются результатом труда его авторов. Копирование материалов в некоммерческих целях без указания источника в виде прямой ссылки на сайт proglang.su запрещено. Использование материалов в коммерческих целях разрешено только с письменного согласия автора. Нарушение авторских прав преследуется по закону. Мы это делаем, чтобы защитить плоды своих трудов от воровства. © 2014-2017

Присоединяйтесь


Обратная связь