文章目录
- [1. CSS3 长度单位汇总](#1. CSS3 长度单位汇总)
-
- [1.1 基础单位回顾](#1.1 基础单位回顾)
- [1.2 视口单位：vw、vh、vmax、vmin](#1.2 视口单位：vw、vh、vmax、vmin)
- [1.3 常见问题：vw / vh 的继承规则](#1.3 常见问题：vw / vh 的继承规则)
- [2. 背景属性（Background）](#2. 背景属性（Background）)
-
- [2.1 基础属性回顾](#2.1 基础属性回顾)
- [2.2 实践思考：一张大图做背景会遇到什么问题？](#2.2 实践思考：一张大图做背景会遇到什么问题？)
- [2.3 背景图片的三个属性](#2.3 背景图片的三个属性)
-
- [2.3.1 背景图片的起始点------background-origin](#2.3.1 背景图片的起始点——background-origin)
- [2.3.2 背景裁剪区域（向外裁剪）------background-clip](#2.3.2 背景裁剪区域（向外裁剪）——background-clip)
- [2.3.3 背景图片尺寸------background-size](#2.3.3 背景图片尺寸——background-size)
- [2.3.4 属性的本质和区别](#2.3.4 属性的本质和区别)
- [2.4 复合background](#2.4 复合background)
- [3. 盒子模型相关属性](#3. 盒子模型相关属性)
-
- [3.1 怪异盒模型------box-sizing](#3.1 怪异盒模型——box-sizing)
- [3.2 调整盒子大小------resize](#3.2 调整盒子大小——resize)
- [3.3 设置盒子阴影------box-shadow](#3.3 设置盒子阴影——box-shadow)
- [3.4 设置不透明度------opacity](#3.4 设置不透明度——opacity)
- [3.5 设置圆角------ border-radius](#3.5 设置圆角—— border-radius)
- [4. 文本属性](#4. 文本属性)
-
- 4.1文字阴影------text-shadow
- [4.2 控制换行与空白------white-space](#4.2 控制换行与空白——white-space)
- [4.3 溢出文本处理------text-overflow](#4.3 溢出文本处理——text-overflow)
- [5. 补充小知识](#5. 补充小知识)
-
- [5.1 CSS3 私有前缀](#5.1 CSS3 私有前缀)
- [5.2 CSS 像素 px 与系统缩放的关系](#5.2 CSS 像素 px 与系统缩放的关系)
1. CSS3 长度单位汇总
回顾 ：之前我们学习过 px、em、rem、%，并了解到 em、rem、% 继承的是计算后的数值，而非相对关系本身。
详细可参考 ：【前端(三)】CSS 属性梳理：从字体文本到背景表格
本小节介绍新增：vw、vh、vmax、vmin。
1.1 基础单位回顾
| 单位 | 说明 | 实际运用场景 |
|---|---|---|
| px | CSS 逻辑像素，浏览器根据设备像素比DPR决定用几个物理像素显示 1 个 px。 | 最常用，适合固定尺寸。 |
| em | 相对当前元素 的 font-size。若用于 font-size 本身，则相对父元素的 font-size。 | 适合需要根据当前字号缩进的场景（如段落首行缩进 2em）。 |
| rem | 相对根元素（<html>）的 font-size。 | 移动端响应式常用，统一控制全局缩放比例。 |
| % | 相对父元素对应属性 的百分比。例如 width:50% 相对父元素内容区宽度； 注意：line-height:150% 相对当前元素的 font-size。 | 流式布局、自适应高度/宽度。 |
1.2 视口单位：vw、vh、vmax、vmin
| 单位 | 相对于 | 实际运用场景 |
|---|---|---|
| vw | 视口宽度的百分之多少 | 全屏宽度元素、大标题随视口缩放 |
| vh | 视口高度的百分之多少 | 全屏高度容器、弹窗居中 |
| vmax | max(视口宽, 视口高) 的 百分之多少 | - |
| vmin | min(视口宽, 视口高) 的 百分之多少 | - |
注意事项：
- vw / vh 是长度单位，代表长度结果分别相对于视口的宽或者高，并不意味着它们只限于只是宽属性或者只是高属性。例如：vw可以用于width也可以用于height；font-size: 4vw 也可以让文字随视口宽度变化。
- vw 在移动端更常用，因为移动端布局通常依赖视口宽度；PC 端使用 vw 可能导致超大屏幕下元素过度放大，通常结合 max-width 限制。
- vmin和vmax可以了解，很少会使用。
1.3 常见问题：vw / vh 的继承规则
问题 ： vw、vh 继承时是只继承数值还是保持相对关系？
答案 ：无论是 em、rem、vw、vh 还是 %，所有相对单位被继承时，子元素得到的都是计算后的绝对数值（像素值），而不是原来的相对单位。
例如：父元素 width: 50vw; font-size: 2rem; 子元素获得的是计算出的实际像素值，而不是 50vw 这个相对单位。假设视口宽度为 1000px，根字体 16px，父元素的width就是500px，子元素得到的也是500px，而不是50vw；父元素的font-size为32px，子元素得到的也是32px，而不是2rem。
2. 背景属性（Background）
2.1 基础属性回顾
| CSS 属性 | 功能 | 常用值 |
|---|---|---|
| background-color | 背景颜色 | 颜色值 / transparent （默认） |
| background-image | 背景图片 | url(...) |
| background-repeat | 重复方式 | repeat（默认）、no-repeat、repeat-x、repeat-y |
| background-size | 图片尺寸 | cover、contain、长度、百分比 |
| background-position | 图片位置 | 关键字（left top）、坐标值（10px 20px） |
| background | 复合属性 | 可简写多个值 |
2.2 实践思考：一张大图做背景会遇到什么问题？
有一张如图所示的 1024×1024 的图片，想把它作为 333×444 盒子的背景，默认会怎样？如何控制？
初始代码如下：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景实践</title>
<style>
div {
width: 333px;
height: 444px;
padding: 10px;
border: 10px dotted brown;
background-color: pink;
background-image: url(./小羊piano.jpeg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
初始默认表现：
- 虚线边框区域也有背景图片 ：background-clip 默认为 border-box → 背景图会被绘制到边框区域，包括虚线部分；同时 background-repeat 默认为 repeat → 图片在边框区域也会平铺，所以上下左右虚线都能看到图片碎片。
- 图片只显示了左上角的一部分 ：background-size 默认为 auto → 使用图片原始尺寸远大于盒子内容区；background-position 默认为 0% 0%（左上角）→ 只显示了图片的左上角区域。
- 图片开始显示位置 ：默认从 padding 区域左上角开始，background-origin默认为 padding-box。
所以我们需要解决三个问题：
| 问题 | 对应控制属性 |
|---|---|
| ① 虚线边框上也有图片 → 让边框干净 | background-clip |
| ② 图片只显示一部分 → 让完整图片适配盒子 | background-size |
| ③ 图片起始位置不对 → 调整显示起点 | background-origin |
2.3 背景图片的三个属性
2.3.1 背景图片的起始点------background-origin
- padding-box （默认）：从 padding 区域左上角开始显示
- border-box：从 border 区域左上角开始显示
- content-box：从 content 区域左上角开始显示
2.3.2 背景裁剪区域（向外裁剪）------background-clip
- border-box （默认）： 从 border 区域开始向外裁剪背景。
- padding-box ： 从 padding 区域开始向外裁剪背景。
- content-box ： 从 content 区域开始向外裁剪背景。
2.3.3 背景图片尺寸------background-size
- 用长度值指定背景图片大小，不允许负值。
- 用百分比指定背景图片大小，不允许负值。
- auto （默认）：背景图片的真实大小。
- contain ： 将背景图片等比缩放，直到图片完整显示在容器内，可能留白。
- cover （推荐）：将背景图片等比缩放，直到完全覆盖容器，可能显示不完整。
如图所示是contain ：
如图所示是cover ：
2.3.4 属性的本质和区别
问题 1 ：position的设置也影响图片的起始位置啊？和origin的区别是？到底谁决定位置？
答案：共同决定，origin 定原点，position 给偏移
- background-origin 决定坐标原点的位置，即 (0,0) 这个点放在元素的哪个区域。
- background-position 决定图片左上角相对于原点的偏移量。
解释 ：origin 不直接决定图片显示位置，它决定的是坐标原点。因为 position 默认是 0 0，所以图片左上角会正好落在原点上。
此时看起来像是 origin 决定了图片的起点。
但是，一旦你改了 position，图片就会相对于原点进行偏移，不再贴在 origin 区域的左上角。所以position和origin相关联，即position的参考系是谁提供的？是 origin 提供的。
示例：（此刻选中的蓝色区域是content，便于观察）
- 如图是没有设置origin和position的默认情况，即padding-box和0 0。
- 如图是设置了origin为conten-box，position仍为默认0 0 的情况。
- 如图是设置了origin为conten-box，position为默认10px 10px 的情况。
所以origin 定原点，position 给偏移，position的偏移是相对于原点来说的。
当又尝试no-repeat，随之而来的可能有如下疑惑
问题 2 ：那不就是origin定义显示范围，position定义具体的显示位置，cilp不是也影响图片显示范围？
答案：问题本身答案已经呼之欲出了。origin改变的是位置，不会影响到图片是否显示范围的问题，只是no-repeat后通过调整位置，视觉看起来我们边框或者padding不显示图片；clip不会改变位置，而是把超出部分隐藏，从而限制了显示范围。
示例：（此刻选中的蓝色区域是content，便于观察）
- 如图是设置了origin为conten-box的情况。
- 如图是设置了clip为content-box的情况。
2.4 复合background
语法：
css
background: [color] [image] [repeat] [position] / [size] [origin] [clip];关键规则：
- size 必须紧跟在 position 后面，用 / 分隔。想写 size 就得有斜杠，斜杠前可以空（位置默认 0 0）但是不可以不写斜杠直接写数值会被认成position。
css
/* ✅ 只写 size，位置使用默认值 (0% 0%) */
.box {
background: url(bg.png) / cover no-repeat;
}
/* ✅ 同样效果，显式写位置 0 0 */
.box {
background: url(bg.png) 0 0 / cover no-repeat;
}
/* ❌ 缺少斜杠：cover 会被当成 position，然后报错或忽略 */
.box {
background: url(bg.png) cover no-repeat;
}- 没写的属性使用默认值。
- 可以添加多背景设置相关属性（background-color 只能有一个，它属于最底层，推荐单独设置），用逗号分隔，第一个背景图在上层。
注意：可以分开写属性达到复合的多个背景图的效果，但是要么只用简写，要么只用分离属性，不要混用 。如果混用，把简写写在前面 ，分离属性写在后面（因为简写其余属性使用默认值，样式冲突后面的会覆盖前面的）。
css
/* 简写 */
.box {
background: url(top.png) no-repeat top left / 50px,
url(bottom.png) repeat-x bottom / auto,
linear-gradient(red, blue);
}
/* 分离属性（等价） */
.box {
background-image: url(top.png), url(bottom.png), linear-gradient(red, blue);
background-repeat: no-repeat, repeat-x, no-repeat; /* 第三层默认 repeat，这里显式写 */
background-position: top left, bottom, 0% 0%;
background-size: 50px, auto, auto;
}3. 盒子模型相关属性
3.1 怪异盒模型------box-sizing
| 值 | 含义 | 宽度计算 |
|---|---|---|
| content-box（默认） | width 只设置内容区宽度 | 总宽度 = width + padding + border 每次加 padding / border，需要重新计算 width，否则盒子会变大。 |
| border-box | width 设置盒子总宽度 | 总宽度 = width（内含 padding 和 border） 加 padding / border 不会撑破父容器 |
实际开发中，很多项目会做全局重置，让所有元素使用 border-box，避免手动计算宽度溢出。
css
* {
box-sizing: border-box;
}3.2 调整盒子大小------resize
| 值 | 效果 |
|---|---|
| none | 不可调整（默认） |
| both | 可调宽高 |
| horizontal | 仅调宽 |
| vertical | 仅调高 |
实际运用场景： 文本输入框、自定义可拖拽面板。
重要限制：
resize 生效的前提是 overflow 不为 visible
原因：resize 改变元素尺寸 → 可能引发内容溢出 → 但 overflow:visible 对溢出内容的行为是"放任不管"。这两者放在一起，会让浏览器无法决定到底该怎么表现。这样会导致页面布局被破坏，内容乱飞。为了让 resize 行为可控、可预测，设计者规定：只有当 overflow 不是 visible 时，resize 才生效。
3.3 设置盒子阴影------box-shadow
语法：
css
box-shadow: h-shadow v-shadow blur spread color inset;| 参数 | 含义 | 负值 | 默认 |
|---|---|---|---|
| h-shadow | 必选，水平偏移（正→右，负→左） | ✅ | 0 |
| v-shadow | 必选，垂直偏移（正→下，负→上） | ✅ | 0 |
| blur | 可选，模糊半径（越大越模糊、越淡） | ❌ | 0 |
| spread | 可选，扩展半径（正→扩大，负→缩小） | ✅ | 0（与盒子同大） |
| color | 可选，阴影颜色 | - | 黑色半透明（通常） |
| inset | 可选，关键字：内阴影 | - | 无（默认外阴影） |
注意：如果只写三个数值，就会按顺序识别对应参数，如果想设置外延值（扩展半径）可以用0来占位模糊半径。
核心特性：阴影不占布局空间，不影响盒模型。 其他盒子可以覆盖阴影，阴影不参与布局排列。
常见应用：
- 外阴影：卡片悬浮效果
- 内阴影：模拟边框压暗效果
加入 inset 后，各参数的行为变化
| 参数 | 外阴影（默认） | 内阴影（inset） |
|---|---|---|
| h-shadow | 正→阴影右移 | 正→阴影向右移动（但方向可能视觉上相反，因为阴影在内部） |
| v-shadow | 正→阴影下移 | 正→阴影向下移动 |
| blur | 向外模糊 | 向内模糊（边缘向中心渐变） |
| spread | 正→阴影向外扩大；负→阴影向内缩小 | 正→阴影向内 扩大（更靠近中心）；负→阴影向外缩小（更靠近边缘） |
所以可以理解inset 与负 spread 的区别：
inset 改变阴影的位置（内部 vs 外部）会影响内部显示；负外延只改变阴影的大小，依然在外部，影响的是外部显示，不会对内部显示有任何的影响。
3.4 设置不透明度------opacity
opacity 属性能为整个元素添加透明效果，值是 0 到 1 之间的小数， 0 是完全透明，1 表示完全不透明。
opacity 与 rgba 的区别：
| 属性 | 作用范围 | 是否影响子元素 |
|---|---|---|
| opacity | 整个元素（包括所有子元素） | 是（所有内容都透明） |
| rgba / hsla | 仅当前颜色 | 否（只影响该颜色属性） |
示例：
css
/* 整个盒子半透明，文字也半透明 */
.box { opacity: 0.5; }
/* 背景半透明，文字不透明 */
.box { background-color: rgba(0,0,0,0.5); }3.5 设置圆角------ border-radius
| 常用实现 | 代码 |
|---|---|
| 四个角一样 | border-radius: 10px; |
| 圆形 | border-radius: 50%; |
| 椭圆 | border-radius: 50% / 20%; |
也可以设置四个角不同的值
- 单独设置四个角：border-top-left-radius 等
- 简写语法：border-radius: 左上 右上 右下 左下 / 左上y 右上y 右下y 左下y
4. 文本属性
4.1文字阴影------text-shadow
语法：
css
text-shadow: h-shadow v-shadow blur color;- 与 box-shadow 相比：没有 spread、没有 inset，不能内阴影。
- 可叠加多个阴影，用逗号分隔。
4.2 控制换行与空白------white-space
| 值 | 自动换行 | 合并空白 | 保留换行符 | 典型场景 |
|---|---|---|---|---|
| normal | ✅ 是 | ✅ 是 | ❌ 否 | 普通段落（默认） |
| nowrap | ❌ 否 | ✅ 是 | ❌ 否 | 单行标题、导航栏 |
| pre | ❌ 否 | ❌ 否 | ✅ 是 | 代码块（需配合滚动） |
| pre-wrap | ✅ 是 | ❌ 否 | ✅ 是 | 保留格式的长文本（聊天记录） |
| pre-line | ✅ 是 | ✅ 是* | ✅ 是 | 诗歌、地址（保留换行，忽略多余空格） |
*pre-line 的"合并空白"是指连续空格合并为一个，且忽略行首行尾空格。
示例：
- normal 文本超出边界自动换行，文本中的多个连续空格和换行被识别为一个空白（默认值）
- nowrap 强制不换行，文本中多个连续空格和换行也被识别为一个空白。
- pre 原样输出不会换行。会识别书写代码中的空白，会保留全部空白和换行。
- pre-wrap 在 pre 效果的基础上，超出元素边界自动换行。同样会识别书写代码中的空白，会保留全部空白和换行。
- pre-line在 pre 效果的基础上，超出元素边界自动换行，且只识别文本中的换行和空白，文本前后端的空格不识别，会忽略。
4.3 溢出文本处理------text-overflow
当文本内容超出块级容器的尺寸时，决定溢出部分如何显示
| 值 | 效果 | 说明 |
|---|---|---|
| clip | 直接裁剪溢出部分 | 默认值，无省略号，简单粗暴 |
| ellipsis | 显示省略号 ... | 在溢出位置替换为 ... ，只是视觉上被替换成 ...，实际内容完整，复制粘贴仍能得到完整文本 |
⚠️ text-overflow 生效的前提条件（
css
/* 必须同时满足以下两点，text-overflow 才会生效 */
selector {
width: 200px;
overflow: hidden; /* 1. overflow 不是 visible（常用 hidden / auto / scroll） */
white-space: nowrap; /* 2. 强制文本在一行内显示 */
}
- 为什么必须是 white-space: nowrap？
因为如果文本自动换行（normal），溢出的情况通常不会发生（会自动折行），text-overflow 也就没有机会触发。只有强制不换行，文本才会真正溢出盒子。- 为什么必须设置overflow？
我们要设置overflow为非visible值，这样我们就可以设置文本溢出的隐藏效果是全部裁掉还是替换成...不然visible就没有意义。原理同resize。
实际运用： 新闻标题列表、商品名称单行截断等，适合列表项。
5. 补充小知识
5.1 CSS3 私有前缀
知识点 核心结论 HTML5 兼容性 IE9+ 大部分支持，IE8 及以下需采取一些措施 CSS3 兼容性 CSS3 是模块化的，不同属性在不同浏览器上的兼容性各不相同 查询 CSS3 兼容性的网站：https://caniuse.com/
- 历史原因 ：当W3C标准提出某个CSS特性时，在被当前浏览器正式支持之前，会根据浏览器内核使用私有前缀来测试这个css特性，测试之后该浏览器支持了这个特性后，就不需要私有前缀了。即：浏览器在标准未定稿时，用私有前缀实验新特性。
- 常见前缀 ：
- -webkit-：Chrome、Safari、Edge
- -moz-：Firefox
- 如今现代项目通常借助构建工具自动添加，无需手动记忆，并且常用的 CSS3 新特性，主流浏览器都是支持的。
5.2 CSS 像素 px 与系统缩放的关系
公式： 显示的物理像素数 = CSS 像素值 × DPR × 系统缩放 × 浏览器缩放。
- CSS 中声明的
px数值本身不会改变 （例如width:200px始终是逻辑 200）。 - 系统缩放（如 Windows 显示设置 125%）会改变系统缩放改变的是"1个CSS逻辑像素对应多少个物理像素"的映射关系 ，从而产生视觉上的放大/缩小效果。但是 CSS 中声明的 px 数值本身不会改变，它始终是 200（逻辑像素）。
以上为个人学习总结，旨在梳理个人理解。如有疏漏或不当之处，欢迎指正与交流。