CSS

Yd Wen2026/2/24大约 24 分钟

1 简介

层叠样式表（Cascading Style Sheets）是一种样式表语言，用来描述HTML文档的呈现（美化内容）。

书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。

示例：

<title>Document</title>
<style>
    /* 选择器 {键值对} */
    p {
        color: red;
        font-size: 30px;
    }
</style>

书写规则

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

1.1 引入方式

CSS 引入方式有三种：

内部样式表：学习使用
- css 代码写在 style 标签里面
外部样式表：常用，开发使用
- CSS 代码写在单独的文件中
- 在 HTML 中用 link 标签引入
行内样式/内联样式：配合 JavaScript 使用
- css 代码写在标签的 style 属性里面

示例：

/* my.css */
div {
    color: green;
}

<!--外部样式表-->
<link rel="stylesheet" href="./my.css">
<!--行内样式-->
<span style="color: red; font-size: 30px;">span标签</span>

行内样式和内部样式表的区别

行内样式：写在 HTML 标签的 style 属性，只能对当前标签生效。
内部样式表：写在 HTML 头部的 style 标签内部，对当前页面所有标签生效。

1.2 三大特性

继承性：子级标签默认继承父级的文字控制属性。
层叠性：相同属性会覆盖（后面的覆盖前面的）；不同属性会叠加（不同属性都生效）。
优先级：即权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
- 规则：选择器优先级高的样式生效；!important 权重最高；继承权重最低。
- 公式：通配符选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < !important（选择器选中范围越大，优先级越低）。

示例：

<style>
/*!important 提权功能，提高优先级/权重到最高，慎用*/
    * {
        color: red !important;
    }
    p {
        color: orange;
    }
    .testcls {
        color: yellow;
    }
    #testid {
        color: green;
    }
</style>

<p class="testcls" id="testid" style="color: blue">1111111</p>

2 选择器

作用：查找标签，设置样式。
基础选择器
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器

2.1 标签选择器

作用：使用标签名作为选择器，选中同名标签设置相同样式。例如：p/h1/div/a/img 等。

2.2 类选择器

作用：查找标签，差异化设置标签的显示效果。

步骤：

定义类选择器：.类名
使用类选择器：标签添加 class="类名"

示例：

<style>
    /* 选择器 {键值对} */
    .red {
        color: red;
    }
    .size {
        font-size: 30px;
    }
</style>
<p class="red">1111111</p>
<div class="red size">1111111</div>

特点

一个类选择器可以给多个标签使用。
一个标签可以使用多个类名，多个类名用空格隔开。

习惯

类名自定义，不要纯数字或中文，尽量英文命名。
类名见名知意，多个单词用 - 连接，如 news-hd。

2.3 id 选择器

作用：查找标签，差异化设置标签的显示效果。

场景：id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式。

步骤：

定义 id 选择器：#id名
使用 id 选择器：标签添加 id="id名"

规则

同一个 id 选择器在一个页面只能使用一次。

示例：

<style>
    /* 选择器 {键值对} */
    #red {
        color: red;
    }
</style>
<p id="red">1111111</p>

2.4 通配符选择器

作用：查找页面所有标签，设置相同样式。

示例：

<style>
    /* 选择器 {键值对} */
    * {
        color: red;
    }
</style>
<p>1111111</p>
<div>1111111</div>

使用场景

通配符选择器 * 会选中页面所有标签，包括 html、head、body 等。
通配符选择器一般用来清除内外间距等默认样式。

2.5 复合选择器

定义：由两个或多个基础选择器，通过不同方式组合而成。

作用：更准确、更高效地选择目标元素（标签）。

后代选择器

作用：选择某个元素的所有后代元素，包括儿子、孙子等。

写法：父选择器子选择器 {CSS属性}，父子选择器之间用空格隔开。

子代选择器

作用：选择某个元素的子代元素（最近的子级）。

