四天学完前端基础三件套（CSS篇）

CSS 入门详解：从选择器到盒模型，再到 Flex 布局

往期回顾

指针合集
c语言基础
数据结构与算法

目录

• 前言
• [一、CSS 是什么？](#一、CSS 是什么？)
• [二、为什么需要 CSS？](#二、为什么需要 CSS？)
• [三、CSS 和 HTML、JavaScript 的关系](#三、CSS 和 HTML、JavaScript 的关系)
• [四、CSS 的发展简史](#四、CSS 的发展简史)
• [五、CSS 的基本语法](#五、CSS 的基本语法)
• [六、CSS 的三种引入方式](#六、CSS 的三种引入方式)
• [七、CSS 代码书写风格](#七、CSS 代码书写风格)
• 八、选择器是什么？
• [九、基础选择器：标签、类、id 和通配符](#九、基础选择器：标签、类、id 和通配符)
• 十、复合选择器：后代、子代、并集和伪类
• [十一、CSS 的层叠性、继承性和优先级](#十一、CSS 的层叠性、继承性和优先级)
• 十二、字体属性：font-family、font-size、font-weight、font-style
• 十三、文本属性：颜色、对齐、装饰、缩进和行高
• 十四、背景属性：背景颜色、背景图片、平铺、位置和尺寸
• 十五、圆角矩形：border-radius
• 十六、元素显示模式：块级元素、行内元素和行内块元素
• [十七、display 属性：改变元素显示模式](#十七、display 属性：改变元素显示模式)
• 十八、盒模型：content、padding、border、margin
• 十九、border：边框属性
• 二十、padding：内边距
• 二十一、margin：外边距与水平居中
• 二十二、box-sizing：让盒子尺寸更好控制
• [二十三、Flex 弹性布局入门](#二十三、Flex 弹性布局入门)
• [二十四、Chrome 调试工具：查看和修改 CSS](#二十四、Chrome 调试工具：查看和修改 CSS)
• [二十五、CSS 常见坑点总结](#二十五、CSS 常见坑点总结)
• 二十六、参考资料
• 全文总结

---

前言

上一篇我们学习 HTML 的时候，讲过：

HTML 负责网页结构，CSS 负责网页样式，JavaScript 负责网页行为。

如果把一个网页比作一个人：

HTML：骨架
CSS：化妆、穿搭、发型、身材比例
JavaScript：动作、表情、交互能力

只写 HTML 的网页，大概长这样：

有标题
有段落
有图片
有链接
有表格
有表单

它能表达内容，但通常不好看。

而 CSS 的作用就是：

让文字变好看
让图片有背景
让页面有布局
让按钮有交互效果
让网页从"能看"变成"像个产品"

通俗地说：

HTML 负责"页面上有什么"，CSS 负责"这些东西长什么样、摆在哪里"。

---

一、CSS 是什么？

CSS 的全称是：

Cascading Style Sheets
层叠样式表

拆开来看：

1. Cascading：层叠

"层叠"说明 CSS 规则之间可能会互相覆盖。

比如同一个元素同时被多条 CSS 规则选中：

p {
    color: red;
}

.article p {
    color: blue;
}

那么浏览器要根据一定规则判断：

到底显示红色，还是显示蓝色？

这就涉及 CSS 的层叠性、优先级和继承性。

---

2. Style：样式

CSS 主要负责样式。

比如：

颜色
字体
字号

间距
布局
动画
响应式适配

---

3. Sheets：样式表

CSS 通常不是只写一条样式，而是一整份样式规则集合。

比如：

body {
    font-family: "Microsoft YaHei", sans-serif;
    background-color: #f5f5f5;
}

h1 {
    color: #333;
    text-align: center;
}

.card {
    width: 300px;
    padding: 20px;
    border-radius: 12px;
    background-color: #fff;
}

这一份规则集合，就像网页的"化妆说明书"。

---

二、为什么需要 CSS？

如果没有 CSS，HTML 也能显示内容。

比如：

<h1>我的博客</h1>
<p>今天学习 CSS。</p>
<a href="#">点击查看详情</a>

浏览器会默认显示：

标题比较大
段落正常显示
链接有下划线

但问题是：

页面不够美观
布局不可控
样式难统一
代码难维护
不同页面难复用

CSS 的出现，就是为了解决这些问题。

---

1. 实现结构和样式分离

HTML 专心负责结构：

<h1>文章标题</h1>
<p>文章内容</p>

CSS 专心负责样式：

h1 {
    color: red;
    font-size: 36px;
}

p {
    line-height: 1.8;
}

这样代码职责更清晰。

---

2. 提高代码复用性

如果有 100 个按钮都长一样，不需要给每个按钮单独写样式。

可以统一写一个类：

.btn {
    width: 120px;
    height: 40px;
    border-radius: 20px;
    background-color: #1677ff;
    color: #fff;
}

然后 HTML 中复用：

<button class="btn">登录</button>
<button class="btn">注册</button>
<button class="btn">提交</button>

---

3. 实现更精细的页面布局

CSS 能控制：

元素宽高
元素间距
元素位置
水平居中
垂直居中
多列布局
响应式布局
弹性布局
网格布局

网页从"文字堆叠"变成"产品界面"，核心靠的就是 CSS。

---

三、CSS 和 HTML、JavaScript 的关系

Web 前端基础三件套：

HTML
CSS
JavaScript

它们分工不同。

---

1. HTML：结构层

HTML 描述页面内容：

<h1>商品标题</h1>
<p>商品描述</p>
<button>加入购物车</button>

它告诉浏览器：

这里有标题
这里有段落
这里有按钮

---

2. CSS：表现层

CSS 描述页面外观：

button {
    background-color: orange;
    border-radius: 20px;
}

它告诉浏览器：

按钮是什么颜色
按钮多大
按钮有没有圆角

---

3. JavaScript：行为层

JavaScript 控制交互逻辑：

document.querySelector("button").onclick = function () {
    alert("加入购物车成功！");
};

它告诉浏览器：

点击按钮后要做什么

---

4. 一句话总结

HTML：放什么
CSS：怎么摆、怎么美化
JavaScript：怎么动、怎么交互

---

四、CSS 的发展简史

CSS 最初出现，是因为早期网页虽然能展示文档，但缺少统一、清晰的样式控制方式。

早期 Web 更像是：

可以互相链接的文档系统

但是随着网页越来越复杂，大家开始需要：

控制字体
控制颜色
控制间距
控制页面布局
让同一个网站风格统一

于是 CSS 出现了。

---

1. 1994 年：CSS 思想被提出

CSS 的故事通常可以追溯到 1994 年。

当时 Håkon Wium Lie 在 CERN 工作，他提出了用于 Web 的层叠样式表思想。

CSS 的核心目标是：

让网页内容结构和视觉样式分离。

---

2. 1996 年：CSS1 成为 W3C 推荐标准

CSS Level 1 成为 W3C Recommendation。

这一阶段主要关注基础样式能力：

字体
颜色
背景
文本
边距
边框
简单布局

---

3. CSS2 和 CSS2.1

CSS2 引入了更多布局和媒体相关能力。

CSS2.1 后来成为很长时间里浏览器实现的重要参考。

---

4. CSS3：模块化发展

很多同学以为 CSS3 是一个单独的大版本。

更准确地说，CSS 后来逐渐进入模块化发展阶段。

例如：

Selectors
Flexbox
Grid
Backgrounds and Borders
Colors
Animations
Transforms
Media Queries

每个模块可以独立演进。

---

五、CSS 的基本语法

CSS 的基本语法可以概括为：

选择器 + 声明块

示例：

p {
    color: red;
    font-size: 20px;
}

其中：

p：选择器，决定选中谁
{}：声明块
color: red;：一条声明
font-size: 20px;：另一条声明

---

1. 选择器：找谁

p

表示选中所有 <p> 标签。

也就是说：

选择器负责"找人"。

---

2. 声明：干啥

color: red;
font-size: 20px;

声明负责告诉浏览器：

文字颜色改成红色
字号改成 20px

---

3. 属性和值

每条声明由属性和值组成：

属性: 值;

例如：

color: red;

其中：

color 是属性
red 是属性值

注意：

属性和值之间用冒号 :
每条声明后面用分号 ;

---

4. CSS 注释

CSS 注释写法，这里和前面讲的HTML有一定的区别，请注意区分：

/* 这是 CSS 注释 */

注释不会影响页面显示，主要用于解释代码。

---

六、CSS 的三种引入方式

CSS 常见引入方式有三种：

1. 内部样式表
2. 行内样式表
3. 外部样式表

---

1. 内部样式表

写在 HTML 文件的 <style> 标签中。

<head>
    <style>
        p {
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>hello CSS</p>
</body>

优点：

结构和样式有一定分离
适合小 demo

缺点：

CSS 多了以后，HTML 文件会很臃肿
多个页面之间不方便复用

---

2. 行内样式表

直接写在标签的 style 属性里。

<div style="color: green; font-size: 20px;">
    这是一段文字
</div>

优点：

写起来快
只影响当前标签
优先级较高

缺点：

结构和样式强耦合
不方便复用
不适合复杂样式
维护成本高

行内样式适合临时测试，不推荐大量使用。

---

3. 外部样式表

实际开发中最常用。

先创建一个 CSS 文件：

style.css

写入：

div {
    color: red;
}

然后在 HTML 中通过 <link> 引入：

<link rel="stylesheet" href="style.css">

完整示例：

<head>
    <meta charset="UTF-8">
    <title>外部样式</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>外部 CSS 生效了</div>
</body>

优点：

结构和样式彻底分离
多个页面可以复用同一份 CSS
更适合真实项目

缺点：

可能受浏览器缓存影响
改了 CSS 后页面不一定立即刷新

如果修改 CSS 后页面没变化，可以尝试：

Ctrl + F5 强制刷新

---

七、CSS 代码书写风格

CSS 虽然能写得很随意，但建议从一开始就养成规范习惯。

---

1. 推荐展开写法

不推荐：

p { color: red; font-size: 20px; }

推荐：

p {
    color: red;
    font-size: 20px;
}

展开写法更清晰，适合后期维护。

---

2. 建议统一小写

CSS 属性虽然很多情况下不严格区分大小写，但开发中建议统一小写：

font-size: 20px;
background-color: red;

---

3. 空格规范

推荐：

p {
    color: red;
}

注意：

选择器和 { 之间保留一个空格
冒号后面保留一个空格
每条声明独占一行

---

八、选择器是什么？

CSS 的核心步骤是：

先选中元素，再设置样式

选择器就是用来选中页面元素的工具。

可以类比游戏：

先选中单位，再让单位移动或攻击。

CSS 也是一样：

p {
    color: red;
}

这句话的意思是：

先选中所有 p 标签
再把它们的文字颜色改成红色

---

九、基础选择器：标签、类、id 和通配符

---

1. 标签选择器

标签选择器直接使用标签名。

p {
    color: red;
}

div {
    color: green;
}

HTML：

<p>这是 p 标签</p>
<p>这也是 p 标签</p>
<div>这是 div 标签</div>

特点：

能快速选中所有同类型标签
不能差异化选择某一个

---

2. 类选择器

类选择器使用 . 开头。

.blue {
    color: blue;
}

HTML：

<div class="blue">蓝色文字</div>
<p class="blue">这段也是蓝色</p>

特点：

最常用
可以被多个标签复用
一个标签也可以有多个类名

一个标签使用多个类名：

<div class="box red"></div>
<div class="box green"></div>

CSS：

.box {
    width: 200px;
    height: 150px;
}

.red {
    background-color: red;
}

.green {
    background-color: green;
}

这样可以把公共样式和差异样式拆开。

---

3. id 选择器

id 选择器使用 # 开头。

#title {
    color: red;
}

HTML：

<h1 id="title">页面标题</h1>

特点：

id 在一个 HTML 页面中应该唯一
CSS 中写 #id名
HTML 中 id 属性不写 #

类比：

class 像姓名，可以重复
id 像身份证号，应该唯一

---

4. 通配符选择器

通配符选择器使用 *。

* {
    margin: 0;
    padding: 0;
}

它会选中页面中所有元素。

常见用途是清除浏览器默认内外边距。

注意：通配符影响范围很大，不要滥用。

---

5. 基础选择器对比

选择器	写法	作用	特点
标签选择器	p	选中所有同名标签	快速但不够精确
类选择器	.box	选中 class 对应元素	最常用，可复用
id 选择器	#app	选中指定 id 元素	唯一性强
通配符选择器	*	选中所有元素	影响范围大

---

十、复合选择器：后代、子代、并集和伪类

复合选择器就是把多个基础选择器组合起来使用。

---

1. 后代选择器

语法：

父元素 后代元素 {
    样式声明
}

示例：

ul li {
    color: red;
}

含义：

选中 ul 里面的所有 li

注意：

后代选择器不只选亲儿子，也会选孙子、重孙子。

示例：

.article p {
    line-height: 1.8;
}

表示选中 .article 内部所有 p。

---

2. 子选择器

语法：

父元素 > 子元素 {
    样式声明
}

示例：

.box > a {
    color: red;
}

只选 .box 的直接子元素 a，不选孙子元素。

对比：

.box a {
    color: red;
}

这个会选中 .box 内部所有层级的 a。

---

3. 并集选择器

多个选择器共用同一套样式。

div,
h3,
ul > li {
    color: red;
}

注意：

选择器之间用逗号分隔
建议每个选择器单独一行
最后一个选择器后面不加逗号

---

4. 链接伪类选择器

常见链接伪类：

a:link {
    color: black;
}

a:visited {
    color: green;
}

a:hover {
    color: red;
}

a:active {
    color: blue;
}

含义：

选择器	含义
a:link	未访问过的链接
a:visited	已访问过的链接
a:hover	鼠标悬停
a:active	鼠标按下未松开

实际开发中最常用的是：

a {
    color: black;
    text-decoration: none;
}

a:hover {
    color: red;
}

---

5. focus 伪类选择器

:focus 用于选中获得焦点的元素。

常用于输入框：

input:focus {
    color: red;
    border-color: #1677ff;
}

当用户点击输入框输入内容时，这个样式就会生效。

---

十一、CSS 的层叠性、继承性和优先级

CSS 里最容易让初学者头疼的问题是：

为什么我的样式没生效？

通常和下面三个概念有关：

层叠性
继承性
优先级

---

1. 层叠性

当多个 CSS 规则作用到同一个元素上时，浏览器 会根据规则决定最终采用哪一条。

（注意这也就是说不同的浏览器的结果不一样）

例如：

p {
    color: red;
}

p {
    color: blue;
}

如果优先级相同，后写的通常覆盖先写的。

最终文字是蓝色。

---

2. 继承性

有些 CSS 属性会从父元素继承给子元素。

例如：

body {
    color: #333;
    font-family: "Microsoft YaHei";
}

页面里的很多文字都会继承这些样式。

常见可继承属性：

color
font-family
font-size
font-style
font-weight
line-height

但不是所有属性都会继承。

比如：

width
height
border
margin
padding
background

通常不会自动继承。

---

3. 优先级

不同选择器优先级不同。

简单记忆：

行内样式 > id 选择器 > 类选择器 / 伪类选择器 > 标签选择器 > 通配符选择器

示例：

p {
    color: red;
}

.text {
    color: blue;
}

#main {
    color: green;
}

HTML：

<p id="main" class="text">这段文字是什么颜色？</p>

最终通常是绿色，因为 id 选择器优先级更高。

---

4. 不建议乱用 !important

p {
    color: red !important;
}

!important 会强行提高优先级。

但过度使用会让代码越来越难维护。

建议：

能不用就不用
先检查选择器和代码顺序
再考虑是否真的需要 !important

---

十二、字体属性：font-family、font-size、font-weight、font-style

---

1. font-family：设置字体

body {
    font-family: "Microsoft YaHei", Arial, sans-serif;
}

多个字体之间用逗号分隔。

浏览器会从左到右查找：

先找 Microsoft YaHei
找不到再找 Arial
还找不到就使用 sans-serif

如果字体名有空格，建议使用引号包裹。

---

2. font-size：设置字号

p {
    font-size: 20px;
}

注意：

单位 px 不要忘
不同浏览器默认字号可能不同
Chrome 默认字号通常是 16px

建议给整体页面设置基础字号：

body {
    font-size: 16px;
}

---

3. font-weight：设置粗细

p {
    font-weight: bold;
}

也可以使用数字：

p {
    font-weight: 700;
}

---

4. font-style：设置文字样式

设置倾斜：

em {
    font-style: italic;
}

取消倾斜：

em {
    font-style: normal;
}

实际开发中，经常会把 em、i 默认倾斜取消掉，再用 CSS 统一设计样式。

---

十三、文本属性：颜色、对齐、装饰、缩进和行高

---

1. color：文本颜色

常见写法：

p {
    color: red;
}

p {
    color: #ff0000;
}

p {
    color: rgb(255, 0, 0);
}

常用方式是十六进制：

color: #333;
color: #f00;
color: #1677ff;

---

2. RGB 颜色模型

RGB 表示：

R：Red，红色
G：Green，绿色
B：Blue，蓝色

每个通道范围是：

0 ~ 255

例如：

rgb(255, 0, 0) 红色
rgb(0, 255, 0) 绿色
rgb(0, 0, 255) 蓝色
rgb(255, 255, 255) 白色
rgb(0, 0, 0) 黑色

---

3. text-align：文本水平对齐

div {
    text-align: center;
}

常见值：

left：左对齐
center：居中
right：右对齐

注意：

text-align 不只可以影响文字，也常用于让行内元素、行内块元素在父容器中水平居中。

---

4. text-decoration：文本装饰

a {
    text-decoration: none;
}

常见值：

值	含义
none	无装饰，常用于去掉 a 标签下划线
underline	下划线
overline	上划线
line-through	删除线

---

5. text-indent：首行缩进

p {
    text-indent: 2em;
}

em 是相对单位。

1em = 当前元素字体大小
2em = 两个字的宽度

所以中文段落首行缩进常用：

text-indent: 2em;

---

6. line-height：行高

p {
    line-height: 1.8;
}

行高控制文本行与行之间的距离。

也可以写具体像素：

p {
    line-height: 40px;
}

---

7. 单行文本垂直居中

如果盒子高度和行高相等，可以实现单行文字垂直居中。

.box {
    height: 100px;
    line-height: 100px;
}

这个技巧适合单行文本。

多行文本垂直居中，更推荐使用 Flex。

---

十四、背景属性：背景颜色、背景图片、平铺、位置和尺寸

---

1. background-color：背景颜色

body {
    background-color: #66ccff;
}

.box {
    background-color: red;
}

默认背景通常是透明：

background-color: transparent;

---

2. background-image：背景图片

.box {
    background-image: url("rose.jpg");
}

注意：

url 不要漏
路径可以是相对路径，也可以是绝对路径
引号可写可不写，但建议统一写

---

3. background-repeat：背景平铺

.box {
    background-repeat: no-repeat;
}

常见值：

值	含义
repeat	默认，平铺
no-repeat	不平铺
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

---

4. background-position：背景位置

.box {
    background-position: center;
}

可以写方位词：

background-position: left top;
background-position: center center;
background-position: right bottom;

也可以写精确值：

background-position: 100px 200px;

注意：

第一个值通常表示 x 方向
第二个值通常表示 y 方向

浏览器坐标系中，通常是：

x 向右增加
y 向下增加

---

5. background-size：背景尺寸

.box {
    background-size: cover;
}

常见值：

值	含义
具体值	如 100px 200px
百分比	按容器大小计算
cover	覆盖整个区域，可能裁剪图片
contain	完整显示图片，可能留白

---

6. cover 和 contain 的区别

cover：宁愿裁剪，也要铺满整个盒子
contain：宁愿留白，也要完整显示图片

实际开发中：

头像、封面图常用 cover
完整展示商品图常用 contain

---

十五、圆角矩形：border-radius

border-radius 用于设置圆角。

.box {
    width: 200px;
    height: 100px;
    border: 2px solid green;
    border-radius: 10px;
}

---

1. 生成圆形

如果盒子是正方形：

.circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

即可生成圆形。

---

2. 生成胶囊按钮

如果盒子是矩形，可以让圆角等于高度的一半：

.btn {
    width: 200px;
    height: 50px;
    border-radius: 25px;
}

也可以直接写：

border-radius: 999px;

常用于胶囊按钮。

---

3. 分别设置四个角

.box {
    border-radius: 10px 20px 30px 40px;
}

顺序是：

左上 右上 右下 左下

也可以单独写：

border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;

---

十六、元素显示模式：块级元素、行内元素和行内块元素

CSS 中，HTML 元素有不同的显示模式。

重点掌握：

块级元素
行内元素
行内块元素

---

1. 块级元素

常见块级元素：

div
p
h1-h6
ul
ol
li
section
article
header
footer

特点：

独占一行
可以设置宽高
可以设置内边距和外边距
默认宽度通常是父元素的 100%
可以作为容器

示例：

div {
    width: 300px;
    height: 100px;
    background-color: red;
}

---

2. 行内元素

常见行内元素：

a
span
strong
em
i
b
u
s

特点：

不独占一行
多个行内元素可以在同一行显示
宽高设置通常无效
默认宽度由内容决定
左右 margin 有效，上下 margin 通常不明显

示例：

<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>

它们会在同一行显示。

---

3. 行内块元素

行内块元素结合了行内元素和块级元素的特点。

特点：

不独占一行
可以设置宽高
可以设置内外边距

常见应用：

按钮
导航项
小卡片
标签

---

十七、display 属性：改变元素显示模式

display 可以改变元素显示模式。

---

1. 变成块级元素

a {
    display: block;
}

常用于把链接变成一个可点击的大区域。

---

2. 变成行内元素

div {
    display: inline;
}

较少使用。

---

3. 变成行内块元素

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

inline-block 很常用。

比如导航栏：

.nav a {
    display: inline-block;
    padding: 10px 20px;
}

---

4. 变成 Flex 容器

.container {
    display: flex;
}

用于弹性布局。

---

十八、盒模型：content、padding、border、margin

CSS 中，每个 HTML 元素都可以看成一个矩形盒子。

这个盒子由四部分组成：

content：内容区
padding：内边距
border：边框
margin：外边距

一般在浏览器里面是这样的：

+--------------------------------------+
|              margin                  |
|   +------------------------------+   |
|   |           border             |   |
|   |   +----------------------+   |   |
|   |   |       padding        |   |   |
|   |   |   +--------------+   |   |   |
|   |   |   |   content    |   |   |   |
|   |   |   +--------------+   |   |   |
|   |   +----------------------+   |   |
|   +------------------------------+   |
+--------------------------------------+

通俗理解：

content：房间内部空间
padding：房间里家具和墙之间的距离
border：墙
margin：这套房和隔壁房之间的距离

---

十九、border：边框属性

边框常见属性：

border-width：边框粗细
border-style：边框样式
border-color：边框颜色

---

1. 分开写

.box {
    border-width: 2px;
    border-style: solid;
    border-color: red;
}

---

2. 简写

.box {
    border: 2px solid red;
}

常见 border-style：

solid：实线
dashed：虚线
dotted：点线

---

3. 单独设置某一边

.box {
    border-top: 2px solid red;
    border-right: 2px solid green;
    border-bottom: 2px solid blue;
    border-left: 2px solid orange;
}

---

二十、padding：内边距

padding 控制内容和边框之间的距离。

.box {
    padding: 20px;
}

---

1. 单独设置四个方向

.box {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

---

2. 复合写法

.box {
    padding: 10px;
}

四个方向都是 10px。

.box {
    padding: 10px 20px;
}

表示：

上下 10px
左右 20px

.box {
    padding: 10px 20px 30px;
}

表示：

上 10px
左右 20px
下 30px

.box {
    padding: 10px 20px 30px 40px;
}

表示：

上 10px
右 20px
下 30px
左 40px

记忆方式：

从上开始，顺时针
上 右 下 左

---

二十一、margin：外边距与水平居中

margin 控制盒子和盒子之间的距离。

.box {
    margin: 20px;
}

---

1. 单独设置四个方向

.box {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
}

复合写法和 padding 类似。

---

2. 块级元素水平居中

经典写法：

.box {
    width: 500px;
    margin: 0 auto;
}

前提：

元素是块级元素
元素必须有明确宽度
左右 margin 设置为 auto

注意：

margin: 0 auto; 是让块级盒子本身水平居中
text-align: center; 是让盒子里的文字或行内元素居中

---

3. 清除浏览器默认样式

浏览器会给一些元素默认 margin 和 padding。

为了统一效果，常见写法：

* {
    margin: 0;
    padding: 0;
}

更完整一点可以写：

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

---

二十二、box-sizing：让盒子尺寸更好控制

默认情况下：

.box {
    width: 300px;
    padding: 20px;
    border: 10px solid red;
}

最终盒子总宽度不是 300px。

因为默认盒模型中：

总宽度 = width + 左右 padding + 左右 border

也就是说：

300 + 20 * 2 + 10 * 2 = 360px

这很容易让布局变乱。

---

使用 border-box

* {
    box-sizing: border-box;
}

此时：

width 包含 content + padding + border

也就是说：

.box {
    width: 300px;
    padding: 20px;
    border: 10px solid red;
}

最终盒子宽度仍然是 300px。

这也是现代项目里很常见的初始化写法。

---

二十三、Flex 弹性布局入门

Flex 是 flexible box 的缩写，也叫弹性盒子。

它的核心思想是：

给父盒子设置 display: flex，然后控制子盒子的排列方式。

---

1. 基本写法

HTML：

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

CSS：

.container {
    display: flex;
}

此时 .container 是 flex container。

它的直接子元素 .item 是 flex item。

---

2. 主轴和侧轴

Flex 布局中有两个方向：

主轴：项目主要排列方向
侧轴：和主轴垂直的方向

默认情况下：

主轴从左到右
侧轴从上到下

---

3. flex-direction：设置主轴方向

.container {
    display: flex;
    flex-direction: row;
}

常见值：

值	含义
row	默认，从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

---

4. justify-content：主轴对齐

.container {
    display: flex;
    justify-content: center;
}

常见值：

值	含义
flex-start	主轴起点对齐
flex-end	主轴终点对齐
center	居中
space-between	两端对齐，中间平分
space-around	每个项目两侧间距相等
space-evenly	所有间距完全相等

---

5. align-items：侧轴对齐

.container {
    display: flex;
    align-items: center;
}

常见值：

值	含义
stretch	默认，拉伸
flex-start	侧轴起点对齐
flex-end	侧轴终点对齐
center	侧轴居中
baseline	基线对齐

---

6. Flex 实现水平垂直居中

这是非常常用的写法：

.box {
    width: 300px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

解释：

justify-content: center; 主轴居中
align-items: center; 侧轴居中

如果主轴是默认横向，那么它就能实现水平和垂直居中。

---

7. flex-wrap：换行

默认情况下，flex item 会尽量挤在一行。

如果希望换行：

.container {
    display: flex;
    flex-wrap: wrap;
}

---

二十四、Chrome 调试工具：查看和修改 CSS

学习 CSS 一定要会用浏览器调试工具。

打开方式：

F12
或右键页面 -> 检查

---

1. Elements 面板

可以查看 HTML 结构，也就是 DOM 树。

---

2. Styles 区域

可以查看当前元素命中的 CSS 规则。

你可以看到：

哪些样式生效了
哪些样式被覆盖了
样式来自哪个文件
哪一行写了这个样式

---

3. 临时修改样式

在开发者工具里可以直接修改 CSS。

比如：

修改颜色
调整字号
改 margin
改 padding
开关某条 CSS

注意：

这里的修改只是临时调试，刷新页面后会还原。

如果调试出满意效果，记得回到代码文件中修改。

---

4. 盒模型可视化

Chrome 调试工具中可以直接看到：

margin
border
padding
content

这对理解盒模型非常有帮助。

---

二十五、CSS 常见坑点总结

---

1. CSS 文件没有引入

写了 CSS，但是 HTML 没有引入：

<link rel="stylesheet" href="style.css">

---

2. 路径写错

<link rel="stylesheet" href="./css/style.css">

如果路径不对，CSS 文件加载不到。

---

3. 忘记单位

错误：

.box {
    width: 100;
}

正确：

.box {
    width: 100px;
}

---

4. 优先级被覆盖

你写了：

p {
    color: red;
}

但另一个地方写了：

.article p {
    color: blue;
}

最终可能是蓝色。

---

5. 行内元素设置宽高无效

span {
    width: 200px;
    height: 100px;
}

默认情况下不明显。

可以改成：

span {
    display: inline-block;
}

---

6. border 和 padding 撑大盒子

建议统一设置：

* {
    box-sizing: border-box;
}

---

7. margin: auto 不能实现垂直居中

margin: auto;

常用于块级元素水平居中，不是万能居中。

垂直居中可以考虑：

display: flex;
align-items: center;
justify-content: center;

---

8. hover 写了但没效果

检查：

选择器有没有写错
是否被其他样式覆盖
是否顺序有问题
元素是否真的能被 hover

---

二十七、参考资料

下面是一些适合继续学习 CSS 的资料。

MDN CSS 文档

---

总结

CSS 是前端开发中非常核心的一部分。

如果说 HTML 是网页骨架，那么 CSS 就是网页的外观设计系统，也就是HTML是骨，CSS是皮。

它主要解决三个问题：

1. 元素长什么样
2. 元素放在哪里
3. 页面整体如何布局

本文系统梳理了：

CSS 是什么
CSS 和 HTML、JavaScript 的关系
CSS 的发展历史
CSS 基本语法
CSS 三种引入方式
基础选择器和复合选择器
层叠性、继承性和优先级
字体属性
文本属性
背景属性
圆角
元素显示模式
盒模型
border、padding、margin
box-sizing
Flex 弹性布局
Chrome 调试工具
常见坑点

学 CSS 时，主要是理解：

选择器：选中谁
层叠规则：谁生效
盒模型：每个元素占多大空间
布局模型：元素怎么排列
调试工具：怎么发现问题

把这些底层逻辑理解清楚，后面再学 Flex、Grid、响应式布局、动画、组件样式，就是探囊取物了。

---