CSS 单位
- 1. 长度单位
- 1.1 相对长度 单位
- 1.1.1 字体的 相对长度
- ⑴ em : (相对于 当前元素本身的 )字体大小 font-size 的倍数
- ⑵ rem : (根元素 html 标签的) 字体大小 font-size 的倍数
- ⑶ ex : x 的高度 (随 font-family , font-size 改变)
- ⑷ ch : 数字 0 的宽度 (随 font-family , font-size 改变)
- 1.1.2 视窗的 相对长度
- ⑴ vh : 视窗高度 的 1% (百分之一)
- ⑵ vw :视窗宽度 的 1%(百分之一)
- ⑶ vmin : vw 和 vh 中的 较小值 (宽/高较小值的 百分之一)
- ⑶ vmax : vw 和 vh 中的 较大值 (宽/高较大值的 百分之一)
- ♣ 视窗单位的 计算方法
- 1.1.3 百分比 单位 (%)
- ⑴ 定位 中的百分比
- ⑵ 盒模型 中的百分比
- ⑶ 文本 中的百分比
- ⑷ 边框 和 圆角 中的百分比
- ⑸ 背景 属性中的百分比
- ⑹ 变换 中的百分比
- ♣ 百分比值的 继承
- 1.2 绝对长度单位
- ⑴ px : 像素
- ⑵ cm : 厘米 ( 1/2.54 in , 38px)
- ⑶ mm : 毫米 (1/25.4 in, 3.8px)
- ⑷ in : 英寸 ( 1in = 96px ,2.54cm)
- ⑸ pc : 派卡 ( 1/6 in ,12pt, 16px)
- ⑹ pt : 点 (显示器上 一个个的点,1/72 in,1.3px)
- ♣ CSS 绝对单位的 换算关系
- ♣ 长度单位的 浏览器支持
- 2. 时间单位 (s , ms)
- 3. 频率单位 (Hz , kHz)
- 4. 角度单位 (deg,rad,grads,turn)
- ♣ 结束语 和 友情链接
1. 长度单位
1.1 相对长度 单位
- 单位和数字之间 没有空格。 数字
0
后,长度单位是 可选的。 - 相对长度
- 相对长度表示 以其他距离 表示的度量。
- 根据 单位的不同,可以是 特定字符的大小、行高 或 视口的大小。
1.1.1 字体的 相对长度
- 字体相对长度
- 根据 当前在元素 或 其父元素中 有效的字体中的 特定字符或字体属性的大小 来定义长度
<length>
值。
- 根据 当前在元素 或 其父元素中 有效的字体中的 特定字符或字体属性的大小 来定义长度
- 注意:这些单位,特别是
em
和rem
,通常用于 创建 可伸缩的布局,即使用户 更改字体大小,这些布局 也能保持页面的 垂直节奏。- 垂直节奏: 读者向下阅读时 文本的间距和排列——由三个因素决定:字体大小、行高和页边距或填充。所有这些因素必须小心计算,以保持节奏。
⑴ em : (相对于 当前元素本身的 )字体大小 font-size 的倍数
- 相对 长度单位
em
= 元素的 字体大小font-size
的计算值。1.5em
=1.5
xfont-size
的计算值
- ① 用在
font-size
属性 本身- ❶ 元素本身没有设置
font-size
属性时em
是相对于 父元素继承font-size
的值- 因为此时 元素自身的字体大小 = 从父元素 继承的字体大小
- ❷ 如果元素本身 设置了
font-size
- 比如,再给此元素 设置
padding-left:1.5em
,这个就是相对于 元素本身的font-size
了,而不是 父元素的. - 不是相对于 父元素:
- 所以记住,
em
不是 一直相对于 父元素的字体大小的,只有本身没设置font-size
时,自身字体大小 ,才等于 从父亲那里继承来的字体大小 - 本质上,一直是 相对于 当前元素本身的字体大小
font-size
的,千万不要误解.
- 所以记住,
- ★ 真实相对于: 使用
em
单位的 当前元素自身的 字体大小font-size
,并不是 相对于 父元素的字体大小.
- 比如,再给此元素 设置
- ❶ 元素本身没有设置
- ② 用在 非
font-size
的属性上- 将会受 元素 字体大小
font-size
的影响 - 可以运用于 (可以使用 长度值的) 其他属性上,比如
width
、margin
、padding
、border-width
和text-shadow
等。
- 将会受 元素 字体大小
- 如果没有任何 CSS 规则 影响的前提之下,默认情况下:
1em
的长度是:1em
=16px
=0.17in
=12pt
=1pc
=4 mm
=0.42cm
- 示例1: 求
h3
的字体大小
<body style=“font-size:1.5em”>
<h3 style=“font-size:1.5em”>使用 em 为单位的字体大小 <h3>
<body>
- 浏览器 默认字体大小:
font-size: 16px
body
的 字体大小 =1.5em
=1.5
x 浏览器 默认字体大小 =1.5x16px
=24px
h3
的字体大小 =1.5em
=1.5
xbody
的字体大小 =1.5x24px
=36px
- 逐级相乘
示例2: em
是相对于 元素自身的 字体大小font-size
,不是父元素的 字体大小,只有本身没有设置 字体大小时,需要设置时,才从父元素 继承一个字体大小,然后乘以倍数.
<div style="font-size: 10px">
<h3 style="font-size: 20px; background-color: green; padding-left: 2em" >没有使用 em 为单位的字体大小,左内边距 使用了 em 单位</h3>
<h2 style="font-size: 2em">使用 em 为单位的字体大小</h3>
</div>
h2
的字体大小: 相对于 继承 父元素div
的 字体大小- 因为,此时 元素
h2
自身的字体大小 = 继承 父元素div
的 字体大小 - =
2em
=2
x10px
=20px
- 因为,此时 元素
h3
的字体大小,此元素 自己设置的 =20px
- 重点:
h3
的 左内边距的 大小padding-left
的单位是em
- 它的大小 不是相对于 父元素
div
的倍数 - 而是 相对于 元素自身
h3
的 字体大小font-size: 20px;
的 倍数padding-left
的大小 =2em
=2
x20px
=40px
(如果是 从父元素div
继承,应该是20px
,但并不是.)
- 它的大小 不是相对于 父元素
- 重点:
⑵ rem : (根元素 html 标签的) 字体大小 font-size 的倍数
-
rem
= 根元素<html>
的字体大小。- 当在根元素
font-size
中使用时- 表示它的 初始值.
- 当在根元素
-
相对于 根元素
<html>
的 字体大小:rem
仅仅是 相对于 根元素<html>
的 字体大小font-size
计算- ①
1rem
=16px
,当然- 前提是 浏览器默认的
font-size
没有被 用户重置- (浏览器默认值 是
16px
,但是 用户定义的首选项 可以修改它)。
- (浏览器默认值 是
- 或者未显式的给
html
元素设置font-size
值
- 前提是 浏览器默认的
- ② 无关 父元素的字体大小:
rem
不关心 父元素的font-size
大小 ,因为 仅相对于 根元素html
标签.
- ①
⑶ ex : x 的高度 (随 font-family , font-size 改变)
-
这个单位表示 元素
font
的x-height
。- 在含有“
X
”字母的 字体中,它是 该字体的 小写字母x
的高度; - 对于很多字体,
1ex ≈ 0.5em
。
- 在含有“
-
ex
单位的 值- 来自 所计算的 字体的
x
高度
- 来自 所计算的 字体的
-
x
高度 的 决定属性font-family
和font-size
,随着 这两个属性 变化.- 换句话说,
ex
= 特定字体 在特定font-size
下的x
高
-
如下图:
-
文档中 没有
x
- 如果在文档中 没有
x
出现,查看小写“o
”的字形 延伸到 基线以下的距离,并从其边界框的顶部 减去该值。 - 在无法确定
x-height
的情况下,必须假设 值为0.5em
。
- 如果在文档中 没有
⑷ ch : 数字 0 的宽度 (随 font-family , font-size 改变)
- 单位
ch
0
的 宽度: 表示 元素所用字体font
中 数字 “0
”这一字形的 宽度(不是字母o
,不要混淆了)- 更准确地说是 “
0
”这一字形的 预测尺寸(advance measure)。
- 更准确地说是 “
- 不能确定
0
的值时:- 在 不能确定“
0
”字形的 测量值的情况下,必须假定它是0.5em
宽1em
高。
- 在 不能确定“
- 关联属性:
- 从字体的
0
字形宽度中 提取它们的值,它还随字体而变化,受font-family,font-size
的影响。 - 而
0
的宽度 通常是 对 字体的 平均字符宽度,这是一个 估计值.
- 从字体的
- 近似等宽的 单位:
- 由于
ch
单位 是一个 近似等宽的一个单位,因此在设置 容器的宽度 有用。- 比如 想让容器 显示 特定数量的 字符串时,就可以使用
ch
单位。
- 比如 想让容器 显示 特定数量的 字符串时,就可以使用
- 由于
1ex
和1ch
1.1.2 视窗的 相对长度
-
视窗的 百分比长度
- 定义 相对于 视窗
viewport
的大小的 长度<length>
值,即 文档的 可见部分(电脑端). - 视口长度在 @page 声明块 中无效。
- 定义 相对于 视窗
-
视窗
- 在 PC 端
- 视窗指的是 浏览器的 可视区域
- 在移动端中, 包括三个视窗:
- 布局视窗(
Layout Viewport
) - 视觉视窗(
Visual Viewport
) - 理想视窗(
Ideal Viewport
)
- 布局视窗(
- 在 PC 端
- 视窗单位中的 视窗 指的是:
- PC 端: 浏览器 可视区域
- 移动端: 布局视窗(Layout Viewport)
⑴ vh : 视窗高度 的 1% (百分之一)
-
视窗高度 的
1/100
。- 等于 视窗 初始包含块的 高度的
1%
。
- 等于 视窗 初始包含块的 高度的
-
延伸阅读: 布局和包含块
⑵ vw :视窗宽度 的 1%(百分之一)
- 视窗宽度 的
1%
。- 等于 视窗 初始包含块的 宽度的
1%
。
- 等于 视窗 初始包含块的 宽度的
⑶ vmin : vw 和 vh 中的 较小值 (宽/高较小值的 百分之一)
- 视窗高度和宽度 之间的最小值的
1%
。 - 等于
vw
和vh
中的 较小值。
⑶ vmax : vw 和 vh 中的 较大值 (宽/高较大值的 百分之一)
- 视窗高度和宽度 之间的最大值的
1%
。- 等于
vw
和vh
中的 较大值。
- 等于
♣ 视窗单位的 计算方法
-
视窗单位的 计算方法
- 浏览器的 高度 =
1000px
1vh
=1000px
/100
=10px
。
- 浏览器的 宽度 =
800px
1vw
=800px
/100
=8px
- 浏览器设置为
1000px
宽、800px
高1vmin
=8px
,1vmax
=10px
。
- 浏览器的 高度 =
-
vh
和vw
- 与 视窗的 高度和宽度 有关
-
vmin
和vmax
- 与 视窗 宽度 / 高度 的 最大值或最小值 有关,取决于 哪个更大和更小。
1.1.3 百分比 单位 (%)
-
百分比 单位:
%
-
百分比单位的 使用位置:
- 和
px
、em
类似,在CSS 中接受长度值的属性 都可以使用%
单位。
- 和
-
相对值 和 参照值:
- ① 百分比是 相对值:
- 百分比 要有 其对应的 参照值,即 百分比值是一种 相对值.
- ② 参照值: 要分析它的 计算值,都需要正确的 找到它的 参照值。
- ③ 值 可变: CSS 中的 百分比单位值 最终计算出来的值 是可变的.
- ① 百分比是 相对值:
⑴ 定位 中的百分比
- 定位中的 百分比
- 在CSS 中 用来控制
position
位置的top
、right
、bottom
和left
都能使用 百分比 作为单位。
- 在CSS 中 用来控制
- 值为 百分比时
- 对应的参照物: 包含块(但 不一定是 其父容器)同方向的
width
或height
计算。
- 对应的参照物: 包含块(但 不一定是 其父容器)同方向的
- 包含块的 确定:
- 在CSS 中
position
对应的属性值 不一样,其 对应的包含块 也将不同 - ① 元素为 静态(
static
)或 相对定位(relative
)- 包含块: 一般是 其父容器
- ② 元素为 绝对定位(
absolute
)- 包含块 : (离它最近的
position
为absolute
、relative
或fixed
的) 祖先元素
- 包含块 : (离它最近的
- ③ 元素为 固定定位(
fixed
)- 包含块: 视窗(
viewport
)
- 包含块: 视窗(
- 在CSS 中
⑵ 盒模型 中的百分比
- 盒模型中的 百分比
- CSS 中 盒模型 对应的属性:
height
、min/max-height
、width
、min/max-height
、padding
、margin
和border
等属性。- 不同的属性 其 对应的参照物 也有所不同。
- ①
height
、min/max-height
属性的值 为百分比时- 其 相对于 包含块的
height
进行计算
- 其 相对于 包含块的
- ②
width
、min/max-width
属性的值 为百分比时- 其 相对于 包含块的
width
进行计算
- 其 相对于 包含块的
- ③
padding
、margin
- 书写模式是 水平的
- 则相对于 包含块的
width
进行计算
- 则相对于 包含块的
- 书写模式是 垂直的
- 则相对于 包含块的
height
进行计算
- 则相对于 包含块的
- 书写模式是 水平的
- CSS 中 盒模型 对应的属性:
⑶ 文本 中的百分比
- 文本中的百分比
- CSS 中 控制文本的属性:
font-size
、line-height
、text-indent
、vertical-align
等。- 不同的属性 其参照物 也是有所不同:
- ①
font-size
- 是基于 父元素中
font-size
进行计算
- 是基于 父元素中
- ②
text-align
- 书写模式是水平的
- 相对于
width
进行计算
- 相对于
- 书写模式是垂直的
- 相对于
height
进行计算
- 相对于
- 书写模式是水平的
- ③
line-height
- 基于
font-size
进行计算
- 基于
- ④
vertical-algin
- 基于
line-height
计算
- 基于
- CSS 中 控制文本的属性:
⑷ 边框 和 圆角 中的百分比
- 边框和圆角中的 百分比
- 使用百分比的 属性:
border-radius
和border-image-width
两个属性上 是可以使用百分比 为单位的。border-width
属性是不支持%
单位的
- 使用百分比的 属性:
- 在
border-radius
中 使用- 圆角的半径: 是通过百分比 来进行计算的
- ① 水平方向的 半径
- 相对于元素宽度
width
计算
- 相对于元素宽度
- ② 垂直方向的 半径
- 相对于元素高度
height
进行计算。
- 相对于元素高度
⑸ 背景 属性中的百分比
- 背景属性中的 百分比
- 可以使用百分比 为单位的 背景属性
background-size
、background-origin
和background-position
属性 都可以使用百分比作为单位。- ①
background-size
的百分比- 基于
background-origin
区域的大小 进行计算。- 可以对 背景图像 进行 缩放处理。
- 基于
- ②
background-position
的百分比- 需要通过 数学公式计算:
- (容器尺寸- 背景图像尺寸)* 百分比值:(各自 乘以百分比 的差值)
- x 偏移值 = (container width - image width) * (position x%)
- y 偏移值 = (container height - image height) * (position y%)
- (容器尺寸- 背景图像尺寸)* 百分比值:(各自 乘以百分比 的差值)
- 需要通过 数学公式计算:
- 可以使用百分比 为单位的 背景属性
⑹ 变换 中的百分比
- 变换中的 百分比
- ①
translateX()
的百分比- 相对于容器的
width
计算
- 相对于容器的
- ②
translateY()
的百分比- 相对于容器的
height
计算
- 相对于容器的
- ③
transform-origin
中- 横坐标(
x
)- 相对于容器的
width
计算;
- 相对于容器的
- 纵坐标(
y
)- 相对于容器的
height
计算
- 相对于容器的
- 横坐标(
translateZ()
: 不接受 百分比为单位的值。
- ①
♣ 百分比值的 继承
- 当百分比值 用于 可继承属性时
- 只有 结合参照值 计算后的绝对值 会被继承,而不是 百分比值本身。
- 一个元素的
font-size:20px
,并定义了line-height:150%;
- 该元素的 下一级子元素 继承到的
line-height
=20px
*150%
=30px
- 不会 再和 子元素自己的
font-size
有关。
- 该元素的 下一级子元素 继承到的
1.2 绝对长度单位
-
绝对 长度单位
- 绝对长度单位: 表示 在 已知输出媒体的 物理属性 (如打印布局)时的 物理测量。
- 这是通过 将一个单元锚 定到一个物理单元,然后定义 与之相关的其他单元 来实现的.
- 对于 低分辨率设备(如屏幕) 和 高分辨率设备(如打印机),锚点的作用 是不同的。
- 绝对长度单位: 表示 在 已知输出媒体的 物理属性 (如打印布局)时的 物理测量。
-
对于低
dpi
设备: 单位px
表示 物理参考像素- 其他单位是 相对于它 定义的。
- 因此,
1in
定义为96px
,等于72pt
。
- 因此,
- 这个定义的结果是,在这样的设备上,以英寸(
in
)、厘米(cm
)或毫米(mm
)表示的尺寸, 不一定与 相同名称的 物理单元的大小 匹配。
- 其他单位是 相对于它 定义的。
-
对于高
dpi
设备: 英寸(in
)、厘米(cm
)和毫米(mm
)与 物理设备相同。- 因此,
px
单位 是相对于它们定义的(1/96
英寸)。 - 许多用户 增加他们的用户代理的 默认字体大小,使文本 更清晰。
- 因此,
-
绝对长度 会导致 可访问性问题,因为它们是 固定的,不根据 用户设置 伸缩。
- 因此,在设置 字体大小时,最好选择 相对长度(如
em
或rem
)。
- 因此,在设置 字体大小时,最好选择 相对长度(如
⑴ px : 像素
- 一个像素。
- 对于 屏幕显示,它通常表示 一个设备像素(点)。
- 然而,对于打印机和高分辨率屏幕,一个CSS像素 意味着 多个设备像素。
1px
= 1英寸的1/96
=1in / 96
。
⑵ cm : 厘米 ( 1/2.54 in , 38px)
- 1厘米。
1cm
=96 px / 2.54
≈38px
。- One centimeter, 美 /'sɛntə,mitɚ/
⑶ mm : 毫米 (1/25.4 in, 3.8px)
- 一毫米.
1mm
=1cm / 10
≈3.8px
.(一厘米的 十分之一)- One millimeter , 美 /ˈmɪlimiːtər/
⑷ in : 英寸 ( 1in = 96px ,2.54cm)
- 一英寸
- One inch , 美 /ɪntʃ/
1in
=2.54cm
=96px
.
⑸ pc : 派卡 ( 1/6 in ,12pt, 16px)
- 12 点 活字 (1 pc 等于 12 点)
- One pica , 美 /ˈpaɪkə/
1pc
=12pt
=1in / 6
=96px
/6
=16px
.- 派卡(Pica),绝对长度单位。相当于 我国 新四号铅字的尺寸。
- 铅字: 用铅、锑、锡合金铸成的 印刷或打字 用的活字。
⑹ pt : 点 (显示器上 一个个的点,1/72 in,1.3px)
- 磅(1/72 英寸)
- One point.
1pt
=1in / 72
.- 点(Point),指设备 能控制显示的 最小 物理单位,显示器上 一个个的点。
- 从屏幕 在工厂生产出的那天起,它上面 设备像素点 就固定不变了,和 屏幕尺寸大小 有关。
♣ CSS 绝对单位的 换算关系
- 1in = 96px
- 1in = 2.54cm
- 1in = 25.4mm
- 1in = 72pt
- 1in = 6pc
- 1pc = 12pt
♣ 长度单位的 浏览器支持
- 长度单位的 浏览器支持
2. 时间单位 (s , ms)
- 时间单位
- CSS 中 两个常见的 时间单位
- ① 秒(
s
) - ② 毫秒(
ms
) - 换算:
1s
=1000ms
。
- ① 秒(
- CSS 中 两个常见的 时间单位
- 搭配属性: 常用于 CSS 中
transition-duration
、transition-delay
、animation-duration
和animation-delay
属性中。
3. 频率单位 (Hz , kHz)
- 频率值的 使用位置: 在 听(或说)级联样式表中 使用.
- 频率的 两个单位值
- ① 赫兹(Hz)
- ② 千赫(kHz)
- 频率的作用
- 可以被用来 改变一个 语音阅读文本的 音调。
- 低频率是 低音
- 高频率是 高音
- 可以被用来 改变一个 语音阅读文本的 音调。
4. 角度单位 (deg,rad,grads,turn)
- ⑴ 角度:
deg
- 角度最常用的 用法
- ① 设置 旋转角度:
- 在CSS 中 给 旋转元素 设置一个旋转角度(度数),依赖于 CSS 的
transform
属性中的rotate()
,skew()
函数等
- 在CSS 中 给 旋转元素 设置一个旋转角度(度数),依赖于 CSS 的
- ② 渐变中的角度:
linear-gradient(260deg,red,blue)
0deg
=to top
- 角度缺省的默认值:
to bottom
=180deg
- ① 设置 旋转角度:
- 角度最常用的 用法
- ⑵ 百分度(
grads
):- 一个分度,百分度 相对于 1/400 个整圆
- 跟角度单位一样,支持负值
- 负值表示逆时针方向,
100grad
=90deg
- 负值表示逆时针方向,
-
⑶ 弧度(
rad
):- 在
Canvas
中 用到弧度1rad
=180/π °
(大约为57.3deg
)1.570796326794897rad
=100grad
=90deg
rad
= (π / 180
) *deg
deg
= (rad * 180
) /π
- 在
-
⑷ 圈数(
turn
):1turn
=360deg
♣ 结束语 和 友情链接
- 捐助: 喜欢这篇文章吗? 持续更新中,捐助此文,向团团 表示鼓励和支持吧~❤
- 捐助二维码:
- 参考文章
- CSS 长度数据类型
<length>
| MDN - CSS 单位 | 菜鸟教程
- CSS 单位
- CSS 常用单位
- CSS 长度数据类型
- 感谢:♥♥♥ 如果这篇文章 对您有帮助的话,可以点赞、评论、关注,鼓励下作者哦,感谢阅读 ~
- 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮( ̄▽ ̄)╭
- 转载 请注明出处 ,Thanks♪(・ω・)ノ
- 作者:Hey_Coder
- 来源:CSDN
- 原文:https://blog.csdn/VickyTsai/article/details/102960594
- 版权声明:本文为博主原创文章,转载请附上博文链接!
更多推荐
【CSS 单位 (详细介绍)】
发布评论