写法：父选择器 > 子选择器 {CSS属性}，父子选择器之间用大于号隔开。

并集选择器

作用：选择多组标签设置相同的样式。

写法：选择器1，选择器2，...选择器n，{CSS属性}，选择器之间用 , 隔开。

交集选择器

作用：选择同时满足多个条件的元素。

写法：选择器1选择器2{CSS属性}，选择器之间连写不用隔开。

示例：

/*标签选择器类选择器{CSS属性}*/
p.box {
    color: red;
}

注意

如果交集选择器中有标签选择器，标签选择器必须写在最前面。

2.6 伪类选择器

伪类表示元素状态，选择元素某个状态设置样式。

写法：选择器:状态 {CSS属性}

例如：鼠标悬停状态（伪类）：选择器:hover {CSS属性}

伪类-超链接状态

超链接默认有 4 种状态：
- 未访问：a:link
- 已访问：a:visited
- 鼠标悬停：a:hover
- 点击时（松开不生效）：a:active
如果要设置以上 4 种状态，必须按 LVHA 顺序写，否则不生效。

结构伪类选择器

作用：根据元素的结构关系查找元素。

选择器	说明
E:first-child	查找第一个 E 元素
E:last-child	查找最后一个 E 元素
E:nth-child(n)	查找第 n 个 E 元素

nth-child 公式

2n：偶数标签
2n+1 或 2n-1：奇数标签
5n：5 的倍数的标签
n+5：第 5 个以后的标签
-n+5：第 5 个以前的标签

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。

选择器	说明
E::before	在 E 元素里面最前面添加一个伪元素
E::after	在 E 元素里面最后面添加一个伪元素

示例：

<style>
    /* 选择器 {content: '内容'} */
    p::before {
        content: '这是一个段落前缀';
    }
</style>
<p>段落内容</p>

注意

必须设置 content 属性，设置伪元素内容，无内容则取空。
伪元素默认行内显示模式。
优先级和标签选择器相同。

拓展：Emmet 写法

参考 Emmet 写法

3 文本属性

常见文字属性

描述	属性
字体大小	font-size
字体粗细	font-weight
字体倾斜	font-style
行高	line-height
字体族	font-family
字体复合属性	font
文本缩进	text-indent
文本对齐	text-align
修饰线	text-decoration
颜色	color

3.1 font-size 字体大小

font-size 用于设置字体大小，数字 + px（PC端网页最常用单位 px）。

注意

font-size 属性值没有单位时，属性不生效（浏览器默认字号为 16px）。

3.2 font-weight 字体粗细

font-weight 用于设置字体粗细（400 为正常，700 为加粗）。

属性值：

数字（更常用）：400 / 700。
关键词：normal（400）/ bold（700）

3.3 font-style 字体倾斜

font-style 用于设置字体倾斜（italic 为倾斜，normal 为正常）。

使用场景

font-style 一般用于清除文字默认倾斜样式。

3.4 line-height 行高

line-height 用于设置行高。

属性值：

数字（当前标签的 font-size 属性值的倍数）。
数字 + px。

行高

行高 = 字号 * 行高倍数
行高 = 上边距 + 文本高度 + 下边距
实际测量行高方法：相邻行文字顶部（底部）间距。
单行文字垂直居中技巧：行高属性值等于盒子高度属性值。

3.5 font-family 字体族

font-family 用于设置字体族。

属性值：字体名称（必须是系统字体，否则显示默认字体）。

示例：

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

提示

多个字体名称之间用逗号隔开，执行顺序从左向右。
最后一个字体设置为字体族名，名称一般为 sans-serif（无衬线字体）。

3.6 font 字体复合属性

font 用于设置字体复合属性。

属性值：是否倾斜是否加粗字号（必填）/行高字体（必填）

示例：

div {
    <!-- 是否倾斜 是否加粗 字号/行高 字体  -->
    font: italic 700 30px/2 楷体;
    font: 30px 楷体;
}

使用场景

font 复合属性一般用于设置网页公共文字样式。
写法固定为“是否倾斜是否加粗字号/行高字体”，必须按顺序书写，字号和字体必须书写，否则 font 属性不生效。

3.7 text-indent 文本缩进

text-indent 用于设置文本缩进。

属性值：

数字 + px
数字 + em（推荐，1em 等于当前字号 ，常用用于段落首行缩进）

提示

段落首行缩进一般设置为 2em。

3.8 text-align 文本对齐

text-align 用于设置文本对齐。

属性值：

left（默认）：左对齐。
center：居中对齐。
right：右对齐。

提示

text-align 常用属性值为 center（居中对齐）。

图片居中对齐

text-align 本质是控制内容对齐方式，属性要设置给父容器。
设置图片居中对齐：用父容器包裹图片，设置父容器 text-align: center;。

3.9 text-decoration 修饰线

text-decoration 用于设置修饰线（none 为无修饰线，underline 为下划线）。

属性值：

none（默认）：无修饰线。
underline：下划线。
line-through：删除线。
overline：上划线。

提示

text-decoration 常用属性值为 underline（下划线）。

3.10 color 颜色

color 用于设置文本颜色。

属性值：

关键字：red/green...
rgb：rgb(r, g, b)
rgba：rgba(r, g, b, a)
十六进制：#RRGGBB

颜色表示方法

表示方式	属性值	说明	使用场景
关键字	英文单词	red/green...	学习测试
rgb	rgb(r, g, b)	取值 0-255	了解
rgba	rgba(r, g, b, a)	a 表示透明度，取值 0-1	开发使用，实现透明色
十六进制	`#RRGGBB`	`#00ff00` ，简写 #0f0	开发使用（从设计稿复制颜色值）

更多属性参考：CSS3 字体。

拓展：调试工具

参考：前端调试工具

4 背景属性

描述	属性	属性值
背景色	background-color	颜色
背景图	background-image	url (背景图 URL)
背景图平铺方式	background-repeat	no-repeat 不平铺；repeat 平铺（默认）；repeat-x 沿水平方向平铺；repeat-y 沿垂直方向平铺
背景图位置	background-position	关键字：left/right/center/top/bottom；坐标：数字（有正负）+px；两种混用
背景图缩放	background-size	关键字：cover（覆盖，图片部分可能看不见）/ contain（填充，背景部分可能空白）；百分比：根据盒子尺寸（宽度）计算图片大小；数字+px（不常用）
背景图固定	background-attachment	fixed（背景图不随内容滚动）
背景复合属性	background	背景色背景图平铺方式位置/缩放固定（空格隔开，不区分先后顺序）

背景图位置规则

示例：

background-position: 0 0;
background-position: left top;
background-position: 50px center;
background-position: bottom;
background-position: 50px;

关键字取值方式写法，可以颠倒取值顺序。
可以只写一个关键字，另一个方向默认居中。
可以只写一个数字表示水平偏移量，垂直方向居中。

5 显示模式

显示模式是标签（元素）的显示方式。

块级元素：div
- 独占一行
- 宽度默认父级 100%
- 添加宽高属性生效
行内元素：span
- 一行多个
- 尺寸包裹内容
- 添加宽高不生效
行内块元素：img
- 一行多个
- 尺寸包裹内容
- 添加宽高生效

使用 display 属性转换显示模式。属性值：

block 块级
inline-block 行内块
inline 行内（不常用）

6 盒子模型

作用：布局网页，摆放盒子和内容。

6.1 组成

盒子组成四部分：

内容区域：width 和 height
内边距：padding（内容和盒子边缘之间）
边框线：border
外边距：margin（盒子外）

6.2 边框线

属性：border / border-left / border-right / border-top / border-bottom

属性值：粗细样式颜色（不区分顺序）

常用线条样式：

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

简写

输入 bd + 方向首字母，VS Code 会提示对应属性。

6.3 内边距

属性：padding / padding-left / padding-right / padding-top / padding-bottom

属性值：数字+px

多值写法：

一值：四个方向
二值：上下，左右
三值：上，左右，下
四值：上，右，下，左

内边距规则

从左上角开始顺时针赋值，没有取值的与对角取值相同。

6.4 尺寸计算

默认情况：盒子尺寸 = 内容 + border + 内边距
结论：给盒子加 border / padding 都会撑大盒子
解决：
- 手动减法：减掉 border / padding 尺寸
- 内减模式（常用）：box-sizing: border-box

6.5 外边距

外边距设置方式同内边距。

将左右外边距设置为 auto，可以使得版心居中（盒子必须设置宽度）。

拓展：元素边距问题

合并现象：

场景：垂直排列的兄弟元素，上下 margin 会合并。
现象：取两个 margin 中的较大值生效。

塌陷问题：

场景：父子级的标签，子级添加上外边距会产生塌陷问题。
现象：导致父级一起向下移动。
三种解决方法：
1. 取消子级 margin，父级设置 padding（推荐）
2. 父级设置 overflow: hidden
3. 父级设置 border-top

外边距塌陷问题详解

什么是外边距塌陷？

外边距塌陷（Margin Collapse）是 CSS 中的一种现象，指当两个或多个元素的垂直外边距相遇时，它们的外边距会合并成一个单一的外边距。这种现象主要发生在垂直方向上，水平方向上不会发生。

父子元素的外边距塌陷

当子元素设置了上外边距（ margin-top ）时，这个外边距会“传递”给父元素，导致父元素也向下移动，这就是父子级标签的外边距塌陷问题。

为什么会发生塌陷？

CSS 规范中定义了外边距塌陷的规则，这是为了让页面布局更加合理和可预测。当元素的顶部或底部外边距与另一个元素的顶部或底部外边距相遇时，它们会合并。

行内元素-内外边距问题：

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置（只改变水平位置）。
解决方法：给行内元素添加 line-height 可以改变垂直位置。

span {
    margin: 50px;
    padding: 20px;
    /*添加行高，可以改变垂直位置*/
    line-height: 100px;
}

6.6 元素溢出

作用：控制溢出元素的内容的显示方式。

属性：overflow

属性值：

hidden：溢出隐藏（不显示溢出内容，常用）
scroll：溢出滚动（无论是否溢出，都显示滚动条位置）
auto：溢出滚动（溢出时才显示滚动条）

清除默认样式

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

6.7 圆角与阴影

圆角

作用：设置元素的外边框为圆角。

属性：border-radius

属性值：

数字 + px
百分比（最大为50%）

圆角规则

从左上角开始顺时针赋值，没有取值的与对角取值相同。

常见应用：

正圆形状：border-radius: 50% 给正方形盒子设置圆角属性值为宽高的一半。
胶囊形状：给长方形盒子设置圆角属性为盒子高度的一半。

阴影

作用：设置元素的阴影效果。

属性：box-shadow

属性值：

水平偏移量垂直偏移量模糊半径扩散半径颜色内外阴影

注意

水平偏移量和垂直偏移量必填。
默认是外阴影，设置内阴影需要添加 inset 关键字（不常用）。

7 标准流、浮动和 Flex 布局

7.1 标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则。例如，块元素独占一行，行内元素可以一行显示多个。

7.2 浮动

作用：将元素从标准流中脱离出来，允许其他元素环绕在其周围。如，让块元素水平排列。

属性：float

属性值：

left：向左浮动
right：向右浮动

示例：

<style>
    .left {
        float: left;
        width: 50px;
        height: 50px;
        background-color: pink;
    }

    .right {
        float: right;
        width: 50px;
        height: 50px;
        background-color: red;
    }
</style>
<div>
    <div class="left"></div>
    <div class="right"></div>
</div>

特点：

顶对齐
具备行内块显示模式特点
父级宽度不够，子级浮动元素会换行显示
脱离标准流（脱标），不占用标准流布局位置

清除浮动

场景：如果父级没有高度，子级浮动元素会脱离标准流，导致无法撑开父级高度（可能导致页面布局错乱）。

解决方法：清除浮动

额外标签法：在父级元素内容最后添加一个块级元素，设置 CSS 属性 clear: both 清除浮动。
单伪元素法：在父级元素内容最后添加一个伪元素，设置 CSS 属性 clear: both 清除浮动。
双伪元素法（推荐）：在父级元素内容开头结尾添加两个伪元素，设置 CSS 属性 clear: both 清除浮动。
overflow：父元素添加 CSS 属性 overflow: hidden 清除浮动。

<style>
    .left {
        float: left;
        width: 50px;
        height: 50px;
        background-color: pink;
    }

    .right {
        float: right;
        width: 50px;
        height: 50px;
        background-color: red;
    }

    /* 额外标签法 */
    .clearfix_child {
        /* 清除浮动 */
        clear: both;
    }

    /* 单伪元素法 */
    .clearfix_parent::after {
        content: "";
        display: block;
        clear: both;
    }

    /* 双伪元素法 */
    /* 解决外边距塌陷问题 */
    .clearfix_parent::before,
    .clearfix_parent::after {
        content: "";
        display: table;
    }
    /* 清除浮动 */
    .clearfix_parent::after {
        clear: both;
    }

    /* overflow */
    .clearfix_parent {
        overflow: hidden;
    }
</style>
<div class="clearfix_parent">
    <div class="left"></div>
    <div class="right"></div>
    <!-- 额外标签法 -->
    <!-- <div style="clear: both;"></div> -->
    <div class="clearfix_child"></div>
</div>

7.3 Flex 布局

Flex 布局也叫弹性布局，是一种一维布局模型，用于在容器中对齐和分布元素。非常适合结构化布局，提供了强大的分布和对齐能力。

Flex 模型不会产生浮动布局中的脱离标准流的现象，布局网页更简单、更灵活。

设置方式：给父元素设置 CSS 属性 display: flex 开启 Flex 布局，子元素可以自动挤压或拉伸。

常用属性：

描述	属性
创建 flex 容器	display: flex
主轴对齐方式	justify-content
侧轴对齐方式	align-items
某个弹性盒子侧轴对齐方式	align-self
修改主轴方向	flex-direction
弹性伸缩比	flex
弹性盒子换行	flex-wrap
行对齐方式	align-content

7.3.1 组成

Flex 模型组成部分：

弹性容器
弹性盒子
主轴：默认水平方向
侧轴 / 交叉轴：默认垂直方向

7.3.2 主轴侧轴对齐

主轴对齐

属性名： justify-content

属性值：

属性值	描述
flex-start	默认值，向主轴起始位置对齐
flex-end	向主轴结束位置对齐
center	向主轴中心对齐
space-between	向主轴两端对齐，项目之间间距相等
space-around	向主轴两端对齐，项目之间间距相等，项目到容器边框的距离是项目之间间距的一半
space-evenly	向主轴两端对齐，项目之间间距相等，项目到容器边框的距离也相等

侧轴对齐

属性名：

align-items：所有弹性盒子的侧轴对齐方式（给弹性容器设置）
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

属性值：

属性值	描述
flex-start	默认值，向侧轴起始位置对齐
flex-end	向侧轴结束位置对齐
stretch	默认值，侧轴方向没有设置尺寸时向侧轴方向拉伸，占满侧轴方向空间，否则不生效
center	向侧轴中心对齐

7.3.3 修改主轴方向

属性名： flex-direction

属性值：

属性值	描述
row	默认值，主轴方向为水平方向
row-reverse	主轴方向为水平方向，但是元素顺序相反
column	主轴方向为垂直方向（常用）
column-reverse	主轴方向为垂直方向，但是元素顺序相反

7.3.4 弹性盒子伸缩比

控制弹性盒子的主轴方向的尺寸。

属性： flex

属性值：整数，表示弹性盒子占用弹性容器剩余尺寸的份数。

提示

默认情况下，主轴方向尺寸是靠内容撑开（包裹内容），侧轴默认拉伸。

7.3.5 弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

父级无法包裹所有弹性盒子时，需要设置换行。

属性名： flex-wrap

属性值：

属性值	描述
nowrap	默认值，不换行
wrap	换行，第一行在上方
wrap-reverse	换行，第一行在下方

7.3.6 行对齐方式

属性名： align-content

属性值：

属性值	描述
flex-start	默认值，向侧轴起始位置对齐
flex-end	向侧轴结束位置对齐
center	向侧轴中心对齐
space-between	向侧轴两端对齐，项目之间间距相等
space-around	向侧轴两端对齐，项目之间间距相等，项目到容器边框的距离是项目之间间距的一半
space-evenly	向侧轴两端对齐，项目之间间距相等，项目到容器边框的距离也相等

注意

align-content 属性仅在换行情况下生效。

8 定位

作用：灵活改变盒子的位置。

实现步骤：

开启定位模式

属性名： position

属性值：

属性值	描述
static	默认值，静态定位，不开启定位功能，元素位置由正常流决定
relative	相对定位，开启定位功能，元素位置由正常流决定，但是可以通过偏移量调整位置
absolute	绝对定位，开启定位功能，元素位置不再由正常流决定，而是根据最近的开启了定位功能的父级元素进行定位
fixed	固定定位，开启定位功能，元素位置不再由正常流决定，而是根据浏览器窗口进行定位

设置偏移量：设置盒子位置

属性名： top、bottom、left、right

属性值：长度单位，表示偏移量的大小。

提示

偏移量属性值可以是负数，但是不能是百分比。

8.1 相对定位

相对定位：position: relative;

示例：

div {
  position: relative;
  top: 10px;  /* 相对标准流位置向下移动 10px */
  left: 10px;  /* 相对标准流位置向右移动 10px */
}

特点

参照物：相对定位的盒子，是根据其标准流的位置进行定位的。
不脱离标准流：相对定位的盒子，仍然占用标准流的位置，其他盒子会根据其定位后的位置进行调整。
显示模式：改变盒子的显示模式，改为行内块显示模式（宽高生效）。

使用场景

相对定位不单独使用，一般配合绝对定位使用。

8.2 绝对定位

绝对定位：position: absolute;

使用场景

子级绝对定位，父级相对定位（子绝父相）。
定位居中。

8.2.1 子绝父相

示例：

div {
  position: absolute;
  top: 10px;  /* 相对最近开启了定位功能的父级元素位置向下移动 10px */
  left: 10px;  /* 相对最近开启了定位功能的父级元素位置向右移动 10px */
}

特点

参照物：绝对定位的盒子，是根据其最近开启了定位功能的父级元素进行定位的。
脱离标准流：绝对定位的盒子，不再占用标准流的位置，其他盒子会占用其空出的位置。
显示模式：不改变盒子的显示模式。

8.2.2 定位居中

实现步骤：

开启绝对定位
设置水平、垂直偏移为 50%
子级向左、向上移动自身宽、高的一半

示例：

div {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 写法一：左、上外边距为尺寸的一半 */
  margin-top: -50px;  /* 子级高度的一半 */
  margin-left: -50px;  /* 子级宽度的一半 */
  /* 写法二（常用）：子级向左、向上移动自身宽、高的一半 */
  transform: translate(-50%, -50%);
}

8.3 固定定位

固定定位：position: fixed;

示例：

div {
  position: fixed;
  top: 10px;  /* 相对浏览器窗口位置向下移动 10px */
  left: 10px;  /* 相对浏览器窗口位置向右移动 10px */
}

特点

参照物：固定定位的盒子，是根据浏览器窗口进行定位的。
脱离标准流：固定定位的盒子，不再占用标准流的位置，其他盒子会占用其空出的位置。
显示模式：行内块显示模式（宽高生效）。

使用场景

固定定位一般用于固定在页面某个位置的元素，例如导航栏、侧边栏等。

8.4 堆叠层级

默认效果：按照标签书写顺序，后面的元素堆叠层级越高，越显示在上面（后来居上）。

作用：设置定位元素的层级顺序，改变定位元素的显示层级。

属性名： z-index

属性值：整数，表示堆叠层级的顺序。

默认值： 0

示例：

div {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;  /* 堆叠层级为 1，显示在下面 */
}
div {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;  /* 堆叠层级为 2，显示在上面 */
}

特点

数值越大，堆叠层级越高，越显示在上面。
数值越小，堆叠层级越低，越显示在下面。

定位总结

定位模式	属性值	是否脱标	显示模式	参照物
相对定位	relative	否	保持标签原有显示模式	自己原来位置
绝对定位	absolute	是	行内块特点	1. 已经定位的祖先元素 2. 浏览器可视区
固定定位	fixed	是	行内块特点	浏览器窗口

拓展：CSS 精灵

参考 CSS 精灵

拓展：字体图标

参考字体图标

拓展：垂直对齐、过渡与修饰效果

垂直对齐方式

属性名：vertical-align

属性值：

baseline：垂直对齐到基线（默认值）。
top：垂直对齐到顶部。
middle：垂直对齐到中间。
bottom：垂直对齐到底部。

示例：

<style>
  div {
    vertical-align: middle;
  }
</style>
<body>
  <div>
    <img src="./iconfont/iconfont.svg" alt="">
    文字内容
  </div>
<body>

提示

垂直对齐方式而本质上是修改基线位置。
浏览器把行内块、行内标签作为文字处理，默认按基线对齐。此时图片底部就有空白，将图片转块元素可以解决（适合只有图片的情况）。

img {
  display: block;
}

过渡效果

作用：为一个元素在不同状态之间切换的时候添加平滑的过渡效果。

属性名（复合属性）：transition

属性值：过渡的属性过渡时间（s）

transition-property：指定过渡效果的属性（例如：width、height、background-color 等）。
transition-duration：指定过渡效果的持续时间（例如：0.5s、1s 等）。
transition-timing-function：指定过渡效果的时间函数（例如：ease、linear、ease-in-out 等）。
transition-delay：指定过渡效果的延迟时间（例如：0.5s、1s 等）。

示例：

img {
  width: 200px;
  height: 200px;
  /* 设置给元素本身 */
  transition: all 1s;
}
img:hover {
  width: 300px;
  height: 300px;
}

提示

过渡属性可以是具体的 CSS 属性
也可以设置为 all（属性值不同的所有属性都添加过渡效果，常用）
transition 设置给元素本身

透明度

作用：设置整个元素的透明度，包括背景、内容、子元素等。

属性名：opacity

属性值：0 到 1 之间的小数，表示元素的透明度。

0：完全透明
1：完全不透明（默认值）

示例：

div {
  opacity: 0.5;  /* 半透明 */
}

提示

透明度会影响元素及其子元素的透明度。

光标类型

作用：设置鼠标悬停在元素上时的光标样式。

属性名：cursor

属性值：

default：默认光标（箭头）
pointer：指针光标（手型，提示用户可点击）
text：文本光标（I 型，提示用户可输入文本）
move：移动光标（十字箭头，提示用户可移动元素）

示例：

div {
  cursor: pointer;  /* 指针光标 */
}

提示

光标类型可以设置给所有元素，包括行内元素。

参考资料

前端Web开发HTML5+CSS3+移动web视频教程