Прежде чем мы начнем фактическое упражнение, мы хотели бы дать краткое представление о единицах измерения 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;}
Vh1% высоты просмотра.h2 {font-size: 3.0vh; }
Vw1% ширины окна просмотраh1 {font-size: 5.9vw; }
vmin1vw или 1vh, в зависимости от того, что меньшеp {font-size: 2vmin;}

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok