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

二、网页的“化妆师”：从零学习 CSS

news 2025/9/13 8:07:37

一、CSS 是什么

1.1 CSS 的定义

CSS（Cascading Style Sheets，层叠样式表） 是一种用来给 HTML 页面 添加样式的语言。
简单来说：

HTML 负责结构 —— 决定网页上有什么内容。
CSS 负责样式 —— 决定这些内容“长什么样”。

如果把网页比作房子：

HTML 就是房子的框架和结构
CSS 就是房子的装修和设计

例如，你可以通过 HTML 定义一个标题 <h1>，而通过 CSS 让它变得更好看，比如改变颜色、字体、大小等。

示例：

HTML 文件（没有 CSS 的样子）：

<h1>欢迎来到我的网页</h1>
<p>这里是一个简单的介绍页面。</p>

默认浏览器效果：黑色文字、白色背景，非常朴素。

加入 CSS 后：

<style>
h1 {color: blue;font-size: 32px;text-align: center;
}
p {color: #555;font-size: 16px;
}
</style>

效果变化：

标题变成蓝色、居中、字体更大
段落文字变成灰色，更易阅读

这就是 CSS 的作用：让网页更美观、更具可读性。

二、基本语法规范

CSS 代码由 选择器（Selector） 和 声明块（Declaration Block） 组成。
选择器+{一条/N 条声明}

选择器决定针对谁修改（找谁）
声明决定改啥（干啥）
声明的属性是键值对，使用 ; 区分键值对，使用 : 区分键和值

2.1 基本结构

选择器 {属性名: 属性值;属性名: 属性值;
}

示例：

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

解释：

p 是 选择器，表示对所有 <p> 段落标签应用样式
{ } 内的内容是 声明块
color: red; 是一条声明，由属性名和属性值组成

2.2 注意事项

每条声明都以分号 ; 结束
属性名和属性值之间用冒号 : 连接
花括号 { } 必须成对出现
尽量使用小写字母书写属性名（规范习惯）

错误示例：

p {Color = Red  /* ❌ 错误：大小写不规范、使用了 = */
}

注意：

CSS 要写到 style 标签中（后面还会介绍其他写法）
style 标签可以放到页面任意位置，一般放到 head 标签内
CSS 使用 /**/ 作为注释。（使用 Ctrl+/ 快速注释和取消注释）

三、引入方式

CSS 有 三种常见引入方式，根据使用场景选择。

3.1 行内样式（Inline Style）

直接在 HTML 标签上使用 style 属性写 CSS 样式。只适合于写简单样式, 只针对某个标签生效。

示例：

<p style="color: blue; font-size: 18px;">这是行内样式的段落</p>

特点：

优点：快速、简单，适合小范围测试或临时修改
缺点：不易维护，结构与样式混在一起，代码冗余，不能写太复杂的样式，这种写法优先级较高会覆盖其他样式，所以不推荐这样写。

3.2 内部样式表（Internal Style Sheet）

在 HTML 文件的 <head> 标签中使用 <style> 编写 CSS。
理论上来说 style 放到 htmnl 的哪里都行，但是一般都是放到 head 标签中。

示例：

<head><style>h1 {color: green;text-align: center;}p {color: gray;}</style>
</head>

特点：

优点：HTML 和 CSS 分开，结构更清晰
缺点：样式只作用于当前 HTML 文件，分离的还不彻底，尤其是 CSS 内容多的时候，平常练习可以使用，项目中不建议用

3.3 外部样式表（External Style Sheet）

将 CSS 单独写在一个 .css 文件中，然后通过 <link> 标签引入。
目前实际开发中最常用的一种方式，推荐使用。

创建一个 CSS 文件
使用 link 标签引入 CSS

目录结构：

project/
│
├── index.html
└── style.css

style.css 文件：

h1 {color: purple;
}
p {font-size: 18px;color: #333;
}

index.html 文件：

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

注意：一定要在 html 文件中用 link 调用 CSS 否则不生效
特点：

优点：结构和样式彻底分离，便于维护和复用
缺点：首次加载时需要额外请求 CSS 文件，受到浏览器的缓存影响，修改之后不一定立刻生效

关于缓存：
这是计算机中一种常见的提升性能的技术手段。
网页依赖的资源（图片/CSS/JS 等）通常是从服务器上获取的，如果频繁访问该网站，那么这些外部资源就没必要反复从服务器获取，就可以使用缓存先存起来（就是存在本地磁盘上了）。从而提高访问效率。
可以通过 Ctrl+F5 强制刷新页面，强制浏览器重新获取 CSS 文件。

四、选择器

选择器（Selector）用来选中 HTML 元素，从而对它们应用样式。
选择器种类很多，下面介绍常见的几种。

选择器的功能

选中页面中指定的元素，要先选中元素，才能设置元素的属性
就好比 SC 2，War 3 这样的游戏，需要先选中单位，再指挥该单位行动

基础选择器：单个选择器构成

通配符选择器
元素选择器
类选择器
ID 选择器

复合选择器：把多种基础选择器综合运用起来

后代选择器
子选择器
并集选择器
伪类选择器

4.1 通配符选择器（`*`）

使用 * 的定义选中页面上的所有元素。

示例：

* {margin: 0;padding: 0;
}

作用： 常用于页面初始化，清除浏览器默认的边距。

4.2 元素选择器

直接使用标签名，选中所有该标签的元素。

特点：

能快速为同一类型的标签都选择出来
但是不能差异化选择

示例：

p {color: blue;
}

解释： 所有 <p> 段落文字都变为蓝色。

4.3 类选择器（`.class`）

使用 . 定义类，然后通过 class 属性应用。

特点：

差异化表示不同的标签
可以让多个标签的都使用同一个类

示例：

.red-text {color: red;font-weight: bold;
}

HTML 中使用：

<p class="red-text">这是红色文字</p>

语法细节：

类名用 . 开头的
下方标签使用 class 属性来调用
一个类可以被多个标签使用，一个标签也能使用多个类（多个类名要使用空格分割，这种做法可以让代码更好复用）
如果是长的类名，可以使用 - 分割
不要使用纯数字，或者中文，以及标签名来命名类名
一个标签可以同时使用多个类名，中间要用空格隔开，这样可以把相同的属性提取出来，达到简化代码的效果

4.4 ID 选择器（`#id`）

使用 # 定义 ID，然后通过 id 属性应用。

示例：

#main-title {font-size: 30px;color: green;
}

HTML 中使用：

<h1 id="main-title">主标题</h1>

注意：

ID 在同一个页面中唯一，不能重复使用。
CSS 中使用 # 开头表示 id 选择器
Id 选择器的值和 html 中某个元素的 id 值相同
Html 的元素 id 不必带 #
Id 是唯一的，不能被多个标签使用（是和类选择器最大的区别）

我们可以类比一下，类选择器就像是我们的姓名一样可以重复，而 id 则像我们的身份证号码是唯一的

4.5 后代选择器

选中某个元素内的子元素或后代元素（又叫做包含选择器）。

示例：

div p {color: orange;
}

HTML 结构：

<div><p>我是 div 中的段落</p>
</div>
<p>我是外面的段落</p>

效果：

只有 div 内部的 <p> 文字变成橙色，外部的 <p> 不受影响。

不同的元素之间要使用空格分离
div 是父级元素，div 里面的 p 是子级元素

4.6 子选择器

和后代选择器类似，但是只能选择子标签，不能选子标签的子标签，而后代选择器可以选

div>a {color: red;
}

<div><a href="#">a标签</a><p><a href="#">a标签2</a></p>
</div>

像上面的案例只会选择到第一个 a 标签，p 里面包着的那个不会被选择，而后代选择器会选择到

4.7 并集选择器

并集选择器主要用来进行集体声明

通过逗号分割多个元素
表示同时选中元素 1 和元素 2
任何基础选择器都可以使用并集选择器
并集选择器建议竖着写，每个选择器占一行（最后一个选择器不能加逗号）

div, h3 {color: red;}

