【CSS 单位 (详细介绍)】
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 字体的 相对长度
- 字体相对长度
- 根据 当前在元素 或 其父元素中 有效的字体中的 特定字符或字体属性的大小 来定义长度
- 根据 当前在元素 或 其父元素中 有效的字体中的 特定字符或字体属性的大小 来定义长度
- 注意:这些单位，特别是
em和rem，通常用于 创建 可伸缩的布局，即使用户 更改字体大小，这些布局 也能保持页面的 垂直节奏。- 垂直节奏: 读者向下阅读时 文本的间距和排列——由三个因素决定:字体大小、行高和页边距或填充。所有这些因素必须小心计算，以保持节奏。
⑴ em : (相对于 当前元素本身的 )字体大小 font-size 的倍数
- 相对 长度单位
em= 元素的 字体大小font-size的计算值。1.5em=1.5xfont-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: 16pxbody的 字体大小 =1.5em=1.5x 浏览器 默认字体大小 =1.5x16px=24pxh3的字体大小 =1.5em=1.5xbody的字体大小 =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=2x10px=20px
- 因为,此时 元素
h3的字体大小,此元素 自己设置的 =20px- 重点:
h3的 左内边距的 大小padding-left的单位是em- 它的大小 不是相对于 父元素
div的倍数 - 而是 相对于 元素自身
h3的 字体大小font-size: 20px;的 倍数padding-left的大小 =2em=2x20px=40px(如果是 从父元素div继承,应该是20px,但并不是.)
- 它的大小 不是相对于 父元素
- 重点:
⑵ rem : (根元素 html 标签的) 字体大小 font-size 的倍数
-
rem= 根元素的字体大小。- 当在根元素
font-size中使用时- 表示它的 初始值.
- 当在根元素
-
相对于 根元素
的 字体大小:rem仅仅是 相对于 根元素的 字体大小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 改变)
- 单位
ch0的 宽度: 表示 元素所用字体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的大小的 长度 - 视口长度在 @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中的 较大值。
- 等于
♣ 视窗单位的 计算方法
-
视窗单位的 计算方法
- 浏览器的 高度 =
1000px1vh=1000px/100=10px。
- 浏览器的 宽度 =
800px1vw=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=90degrad= (π / 180) *degdeg= (rad * 180) /π
- 在
-
⑷ 圈数（
turn）：1turn=360deg
♣ 结束语 和 友情链接
- 捐助: 喜欢这篇文章吗? 持续更新中,捐助此文,向团团 表示鼓励和支持吧~❤
- 捐助二维码:
- 参考文章
- CSS 长度数据类型
- CSS 单位 | 菜鸟教程
- CSS 单位
- CSS 常用单位
- CSS 长度数据类型
- 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
- 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭
- 转载 请注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/102960594
- 版权声明：本文为博主原创文章，转载请附上博文链接！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！