【CSS 单位 (详细介绍)】

最新推荐文章于 2024-04-29 19:50:43 发布

Hey_Coder

最新推荐文章于 2024-04-29 19:50:43 发布

阅读量2.4k

点赞数 7

分类专栏：【CSS】文章标签： css单位相对长度单位绝对长度单位百分比单位详解 css单位详解

本文链接：https://blog.csdn.net/VickyTsai/article/details/102960594

版权

【CSS】专栏收录该内容

28 篇文章 3 订阅

订阅专栏

CSS 单位

1. 长度单位
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 x font-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

<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 x body的字体大小 = 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 x 10px = 20px
h3的字体大小,此元素自己设置的 = 20px
- 重点: h3的左内边距的大小
  - padding-left 的单位是 em
    - 它的大小 不是相对于父元素 div的倍数
    - 而是 相对于元素自身h3的字体大小font-size: 20px;的倍数
      - padding-left的大小 = 2em = 2 x 20px = 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 端: 浏览器 可视区域
- 移动端: 布局视窗（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 都能使用百分比作为单位。
值为百分比时
- 对应的参照物: 包含块（但不一定是其父容器）同方向的 width或 height 计算。

包含块的确定:
- 在CSS 中 position 对应的属性值不一样，其对应的包含块也将不同
- ① 元素为静态（static）或 相对定位（relative）
  - 包含块: 一般是 其父容器
- ② 元素为绝对定位（absolute）
  - 包含块 : (离它最近的 position为 absolute、relative 或 fixed 的) 祖先元素
- ③ 元素为固定定位（fixed）
  - 包含块: 视窗（viewport）

⑵ 盒模型中的百分比

盒模型中的百分比
- 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 中控制文本的属性: font-size、line-height、text-indent、vertical-align 等。
  - 不同的属性其参照物也是有所不同：
  - ① font-size
    - 是基于父元素中 font-size 进行计算
  - ② text-align
    - 书写模式是水平的
      - 相对于 width 进行计算
    - 书写模式是垂直的
      - 相对于 height 进行计算
  - ③ line-height
    - 基于 font-size 进行计算
  - ④ vertical-algin
    - 基于 line-height 计算

⑷ 边框和圆角中的百分比

边框和圆角中的百分比
- 使用百分比的属性:
  - 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 中 transition-duration、transition-delay、animation-duration 和 animation-delay 属性中。

3. 频率单位 (Hz , kHz)

频率值的使用位置: 在听（或说）级联样式表中使用.
频率的两个单位值
- ① 赫兹（Hz）
- ② 千赫（kHz）
频率的作用
- 可以被用来改变一个语音阅读文本的音调。
  - 低频率是低音
  - 高频率是高音

4. 角度单位 (deg,rad,grads,turn)

⑴ 角度: deg
- 角度最常用的用法
  - ① 设置旋转角度:
    - 在CSS 中给旋转元素设置一个旋转角度（度数），依赖于 CSS 的 transform 属性中的rotate()，skew() 函数等
  - ② 渐变中的角度: 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

♣ 结束语和友情链接

捐助: 喜欢这篇文章吗? 持续更新中,捐助此文,向团团表示鼓励和支持吧~❤
捐助二维码:

参考文章

感谢：♥♥♥ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
欢迎指正: 如果发现有需要更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

转载请注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/102960594
- 版权声明：本文为博主原创文章，转载请附上博文链接！

在这里插入图片描述

Hey_Coder

关注

7
点赞
踩
42

收藏

觉得还不错? 一键收藏
3
评论
【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% (百分之一)
复制链接

扫一扫