一、章节核心概括

本章是 CSS 的核心底层逻辑与布局基石，三大特性决定了 CSS 样式的生效规则，是解决样式冲突、理解样式继承的核心；盒子模型是所有 HTML 元素的布局载体，网页的所有布局本质上都是盒子的排列与摆放；圆角与阴影则是实现元素精细化视觉效果、提升页面质感的核心属性，是 CSS 从基础布局到视觉美化的关键。

二、核心知识点拆解与分析

1. CSS 三大核心特性

CSS 的三大特性是层叠性、继承性、优先级，是所有 CSS 样式生效的底层规则，所有样式冲突、样式继承的问题，都可以通过三大特性来解释和解决。

（1）层叠性

层叠性指的是：当多个选择器匹配到同一个元素，且设置了相同的 CSS 属性时，浏览器会按照规则决定哪个样式最终生效，覆盖其他冲突的样式。

• 核心规则：样式冲突时，遵循就近原则，优先级高的样式会层叠掉优先级低的样式；优先级相同时，后面写的样式会层叠前面写的样式。
• 前提：只有选择器匹配到同一个元素，且设置了相同的属性，才会触发层叠。

css

/* 示例：优先级相同，后面的样式层叠前面的 */
p { color: red; }
p { color: blue; /* 最终生效，蓝色 */ }

（2）继承性

继承性指的是：子元素会自动继承父元素的某些 CSS 属性，无需给子元素重复设置，减少代码冗余，提升开发效率。

• 核心可继承的属性：所有文本、字体相关的属性（color、font-size、font-family、line-height、text-align 等）、列表相关属性；
• 不可继承的属性：布局相关属性（width、height、margin、padding、border、background、定位属性等）。

css

/* 示例：body设置的字体属性，会被所有子元素继承 */
body {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}
/* 子元素p无需重复设置，自动继承body的字体属性 */
p { margin-bottom: 10px; }

【重点分析】继承性的特殊情况：a 标签的颜色、下划线不会继承父元素的 color，h1-h6 标题的字号不会继承父元素的 font-size，因为浏览器给这些元素设置了默认样式，默认样式的优先级高于继承的样式，需要手动重置。

（3）优先级

优先级指的是：当多个选择器匹配到同一个元素，且样式冲突时，浏览器会按照选择器的优先级权重，决定哪个样式生效，权重越高，优先级越高。

① 优先级权重表（从低到高）

表格

选择器类型	权重值
继承的样式 / 通配符选择器 *	0,0,0,0
元素（标签）选择器	0,0,0,1
类选择器 / 伪类选择器 / 属性选择器	0,0,1,0
ID 选择器	0,1,0,0
内联样式（style 属性）	1,0,0,0
!important 强制优先级	最高，无敌优先级

② 优先级计算规则

• 权重值从左到右逐级比较，高位数值大的，优先级更高，无需比较低位；
• 复合选择器的权重，是所有组成选择器的权重之和，可叠加，但不会进位（比如 10 个类选择器的权重，也不会超过 1 个 ID 选择器）；
• 继承的样式权重为 0，无论父元素的选择器权重多高，子元素自己设置的样式，优先级永远高于继承的样式。

【重点分析】

1. !important是强制提升优先级的手段，正式开发中尽量避免滥用，会破坏 CSS 的层叠规则，导致后期样式维护、覆盖极其困难，仅用于特殊场景的样式强制覆盖；
2. 权重叠加不会进位，不要试图用多个低权重选择器叠加覆盖高权重选择器；
3. 行内样式的优先级仅次于！important，所以要尽量避免使用内联样式，否则外部样式表很难覆盖。

2. CSS 盒子模型

盒子模型（Box Model）是 CSS 的核心布局概念，浏览器会把页面中的每一个 HTML 元素，都渲染成一个矩形的 “盒子”，这个盒子由 ** 内容区（content）、内边距（padding）、边框（border）、外边距（margin）** 四个部分组成，网页的所有布局，本质上都是盒子的排列、间距、尺寸控制。

（1）盒子模型的四大组成部分

css

.box {
  /* 1. 内容区：元素的核心内容，宽高设置默认控制的是内容区的大小 */
  width: 200px;
  height: 100px;
  /* 2. 内边距：内容区与边框之间的空白区域，会撑大盒子 */
  padding: 10px;
  /* 3. 边框：盒子的边界，会撑大盒子 */
  border: 1px solid #333;
  /* 4. 外边距：盒子与其他盒子之间的空白区域，控制盒子之间的间距 */
  margin: 20px;
}

• 内容区（content）：盒子的核心，存放文本、图片等内容，通过 width 和 height 设置大小；
• 内边距（padding）：内容与边框之间的间距，背景颜色、背景图片会延伸到 padding 区域，写法遵循「上→右→下→左」的顺时针顺序：

  css

  padding: 10px; /* 上下左右四个方向都是10px */
  padding: 10px 20px; /* 上下10px，左右20px */
  padding: 10px 20px 30px; /* 上10px，左右20px，下30px */
  padding: 10px 20px 30px 40px; /* 上、右、下、左 */
  /* 单独设置某个方向 */
  padding-top: 10px;
  