<div>苹果</div><h3>香蕉</h3><ul>
<li>鸭梨</li>
<li>橙子</li>
</ul>

4.8 伪类选择器

(1) 链接伪类选择

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接（鼠标按下了但是未弹起）

如何让一个已经被访问过的链接恢复成未访问的状态？
清空浏览器历史记录就好了，快捷键：Ctrl + shift + delete

注意

按照 LVHA 的顺序书写，例如把 active 拿到前面去，就会导致 active 失效
浏览器的 a 标签都有默认样式，一般实际开发都需要单独制定样式
实际开发

<a href="#">小猫</a>

a:link {color: black;/* 去掉 a 标签的下划线 */text-decoration: none;}a:visited {color: green;}a:hover {color: red;}a:active {color: blue;}

:hover 是完成滑动门的重要部分需要重要掌握

(2) : focuce 伪类选择器
选取获取焦点的 input 表单元素

<div class="three"><input type="text"><input type="text"><input type="text"><input type="text">
</div>

.three>input:focus {color: red;
}

此时被选中的表单的字体就会变成红色

<style>.font-family .one{font-family:'Microsoft YaHei';}
</style>

五、常用的元素属性

CSS 中属性有很多，可以参考文档
CSS参考文档

千万不要死记硬背，用什么学什么，用多了就记住了，多写代码

CSS 提供了丰富的属性来控制网页元素的外观，这些属性是网页设计的核心基础。

在实际开发中，最常用的元素属性主要包括：

字体属性 —— 控制文字的字体、大小、粗细、样式
文本属性 —— 控制文字颜色、对齐方式、装饰、缩进、行高
背景属性 —— 控制背景颜色、背景图片、平铺、位置、尺寸
圆角矩形属性 —— 控制元素边角的圆润效果

接下来，我们将逐一详细讲解。

5.1 字体属性（Font Properties）

字体属性主要用于控制网页中文字的视觉效果，让文字具有更好的可读性和美观度。

1）设置字体：`font-family`

font-family 用于设置文本的字体。

语法：

font-family: 字体1, 字体2, 字体3, 通用字体族;

关键点：

浏览器会从左到右依次寻找字体，找到后立即使用，不再继续查找。
最后一个字体通常使用通用字体族，例如 serif（衬线字体）、sans-serif（无衬线字体）、monospace（等宽字体）。
如果字体名称包含空格，必须用引号包裹，如 "Microsoft YaHei"。

示例：

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

解释：

优先使用微软雅黑
没有微软雅黑则使用宋体
没有宋体则使用 Arial
最后使用系统默认的无衬线字体

字体名称可以用中文，但是不建议
多个字体之间使用逗号分隔（从左到右查找字体，如果都找不到，会使用默认字体。）
如果字体名有空格，使用引号包裹
建议使用常见字体，否则兼容性不好

常见的字体族分类：

通用字体族	示例字体	特点
serif	宋体、Times New Roman	字体末端有装饰线，适合正文
sans-serif	微软雅黑、Arial	无衬线，现代简洁风格
monospace	Courier New	等宽字体，适合代码展示
cursive	Comic Sans MS	手写体风格
fantasy	Papyrus	装饰字体

2）字体大小：`font-size`

font-size 用于设置文字的大小。

常用单位：

单位	说明	示例
px	像素，绝对大小，最常用	16px
em	相对父元素字体大小的倍数	1.5em
rem	相对 HTML 根元素字体大小的倍数	1rem
%	相对父元素字体大小的百分比	120%

不同的浏览器默认字号不一样，最好给一个明确值（chrome 默认是 16 px）
可以给 body 标签使用 font-size
要注意单位 px 不要忘记
标题标签需要单独指定大小

注意：实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮

示例：

h1 {font-size: 32px; /* 标题文字较大 */
}
p {font-size: 16px; /* 段落文字常用大小 */
}

em 和 rem 的区别：

假设 html 标签的字体大小是 16px：

单位	计算方式	实际大小
1em	相对父元素字体大小	父元素 16px → 1em = 16px
1rem	相对 html 根字体大小	根 16px → 1rem = 16px

html {font-size: 16px;
}div {font-size: 20px;
}div p {font-size: 1em;  /* 20px */
}div span {font-size: 1rem; /* 16px */
}

开发建议：

标题类文字通常使用 px

响应式布局和移动端建议使用 rem 或 em

3）字体粗细：`font-weight`

控制文字的粗细，常用来强调重点或优化排版。

常用值：

值	说明	对应数值
normal	默认正常字体	400
bold	加粗	700
lighter	比父元素更细	相对值
bolder	比父元素更粗	相对值
100-900	数值方式，100 最细，900 最粗	-

可以使用数字表示粗细
700==bold，400 是正常粗细 400==normal
取值范围是 100~900

示例：

h1 {font-weight: bold; /* 加粗 */
}p {font-weight: 400; /* 普通粗细 */
}

扩展技巧：

.very-bold {font-weight: 900;
}

适合标题或需要强烈视觉强调的文字。

4）文字样式：`font-style`

控制文字是否为斜体，常用于强调或表示外文词汇。

常用值：

值	说明
normal	正常（默认）
italic	斜体
oblique	倾斜（不常用）

示例：

em {font-style: italic;
}

效果：

<em> 标签内容显示为斜体。

5.2 文本属性（Text Properties）

文本属性用于控制文字的颜色、对齐方式、装饰等细节，是排版设计的核心。

1）文本颜色：`color`

设置文字的颜色。

颜色表示方法：

表示方式	示例	说明
颜色名称	red, blue	简单易记，但选择少
十六进制	#ff0000, #333	常用，#333 表示 #333333
RGB	rgb(255, 0, 0)	红、绿、蓝三色组合
RGBA	rgba(255, 0, 0, 0.5)	透明度控制，0-1 之间

示例：

p {color: #333333;
}.title {color: rgba(255, 0, 0, 0.8); /* 半透明红色 */
}

拓展知识：
rgb 和 rgba 都是 CSS 中常用的颜色表示方式。

rgb 代表 红色（Red）、绿色（Green） 和 蓝色（Blue） 三种光的强度值，通过这三种颜色的不同组合，几乎可以表示出所有颜色。每个颜色通道的取值范围是 0 ~ 255，0 代表该颜色通道完全没有，255 代表颜色最强。例如：rgb(255, 0, 0) 表示纯红色，因为红色通道值为 255，而绿色和蓝色为 0。
rgba 是在 rgb 的基础上增加了 Alpha 通道，用于表示颜色的透明度。Alpha 的取值范围是 0 ~ 1，其中 0 表示完全透明，1 表示完全不透明，中间值表示半透明效果。例如：rgba(255, 0, 0, 0.5) 表示一个 50% 透明度的红色，适合制作具有层次感或叠加效果的网页元素。

请添加图片描述

口红色号不同本质上就是 RGB 值不同，好奇的就可以去看看在线调色板

2）文本对齐：`text-align`

控制文本在父容器中的水平对齐方式。
不光能控制文本对齐，也能控制图片等元素居中或者靠右

常用值：

值	说明
left	左对齐（默认）
center	居中对齐
right	右对齐
justify	两端对齐

示例：

h1 {text-align: center;
}p {text-align: justify;
}

3）文本装饰：`text-decoration`

为文字添加或去除装饰，如下划线、删除线、上划线。

常用值：

值	说明
none	无装饰
underline	下划线
line-through	删除线
overline	上划线

underline 下划线
none 啥都没有可以给 a 标签去掉下划线
overline 上划线
line-through 删除线

示例：

a {text-decoration: none; /* 去掉默认下划线 */
}

4）文本缩进：`text-indent`

控制段落首行缩进，常用于中文排版。

单位可以使用 px 或者 em
使用 em 作为单位更好，1 个 em 就是当前元素的文字大小
缩进可以是负的，表示往左缩进

示例：

p {text-indent: 2em;
}

解释：

1em = 一个字体大小
2em = 两个字符宽度

中文段落常用 2em 首行缩进，让段落结构更加清晰。

5）行高：`line-height`

控制文字行与行之间的垂直间距，便于阅读。

理论上行高指的是上下文本行之间的基线距离
HTML 中展示文字涉及到这几个基准线：
顶线
中线
基线（相当于英语四线格的倒数第二条线）
底线
内容区：底线和顶线包裹的区域

三种写法：

写法	示例	说明
数值	line-height: 1.8;	相对于字体大小的倍数
像素(px)	line-height: 30px;	固定值，绝对间距
百分比(%)	line-height: 180%;	相对字体大小的百分比

示例：

p {font-size: 16px;line-height: 1.8;
}

开发建议：
一般正文的行高为 1.5~1.8 倍字体大小，便于阅读。

5.3 背景属性（Background Properties）

背景属性用于控制网页元素的背景样式，是网页美化的重要手段。

1）背景颜色：`background-color`

为元素添加纯色背景。

示例：

div {background-color: lightblue;
}

常见应用：

按钮背景色
区块分隔

2）背景图片：`background-image`

为元素添加背景图片。

语法：

background-image: url("图片路径");

示例：

div {background-image: url("images/bg.jpg");
}

比 image 更方便控制位置 (图片在盒子中的位置)

注意:

url 不要遗漏
url 可以是绝对路径, 也可以是相对路径
url 上可以加引号, 也可以不加

3）背景平铺：`background-repeat`

控制背景图片是否平铺。

值	说明
repeat	默认，水平垂直都平铺
no-repeat	不平铺
repeat-x	仅水平平铺
repeat-y	仅垂直平铺
背景颜色和背景图片可以同时存在, 背景图片在背景颜色的上放

示例：

div {background-image: url("bg.jpg");background-repeat: no-repeat;
}

4）背景位置：`background-position`

控制背景图片在元素中的位置。

参数有三种风格:

方位名词: (top, left, right, bottom)
精确单位: 坐标或者百分比 (以左上角为原点)
混合单位: 同时包含方位名词和精确单位

值示例	说明
left top	左上角
center center	居中
right bottom	右下角
50% 50%	精确定位

示例：

div {background-position: center center;
}

注意:

如果参数的两个值都是方位名词, 则前后顺序无关, (top left 和 left top 等效)
如果只指定了一个方位名词, 则第二个默认居中 (left 则意味着水平居中, top 意味着垂直居中)
如果参数是精确值, 则第一个肯定是 x, 第二个肯定是 y (x, y)
如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中
如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标

注意:计算机上的平面坐标系与我们数学上的右手系不一样, 是左手系 x 轴向右为正, y 向下为正, xy 的交点为原点

5）背景尺寸：`background-size`

控制背景图片的缩放方式。

值	说明
auto	默认大小，不缩放
cover	等比例放大，填满容器
contain	等比例缩放，完整显示
100px 200px	自定义宽高

可以填具体的数值: 如 40 px 60 px 表示宽度为 40 px, 高度为 60 px
也可以填百分比: 按照父元素的尺寸设置
cover: 把背景图像扩展到足够大, 以至于可以覆盖整个区域, 但是背景图像部分区域可能看不到了
contain: 把背景图像扩展到刚好可以放下的地步, 以使其宽度和高度完全适应内容区域

示例：

div {background-size: cover;
}

5.4 圆角矩形：`border-radius`

border-radius 用于设置元素边角的圆角效果，使盒子更加圆润。

语法：

border-radius: 数值;

数值是内切圆的半径, 数值越大, 弧线越大

示例 1：四角同时设置圆角

div {width: 150px;height: 150px;background-color: orange;border-radius: 20px;
}

效果：四个角同时呈圆角。

示例 2：设置成圆形

如果元素宽高相等，将 border-radius 设置为 50%，可以得到一个圆形。

div {width: 100px;height: 100px;background-color: red;border-radius: 50%;
}

示例 3：每个角单独设置

按顺时针方向分别设置 左上 → 右上 → 右下 → 左下。

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

记忆技巧：
从左上角开始，顺时针依次设置。

六、元素的显示模式（Display / 显示类型）

概念总览

display 属性决定浏览器如何把一个元素“作为盒子”放在页面里——是当作块级(box) 来排（上下堆叠）还是当作内联(inline) 来排（跟文字在一行）。此外 display 还能把元素设为 flex、grid 等布局容器，进而改变其子元素的布局模型。(MDN Web Docs)

6.1 块级元素（Block-level elements）

行为要点（一句话）：块级元素独占一行、默认宽度撑满父容器（水平占满可用空间），可以设置 width/height/margin/padding，并产生上下外边距。常见标签：<div>, <p>, <h1>-<h6>, <ul>, <li>。

示例：

<div class="box">我是块级元素</div>
<style>
.box{background:#f0f0f0;margin:10px 0;padding:10px;
}
</style>

特点

独占一行
高度、宽度、内外边距、行高都可以控制
宽度默认是父级元素宽度的 100%（和父元素一样宽）
是一个容器（盒子），里面可以放行内和块级元素
文字类的元素内不能使用块级元素
p 标签主要用于存放文字，内部不能放块级元素尤其是 div

6.2 行内元素（Inline / 内联元素）

行为要点：内联元素不会换行，仅占据内容本身所需宽度，width/height 对大多数内联元素无效（替代元素如 img、input 等是“已替换元素”有例外）。常见标签：<span>, <a>, <strong>, <em>, <img>。

示例：

<span style="background: #ffefc4;">内联文本</span>

特点：

不独占一行，一行可以显示多个
设置高度、宽度、行高无效
左右外边距有效（上下无效），内边距有效
默认宽度就是本身的内容
行内元素只能容纳文本和其他行内元素，不能放块级元素
a 标签中不能再放 a 标签（虽然 chrome 不报错但是最好不要那么做）
a 标签可以放块级元素，但是更建议先把 a 标签用 display：block 转换为块级元素

6.3 行内元素和块级元素的区别（归纳比较）

换行：块级元素前后会换行，内联元素不换行。
宽高：块级元素可设置 width/height；内联元素通常忽略这些属性（display:inline-block 可例外）。
外边距行为：块级元素的垂直外边距会影响文档流（会发生“外边距折叠”），内联元素主要受行高影响。
用途：块级常用作布局容器，内联常用于文本标记与小范围样式。

6.4 改变显示模式（`display` 常用值与实战）

常见值与用途（示例）：

display: block; —— 把元素当块级对待。

a { display: block; } /* 链接变成块级（可设置宽高） */

display: inline; —— 强制内联。
display: inline-block; —— 内联流中但可设置宽高（很常用）。
```
.btn { display:inline-block; padding:6px 12px; }
```
display: none; —— 元素完全从渲染树移除（不可见，也不占空间）。注意：无障碍/可访问性影响（屏幕阅读器也可能忽略）。
display: flex; / display: inline-flex; —— 设为弹性容器（详见第八章）。
display: grid; —— 二维网格布局容器（Grid，适合复杂布局）。
display: contents; —— 元素自身“消失”，其子元素仿佛提升到父层级（慎用，兼容性/语义问题）。

实战小贴士：

想让 span 能设置宽高，用 inline-block；
隐藏元素通常用 display:none，但若需保留在语义/可访问性中可考虑 visibility:hidden（仍占位）或 aria-hidden。

七、盒模型（Box Model）

每个可见元素在浏览器里都是一个矩形盒子，盒子的四个层级（从内到外）是：content（内容） → padding（内边距） → border（边框） → margin（外边距）。理解盒模型对于布局计算、响应式非常重要。

7.1 边框（Border）

border 定义边框宽度、样式、颜色（border-width|border-style|border-color 或简写 border）。
边框位于 padding 之外，会增加元素的外部视觉尺寸（在 box-sizing: content-box 下不含在 width 中）。
示例：

