Прежде чем мы начнем фактическое упражнение, мы хотели бы дать краткое представление о единицах измерения 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;}

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




Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok