当前位置：首页 > news >正文

【前端】【css】【总复习】三万字详解CSS 知识体系

news 来源：原创 2025/5/13 15:07:33

🌈 CSS 知识体系目录大纲

一、基础知识入门

1. CSS 简介与作用

CSS（Cascading Style Sheets，层叠样式表）是一种用于给 HTML 页面添加样式的语言，作用是让网页更美观、结构更清晰、布局更灵活。

核心作用：

控制网页元素的 颜色、字体、间距、边框、背景
布局网页元素位置，如 横排、竖排、居中、响应式
添加 过渡动画、响应式适配、主题切换 等动态交互效果

🧠 一个网页结构由 HTML 提供骨架，CSS 负责美化“皮肤”，JS 控制交互行为。

2. CSS 的引入方式

2.1 行内样式（inline style）

直接写在标签的 style 属性里，优先级高，但不推荐大量使用。

<p style="color: red; font-size: 16px;">这是一段红色文字</p>

2.2 内部样式表（internal style）

写在 <style> 标签中，放在 HTML <head> 中，适合小型页面或测试样式。

<head><style>p {color: blue;}</style>
</head>

2.3 外部样式表（external stylesheet）

将 CSS 单独放在 .css 文件中，用 <link> 标签引入，最推荐方式，利于复用和维护。

<link rel="stylesheet" href="styles.css" />
/* styles.css 文件 */
p {color: green;
}

3. 基本语法与结构

CSS 使用 选择器 + 声明块 的结构来描述样式：

selector {property: value;
}

例如：

h1 {font-size: 24px;color: #333;
}

selector：选择器，如 h1、.class、#id
property：样式属性，如 font-size、color
value：属性的取值，如 24px、#333
每条样式以 ; 结尾，声明块使用 {} 包裹

4. 注释与代码规范

4.1 CSS 注释格式

/* 这是一个注释 */

注释不会被浏览器解析
用于解释代码、团队协作或调试

4.2 编写规范建议

缩进统一：使用 2 或 4 个空格缩进
属性对齐：每个属性单独一行
选择器简洁：不嵌套过深，不滥用 !important
文件结构清晰：样式分模块、分功能归类
命名语义化：例如 .btn-primary, .card-header 更具可读性

💡 推荐使用 Prettier、Stylelint 等工具统一风格，提高代码质量。

二、选择器详解

CSS 选择器用于“选中”网页中的 HTML 元素，给它们添加样式。掌握选择器能让你精确控制样式的作用范围。

1. 基础选择器（标签、类、ID）

1.1 标签选择器

选择 HTML 中的某一类标签，如 h1、p、div 等。

p {color: blue;
}

1.2 类选择器 `.class`

选择具有特定类名的元素，最常用！

.box {border: 1px solid black;
}

1.3 ID 选择器 `#id`

选择具有唯一 ID 的元素，一个页面中一个 ID 只能用一次。

#header {background-color: #f0f0f0;
}

⚠️ 尽量少用 ID 选择器，因为它权重高、可复用性差。

2. 组合选择器（后代、子、兄弟）

2.1 后代选择器（空格）

选择某元素内部的所有子孙元素。

ul li {list-style: none;
}

2.2 子选择器（>）

只选择直接子元素。

div > p {color: red;
}

2.3 相邻兄弟选择器（+）

选择某元素后面紧挨着的兄弟元素。

h1 + p {margin-top: 0;
}

2.4 通用兄弟选择器（~）

选择某元素后面所有的兄弟元素。

h1 ~ p {color: gray;
}

3. 属性选择器

根据 HTML 属性值来选中元素。

/* 有 type 属性的元素 */
input[type] {border: 1px solid gray;
}/* 属性值是 text */
input[type="text"] {background-color: #fafafa;
}/* 属性值以 "btn" 开头 */
button[class^="btn"] {padding: 10px;
}

4. 伪类选择器（交互状态类）

伪类表示元素在某些状态下的样式。

a:hover {color: red; /* 鼠标悬停时 */
}input:focus {outline: 2px solid blue; /* 获得焦点时 */
}li:nth-child(2) {color: green; /* 选中第二个 li */
}

常用伪类：

:hover：鼠标悬停
:focus：获得焦点
:active：被点击
:first-child / :last-child：第一个 / 最后一个子元素
:nth-child(n)：第 n 个子元素（从 1 开始）

5. 伪元素选择器（内容增强类）

伪元素用于“虚拟”地选中 HTML 中某个部分，常用于添加装饰性内容。

p::before {content: "📌 ";
}p::after {content: " ✅";
}

常见伪元素：

::before：在元素前插入内容
::after：在元素后插入内容
::first-line：选中文本的第一行
::first-letter：选中文本的首字母

✅ 使用伪元素时必须配合 content 属性。

选择器优先级与权重计算

当多个选择器选中同一个元素时，优先级决定哪条样式生效。

类型	示例	权重值
行内样式	`<p style="">`	1000
ID 选择器	`#id`	100
类 / 属性 / 伪类	`.class`, `[type]`, `:hover`	10
标签 / 伪元素	`p`, `::before`	1

示例：

p {color: blue;      /* 权重 1 */
}.content p {color: green;     /* 权重 11（10 + 1） */
}#main .content p {color: red;       /* 权重 111（100 + 10 + 1） */
}

最终颜色是红色，因为权重高。

三、盒模型与文档流

CSS 盒模型是网页布局的基础概念，而文档流决定了元素在页面上的自然排列方式。

1. 标准盒模型 vs IE 盒模型

标准盒模型（W3C）

width = 内容宽度（content）
总宽度 = content + padding + border

box-sizing: content-box; /* 默认值 */

IE 盒模型（怪异模式）

width = 内容宽度 + 内边距 + 边框

box-sizing: border-box;

2. 盒子各部分详解

CSS 盒模型由以下几个部分组成（从内到外）：

content：实际内容区域（如文字、图片）
padding（内边距）：内容与边框之间的空隙
border（边框）：盒子的边界线
margin（外边距）：盒子与其他盒子之间的距离

示例：

.box {width: 200px;padding: 20px;border: 5px solid black;margin: 10px;
}

3. `box-sizing` 的使用

控制盒子尺寸计算方式的关键属性：

/* 推荐设置 */
* {box-sizing: border-box;
}

content-box（默认）：宽度 = 内容宽度
border-box：宽度包含内容、内边距和边框 → 更好控制整体布局宽度

4. 外边距合并与塌陷问题（Margin Collapsing）

外边距合并（或称“塌陷”）是 CSS 中一个常见但容易被忽视的行为。主要发生在 垂直方向上的块级元素之间，可能导致布局意外缩小或不生效。

4.1 什么是外边距合并？

垂直方向上，当两个块级元素相邻或嵌套时，它们的 margin-top 和 margin-bottom 可能会发生合并，最终呈现一个单一的边距，而不是两者之和。

4.2 外边距合并的三种情况

① 相邻兄弟元素合并

<div class="a"></div>
<div class="b"></div>
.a {margin-bottom: 30px;
}
.b {margin-top: 20px;
}

✅ 最终间距为 30px，即两者 margin 中的最大值。

② 空块元素内部 margin 与父元素合并（父元素没有margin-top的情况，子元素的margin-top作用了）

<div class="parent"><div class="child"></div>
</div>
.parent {border: 1px solid #ccc;
}
.child {margin-top: 40px;
}

✅ 如果 .parent 没有 padding/border/overflow，那么 .child 的 margin-top 会与 .parent 合并，整体元素像是“外推”了 40px。

③ 父子元素上下 margin 合并

.parent {margin-top: 50px;
}
.child {margin-top: 30px;
}

✅ 结果不是两者之和，而是取最大值 50px。

4.3 如何解决外边距合并

若你不希望发生合并，可以采用以下几种方式：

方法	原理	示例
1. 添加内边距（`padding`）	打断合并通道	`.parent { padding-top: 1px; }`
2. 设置边框	同样打断合并	`.parent { border-top: 1px solid transparent; }`
3. 设置 `overflow`	创建新的格式化上下文	`.parent { overflow: hidden; }`
4. 使用 `display: flow-root` ✅ 推荐	生成块格式化上下文（BFC）	`.parent { display: flow-root; }`

