如果说前两天是在“认识 CSS”，
那第三天开始，你就真正走进了 网页布局的核心世界。今天只有两个关键词：
规则 和 盒子。
一、CSS 三大特性
CSS 之所以“看起来简单，实际容易乱”，
核心原因就是它有 三大特性 在背后悄悄生效：
层叠性 · 继承性 · 优先级
1️⃣ 层叠性（解决样式冲突）
什么是层叠性？
相同选择器，设置了相同样式，后面的会覆盖前面的
p {
color: red;
}
p {
color: blue;
}
最终效果 👉 blue
层叠性原则
- 样式冲突 👉 就近原则
- 样式不冲突 👉 不会层叠
📌 可以简单理解为：
“离标签近的样式说了算”
2️⃣ 继承性（少写代码的关键）
什么是继承？
子元素可以继承父元素的部分样式
常见可继承属性：
colorfont-*text-*line-*
📌 口诀记忆：
龙生龙，凤生凤，老鼠生的孩子会打洞
行高的继承
body {
font: 12px/1.5 Microsoft YaHei;
}
说明：
1.5是 倍数行高- 子元素如果没写行高，会继承
1.5 - 实际行高 = 当前文字大小 × 1.5
👉 这是一种非常推荐的写法
可以让不同字号的文本自动拥有合适的行高。
3️⃣ 优先级
当一个元素被多个选择器选中时，
就要靠 优先级（权重） 决定谁生效。
权重简单记忆版 ⭐⭐⭐
| 选择器 | 权重 |
|---|---|
* / 继承 | 0 |
| 标签选择器 | 1 |
| 类 / 伪类 | 10 |
| ID | 100 |
| 行内样式 | 1000 |
!important | 无穷大 |
📌 核心规则：
- 不进位
- 从左往右比
- 谁大听谁的
权重叠加示例
div ul li → 0,0,0,3
.nav ul li → 0,0,1,2
a:hover → 0,0,1,1
⚠️ 注意一个常见误区：
继承的权重是 0
父元素再牛，也不能“帮子元素抢权重”
二、盒子模型
1️⃣ 网页布局的本质
一句话总结：
网页布局 = 摆盒子
流程永远是：
- 准备 HTML 元素（盒子）
- 用 CSS 设置大小和位置
- 往盒子里装内容
2️⃣ 盒子模型的组成
一个标准盒子包含四部分：
content + padding + border + margin
也就是：
- 内容（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
📌 所有布局问题，本质都是盒子问题
3️⃣ 边框 border
基本写法
border: 1px solid red;
等价于：
border-width: 1px;
border-style: solid;
border-color: red;
常见边框样式：
solid实线 ⭐dashed虚线dotted点线
表格细线边框
border-collapse: collapse;
作用：
把相邻边框合并成一条线
边框对盒子大小的影响
⚠️ 边框 会撑大盒子
解决思路：
- 量尺寸时不算边框
- 或者：
width / height减去边框宽度
4️⃣ 内边距 padding
padding 的作用
控制 内容与边框之间的距离
padding: 20px;
padding: 10px 20px;
padding 是否撑大盒子？
分两种情况：
1️⃣ 盒子有 width / height
👉 padding 会撑大盒子
2️⃣ 盒子没写 width / height
👉 padding 不会撑大盒子
📌 新手非常容易踩这个坑！
5️⃣ 外边距 margin
margin 的作用
控制 盒子与盒子之间的距离
块级元素水平居中
.box {
width: 300px;
margin: 0 auto;
}
条件：
- 必须是块级元素
- 必须有宽度
外边距合并
① 相邻块元素合并
上下两个块：
- 取 较大的 margin
- 不会相加
👉 解决方案：
只给一个盒子设置 margin
② 父子嵌套塌陷
子元素的 margin-top 会“顶”父元素
解决方案（三选一）：
/* 方案 1 */
border-top: 1px solid transparent;
/* 方案 2 */
padding-top: 1px;
/* 方案 3（常用） */
overflow: hidden;
6️⃣ 清除默认内外边距（项目必写）
* {
margin: 0;
padding: 0;
}
📌 注意：
- 行内元素尽量只设置左右 margin / padding
- 或者先转成
inline-block
三、PS 基础操作
虽然我们是前端，但 离不开 PS。
常用操作：
Ctrl + R：显示标尺- 单位改为像素
Ctrl + + / -：缩放- 空格拖动画布
- 选区测量尺寸
Ctrl + D取消选区
📌 切图 ≠ 设计，但一定要会量尺寸
🧠 总结
CSS 第三天，本质上是在告诉你三件事：
1️⃣ 样式为什么会生效（规则）
2️⃣ 页面为什么会乱（权重 + 盒子）
3️⃣ 布局到底在干嘛（摆盒子）
CSS 不难，难的是不理解规则就开始写。