.box{ border: 2px solid #333; padding:10px; }

（border 可单独控制每条边：border-top、border-right 等）

7.2 内边距（Padding）

padding 是内容与边框之间的空白（可单边设置 padding-top/right/bottom/left）。
padding 会增加元素的“外观占用空间”——在默认 box-sizing: content-box 下，padding 会被加到 width/height 之外。(MDN Web Docs)

7.3 外边距（Margin）

margin 是元素边框之外的间距，用于控制元素与其它元素之间的距离。
垂直外边距折叠 (margin collapsing)：相邻块级元素的垂直外边距有时会合并为较大者，而不是相加（典型源于块级流）。这点是布局时容易踩坑的关键细节。(MDN Web Docs)

7.x 盒模型与 `box-sizing`（强烈建议）

默认盒模型 box-sizing: content-box：width 只指内容区宽度，padding + border 会额外增加总宽度（会撑大盒子这时候需要手动计算宽高）。为避免计算麻烦，常见实践是将全局设置成 border-box，即 width 包含 padding 和 border，布局更直观：

推荐的全局重置：

/* 推荐放在全局样式最前面 */
*, *::before, *::after {box-sizing: border-box;
}

举例对比

/* content-box (默认) */
.box1 { width:200px; padding:10px; border:2px solid #000; }
/* 实际外部宽度 = 200 + 10*2 + 2*2 = 224px *//* border-box */
.box2 { box-sizing:border-box; width:200px; padding:10px; border:2px solid #000; }
/* 实际外部宽度 = 200px（包含 padding 和 border） */

八、弹性盒子详解（Flexbox — 一维布局）

弹性盒子（Flexbox）是用于在一维（行或列）方向上分配空间、对齐项目的强大工具，解决了传统浮动/定位下很多对齐和伸缩问题。Flexbox 设计目标是灵活地控制项目在容器内的伸缩与对齐。

8.1 基本概念（容器 vs 项目）

Flex 容器（flex container）：对某个元素设置 display: flex;（或 inline-flex）后，该元素成为容器，子元素自动成为 flex items。
主轴（main axis）：容器布局的主方向，默认是横向。
侧轴 / 交叉轴（cross axis）：与主轴垂直的方向，常用于垂直对齐。

8.2 容器常用属性（父元素）

display: flex; / inline-flex —— 启用弹性布局。
flex-direction：主轴方向，row | row-reverse | column | column-reverse。
flex-wrap：是否换行，nowrap | wrap | wrap-reverse。
justify-content：沿主轴对齐（主轴空间分配），常用值 flex-start, center, flex-end, space-between, space-around, space-evenly。
align-items：沿交叉轴对齐（单行项目），常用 stretch, flex-start, center, flex-end, baseline。
align-content：当有多行时控制行与行之间的对齐（类似 justify-content 但作用于行）。
gap（现代浏览器支持）：容器项目之间的间距（替代用 margin 的 hack）。

容器示例：

<div class="container"><div class="item">A</div><div class="item">B</div><div class="item">C</div>
</div><style>
.container{display:flex;flex-direction:row;justify-content:center; /* 主轴居中 */align-items:center;     /* 交叉轴居中 */gap:12px;height:120px;
}
.item{padding:10px 16px;background:#e3f2fd;
}
</style>

8.3 项目常用属性（子元素）

flex（简写） = flex-grow flex-shrink flex-basis，常用写法如 flex: 1;（均分剩余空间）。
order：项目在主轴的排序（数字越小越靠前，默认 0）。
align-self：覆盖容器的 align-items，针对单个项目设置交叉轴对齐方式。

项目示例（伸缩）

.item-a { flex: 2; } /* 占剩余空间的两份 */
.item-b { flex: 1; } /* 占剩余空间的一份 */

8.4 常见布局模式 & 实战技巧

水平导航栏：容器 display:flex; align-items:center;，子项设置间距。
垂直居中容器内单个元素：容器 display:flex; justify-content:center; align-items:center;，即可水平垂直都居中（非常实用）。
两端对齐（左右两端元素）：justify-content: space-between; 或用 margin-left: auto 将某项推到右侧。
响应式： 用 flex-wrap: wrap; 让项目在小宽度下自动换行；结合 flex-basis 控制每项基准宽度。