1. Единица длины в CSS
В CSS многие значения используют длину в качестве значения. Атрибуты блочной модели — это некоторые очевидные атрибуты значений: ширина, высота, поле, отступы и границы. Кроме того , существует множество атрибутов CSS, значения которых также являются значениями длины, например смещение, размер тени или размер шрифта, интервал и т. д. В CSS существует множество единиц длины. Мы обсудим их ниже. О единицах длины и их использовании.
2. Краткое введение (в каких единицах длины:)
В CSS существует два типа единиц длины: абсолютная длина и относительная длина .
Абсолютная длина: пиксели, дюймы, см, мм, пт, пк;
Относительная длина: em, rem, ex, vh, vw, vmin, vmax, %, fr.
3. Подробное введение
1. Абсолютная единица длины.
Единица абсолютной длины представляет собой реальный физический размер. Ее размер фиксирован и не изменится из-за изменений размера других элементов. В следующей таблице перечислены единицы абсолютной длины, поддерживаемые в CSS.
px: представляет собой пиксели. Пиксели относятся к разрешению экрана. Страница отображается в пикселях и не изменяется из-за изменений размера других элементов. Пиксели по-прежнему являются наиболее типичной единицей измерения, например: для окон Разрешение. Разрешение, используемое пользователями Mac, составляет 96 пикселей/дюйм, тогда как разрешение, используемое пользователями Mac, обычно составляет 72 пикселя/дюйм. , единицей измерения в общем языке JavaScript является используемый пиксель.
div {ширина: 200 пикселей;}in:inch — это файл физических измерений, но в поле CSS дюймы просто отображаются непосредственно в пикселях. (1 дюйм == 2,54 см == 96 пикселей)
div {ширина: 2 дюйма;}см : Сантиметр — знакомая и полезная единица физического измерения. Он также отображается в пикселях. (1 см == 37,8 пикселей)
div{ширина:20 см;}мм: Миллиметр — это физическая единица измерения небольшого порядка. (1 мм == 0,1 см == 3,78 пикселей)
div{ширина:200 мм;}p t: Точки также являются физическими единицами длины. (1 точка == 1/72 дюйма == 96/72 пикселей)
div{ширина:20pt;}ПК: Пика аналогична точкам, за исключением (1ПК == 12пт).
div{ширина:20pt;}Пример:
<!DOCTYPEhtml><html><head><title>Единица абсолютной длины</title><style>.box{ширина:4 дюйма;высота:4,5 см;граница:2ммsolidblack;font-size:16px;}.pt{font {размер шрифта: 2pt;}.pc{font-size:3pc;</style></head><body><divclass=box>Это шрифт размером 16 пикселей<pclass=pt>Это шрифт размером 2 пт</p><pclass =pc>Это шрифт 3pc</p></div></body></html>Представленные результаты следующие:
2. Относительная единица длины.
Единица относительной длины означает, что эта единица не имеет фиксированного значения. На ее значение влияют другие атрибуты элемента (например, размер окна браузера и размер родительского элемента). макет В следующей таблице перечислены единицы относительной длины, поддерживаемые в CSS.
em: em — относительная единица измерения относительно размера шрифта текста в текущем объекте. Если размер шрифта в текущей строке не установлен, он определяется размером шрифта браузера по умолчанию. Первоначально измерение набора основано на размере заглавной буквы M текущего шрифта. При изменении семейства шрифтов его размер не изменится, но при изменении размера шрифта его размер изменится. em унаследует размер шрифта родительского элемента. (Ниже приведены примеры em и rem)
Без каких-либо правил CSS: (1em == 16px == 0,17 дюйма == 12pt == 1 шт. == 4,2 мм == 0,42 см)
div {ширина: 40em;}re em: rem — это относительная единица, такая же, как em, но в отличие от em, rem всегда относится к корневому элементу (например: root{}), в отличие от em, который использует каскадный метод для вычисления размера. Эту относительную единицу проще использовать.
div {ширина: 40рем;}Пример: Относительная единица длины относительно высоты символа. Размер шрифта по умолчанию. В отличие от em, em не изменится при изменении семейства шрифтов, но единица измерения ex изменится, поскольку значение единицы и этот шрифт имеют особые отношения ограничений.
div {ширина: 40ex;}ch: Значение ch аналогично высоте ex относительно x, за исключением того, что ch основан на ширине символа 0, а не на высоте символа x. 1ch — это ширина числа 0. При изменении семейства шрифтов ch также изменится.
div {ширина: 40 каналов;}vw: vw (ширина точки обзора) — это единица визуальной ширины (ширина окна). 1vw равна одному проценту ширины визуальной области. Единица vw очень похожа на процент. vw применяется ко всем элементам. То же самое, независимо от их родительского элемента или ширины родительского элемента, немного похоже на то, что единицы измерения rem всегда относятся к корневому элементу. (Ниже приведены примеры vh и vw)
div {ширина: 40vw;}vh: Единицы измерения vh (высота области просмотра) и vw (ширина области просмотра) одинаковы. Разница в vh зависит от высоты визуальной области (высоты окна).
div {ширина: 40vh;}vmin: значение vmin — это меньшее значение среди текущих значений vw и vh. В примере использования типа стандартного размера, по сравнению с единицами vw и vh, которые определяют размер экрана самостоятельно, vmin является более полезным показателем.
div {ширина: 40vmin;}vmax: значение vmax — это большее значение между vw и vh.
div {ширина: 40vмакс;}%: процент, значение длины в процентах основано на значении длины родительского элемента с тем же атрибутом. Например: если ширина элемента составляет 450 пикселей, а ширина дочернего элемента установлена на 50%, то дочерний элемент отображается. Ширина составляет 225 пикселей. (Если для всех родительских элементов не установлено конкретное значение, установка процентной высоты приведет к тому, что значение всех элементов будет равно 0).
div{ширина:40%;}fr: единица длины, используемая в сетке. В сетке мы часто используем fr для вычислений.
Следующий оператор объявляет сетку с тремя строками. Высота первой строки равна 30 пикселей, высота второй строки также равна 30 пикселей, а высота третьей строки — 60 пикселей.
сетка-шаблон-строки: 30px1fr2fr;
Пример:
<!DOCTYPEhtml><html><head><title>Единица относительной длины</title><style>.box{width:60vw;height:88vh;border:1exsolidblack;font-size:16px;}.info{font- размер: 2em;}.ex>span{font-size:3ex;}.ch>span{fon t-size:4ch;</style></head><body><divclass=box>Это шрифт размером 16 пикселей<pclass=info>Это шрифт размером 2em</p><pclass=ex>x:< span>Это шрифт 3ex</span></p><pclass=ch>0: <span>Это шрифт 4ch</span></p></div></body></ html>Показано ниже:
3. Сводка единиц длины:
(1) Прежде всего, нам нужно понять одну вещь, а именно, какое именно разрешение экрана? Мы знаем, что при разных разрешениях размер пикселей разный, поэтому одна и та же веб-страница в пикселях? При использовании в качестве единиц длины отображаемые размеры различаются при разных разрешениях. При низких разрешениях пиксели становятся крупнее, а детали не достаточно четкими. Хотя отображаемая страница также большая, она размыта.
(2) Фактически, все единицы измерения, как относительные, так и абсолютные (при отображении на экране), в конечном итоге преобразуются в пиксели, поэтому, вообще говоря, при создании веб-страниц в качестве базовой единицы следует выбирать px вместо pt, поскольку pt также преобразуется в пиксели для отображения через DPI браузера (например, DPI FireFox равен 96, тогда 9pt = 12 пикселей). Не только пт, см, дюймы, мм и другие единицы также конвертируются в пиксели, поэтому независимо от того, являются ли они абсолютными или относительными, они будут меняться при разных разрешениях. Не думайте, что если длина установлена на 3 см, она изменится. различные разрешения. Разрешение остается неизменным и составляет 3 см.
(3) Я считаю, что pt по-прежнему очень полезен, особенно при печати. Теперь на некоторых веб-страницах реализовано отображение одной страницы и печать другим способом. Я хочу распечатать. Используйте pt. Ну, потому что для разных разрешений все печатаемые страницы имеют одинаковый размер. Это первая характеристика абсолютной единицы, но вы все равно должны помнить, что на дисплее эта единица не отображает реальную физическую длину. необходимо настроить в соответствии с фактическим размером пикселя (это связано с разрешением).
(4) На самом деле, мы можем понять это так, рассматривать px как абсолютную единицу (абсолютную единицу на дисплее), а на ее основе основаны другие единицы, например em, который представляет собой высоту относительно текущего шрифта текста ( Предположим, текущий размер шрифта текста составляет 12 пикселей, и мы установили новый шрифт на 1,5em, затем новый размер шрифта преобразуется в 12 * 1,5 = 18px), вам нужно помнить, что em — это высота относительно родительского элемента. Предположим, мы установили шрифт равным 12px в первом div, 1,5em на втором уровне и 1,5em на третьем уровне. Отображение шрифта: первый уровень 12 пикселей, второй уровень 18 пикселей, третий уровень 18 * 1,5 = 27 пикселей.