• 边框（border）：盒子的边界，由边框宽度、边框样式、边框颜色三个部分组成：

  css

  /* 简写 */
  border: 1px solid #333;
  /* 分开写 */
  border-width: 1px;
  border-style: solid; /* 可选：dashed(虚线)、dotted(点线)、none */
  border-color: #333;
  

• 外边距（margin）：盒子与其他盒子之间的间距，写法与 padding 完全一致，经典技巧：给固定宽度的块级元素设置margin: 0 auto;，可实现元素的水平居中。

（2）两种盒模型：标准盒模型 VS 怪异盒模型

两种盒模型的核心区别，在于width和height属性控制的范围不同，通过box-sizing属性切换。

表格

盒模型类型	box-sizing 属性值	width/height 控制范围	盒子实际占用宽度计算公式	核心特点
标准盒模型（W3C 盒模型）	content-box（默认值）	仅控制内容区 content 的大小	实际宽度 = width + padding 左右 + border 左右	padding 和 border 会撑大盒子，需要手动计算宽高，避免布局错乱
怪异盒模型（IE 盒模型）	border-box	控制内容区 + 内边距 + 边框的总大小	实际宽度 = width（padding 和 border 不会撑大盒子，只会挤压内容区）	布局更直观，设置的 width 就是盒子最终的实际宽度，无需手动计算

【重点分析】企业级开发中，推荐全局设置box-sizing: border-box;，可避免 padding 和 border 撑大盒子导致的布局错乱，大幅降低布局的计算成本，是前端开发的通用最佳实践。

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

（3）外边距塌陷问题

外边距塌陷是块级元素垂直方向 margin 的经典 bug，分为两种情况：

① 相邻块级元素的垂直外边距合并当上下两个相邻的块级元素，上面的元素设置了 margin-bottom，下面的元素设置了 margin-top，两个垂直外边距会合并，最终的间距取两个值中的较大者，而非两者之和。解决方式：尽量只给其中一个元素设置 margin，避免同时设置上下 margin。

② 嵌套块级元素的父子垂直外边距塌陷当父元素没有设置 border、padding、overflow:hidden，且子元素设置了 margin-top，这个 margin-top 会传递给父元素，导致父元素一起向下偏移。解决方式（任选其一）：

1. 给父元素设置 border-top（哪怕是 1px 透明边框）；
2. 给父元素设置 padding-top，替代子元素的 margin-top；
3. 给父元素设置overflow: hidden;；
4. 给父元素或子元素设置浮动、定位、转换为行内块元素。

3. 圆角与阴影

圆角与阴影是 CSS3 新增的属性，无需切图即可实现元素的圆角、阴影效果，大幅提升页面的视觉质感，是前端开发中实现视觉美化的核心属性。

（1）圆角属性 border-radius

border-radius 用于设置元素的圆角，值越大，圆角弧度越大，支持像素、百分比两种单位。

css

.box {
  /* 简写：四个角的圆角值，顺时针顺序：左上→右上→右下→左下 */
  border-radius: 10px; /* 四个角都是10px圆角 */
  border-radius: 10px 20px; /* 左上+右下10px，右上+左下20px */
  /* 单独设置某个角 */
  border-top-left-radius: 10px;
}

【经典应用】

1. 正圆形：给正方形元素设置border-radius: 50%;；
2. 胶囊形 / 圆角矩形：给矩形元素设置border-radius: 元素高度的一半;。

（2）盒子阴影 box-shadow

box-shadow 用于给元素设置阴影效果，无需切图即可实现元素的立体感、悬浮效果，参数如下：

css

.box {
  /* 语法：box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色 内阴影; */
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3);
}

参数详解（从左到右）：

1. h-shadow：水平偏移量，必填，正数向右偏移，负数向左偏移；
2. v-shadow：垂直偏移量，必填，正数向下偏移，负数向上偏移；
3. blur：模糊半径，可选，值越大，阴影越模糊；
4. spread：扩散半径，可选，正数阴影扩大，负数阴影缩小；
5. color：阴影颜色，可选，推荐使用 rgba 设置半透明阴影，效果更自然；
6. inset：内阴影关键字，可选，默认是外阴影，设置后变为内阴影。

【重点分析】

1. 盒子阴影不占用页面空间，不会影响其他元素的布局；
2. 可设置多组阴影，用逗号分隔，实现复杂的阴影效果；
3. 开发中最常用的写法：box-shadow: 0 2px 10px rgba(0,0,0,0.1);，实现元素的悬浮质感。

（3）文本阴影 text-shadow

text-shadow 用于给文本设置阴影效果，实现文字的立体感、发光效果，参数与 box-shadow 类似，无扩散半径和内阴影：

css

.text {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

三、本章易错点提示

1. 标准盒模型下，padding 和 border 会撑大盒子，若不想改变盒子的实际大小，需要手动减小 width 和 height 的值，或直接使用 border-box 怪异盒模型；
2. 只有块级元素的垂直方向 margin 会出现塌陷问题，水平方向不会，行内元素、行内块元素的垂直 margin 也不会出现塌陷；
3. !important尽量不要使用，会破坏 CSS 的层叠规则，后期维护成本极高；
4. border-radius 设置百分比时，是相对于元素自身的宽高，正方形设置 50% 是正圆，矩形设置 50% 是椭圆；
5. 继承的样式权重为 0，子元素只要自己设置了相同的属性，无论权重多低，都会覆盖继承的样式。