Прежде чем мы начнем фактическое упражнение, мы хотели бы дать краткое представление о единицах измерения CSS.
CSS поддерживает ряд измерений, включая абсолютные единицы, такие как дюймы, сантиметры, точки и т. Д., А также относительные меры, такие как проценты и единицы измерения. Эти значения необходимы для определения различных измерений в правилах стиля, например border = "1px solid red".
Мы перечислили все единицы измерения CSS вместе с соответствующими примерами -
| Ед. изм | Описание | Пример |
|---|---|---|
| % | Определяет измерение в процентах относительно другого значения, обычно являющегося охватывающим элементом. | p {font-size: 16pt; line-height: 125%;} |
| cm | Определяет измерение в сантиметрах. | div {margin-bottom: 2cm;} |
| em | Относительное измерение высоты шрифта в em пространствах. Поскольку единица em эквивалентна размеру данного шрифта, если вы назначаете шрифт 12pt, каждый элемент «em» будет 12pt; таким образом, 2em будет 24pt. | p {{letter-spacing: 7em;} |
| Ex | Это значение определяет измерение относительно высоты x шрифта. Высота x определяется высотой строчной буквы x шрифта. | p {font-size: 24pt; line-height: 3ex;} |
| in | Определяет измерение в дюймах. | p {word-spacing: .15in;} |
| mm | Определяет измерение в миллиметрах. | p {слово-интервал: 15 мм;} |
| pc | Определяет измерение в пиках. Пика эквивалентна 12 пунктам; таким образом, есть 6 picas на дюйм. | p {font-size: 20pc;} |
| Pt | Определяет измерение в точках. Точка определяется как 1/72 дюйма дюйма. | body {font-size: 18pt;} |
| Px | Определяет измерение в пикселях экрана. | p {padding: 25px;} |
| Vh | 1% высоты просмотра. | h2 {font-size: 3.0vh; } |
| Vw | 1% ширины окна просмотра | h1 {font-size: 5.9vw; } |
| vmin | 1vw или 1vh, в зависимости от того, что меньше | p {font-size: 2vmin;} |