4.4 推荐做法

遇到 margin 合并导致页面结构不符合预期时，优先尝试 display: flow-root，简单易控。
尽量避免父子结构都设置相同方向的 margin，改用 padding 或使用间隔组件（如 .gap 类）。
如果需要更清晰的布局控制，Flex 和 Grid 布局可以完全避免 margin 合并问题。

总结：

外边距合并是 CSS 的“潜规则”之一，虽然是规范行为，但不易察觉，且容易造成布局混乱。理解其触发条件并掌握解决方案，有助于写出更健壮的 CSS 布局。是否需要一个示意图来更直观理解？

5. `display` 与文档流

CSS 中元素的布局取决于其 display 属性，以及它在文档流中的位置。

5.1 block（块级元素）

独占一行，宽度默认撑满父容器
可设置 width、height、margin、padding

常见块级元素：div、p、h1-h6、ul、ol、li

5.2 inline（行内元素）

不换行，宽高不可设置（仅左右 padding 生效）
宽度由内容撑开

常见行内元素：span、a、strong、em

5.3 inline-block（行内块元素）

兼具 inline 与 block 特性
可以不换行显示多个元素，又可设置宽高

.btn {display: inline-block;width: 100px;height: 40px;
}

💡理解盒模型和文档流是后续掌握布局（Flex、Grid、Position）和响应式设计的基础。

四、布局体系

布局是网页开发中控制元素位置和排布的核心。掌握不同布局方案，能够应对各种页面结构需求。

1. 浮动布局（Float）

基本用法

.float-left {float: left;
}
.float-right {float: right;
}

清除浮动（clearfix）

.clearfix::after {content: "";display: block;clear: both;
}

特点

脱离文档流，常用于左右并排布局
可能引起父元素高度塌陷，需手动清除浮动

2. 定位布局（Position）

值	说明
static	默认值，按照文档流排列
relative	相对自身原位置移动
absolute	相对最近的定位祖先元素偏移
fixed	相对于视口定位，不随滚动条移动
sticky	混合行为：滚动到指定位置时固定

.box {position: absolute;top: 20px;left: 50px;
}

注意

absolute 会脱离文档流
sticky 兼具 relative 和 fixed 的特性，适合粘性头部

3. Flex 弹性布局

Flex布局是CSS中的一种布局模式，非常适合处理一维排列的布局（无论是横向或纵向）。它提供了非常灵活的方式来控制子元素的排列方式和对齐方式，简化了许多传统布局的代码。

3.1 容器属性

这些属性控制整个容器如何排列子元素。

display: flex;

启用Flex布局，让容器的子项自动变成flex元素。
flex-direction: row | column;

规定项目的排列方向。
- row（默认值）：水平方向排列（从左到右）。
- column：垂直方向排列（从上到下）。
justify-content: flex-start | center | space-between | space-around | space-evenly;

控制主轴（flex-direction的方向）上的对齐方式。
- flex-start：项目从容器的起始位置开始排列（默认）。
- center：项目居中排列。
- space-between：项目之间有均匀的间隔，第一个和最后一个项目紧贴容器边缘。
- space-around：项目之间有均匀的间隔，且两端有半个间隔。
- space-evenly：项目之间的间隔完全相等。
align-items: stretch | center | flex-start | flex-end | baseline;

控制交叉轴（垂直于主轴）上的对齐方式。
- stretch（默认值）：项目拉伸以适应容器的高度。
- center：项目垂直居中对齐。
- flex-start：项目与容器的顶部对齐。
- flex-end：项目与容器的底部对齐。
- baseline：项目的基线对齐。
flex-wrap: nowrap | wrap | wrap-reverse;

控制项目是否换行。
- nowrap（默认值）：不换行，所有项目在一行内显示。
- wrap：如果项目空间不足，自动换行。
- wrap-reverse：与wrap相似，但换行方向相反（从底部到顶部）。