【CSS3】完整修仙功法
目录
- CSS 基本概念
- CSS 的定义
- CSS 的作用
- CSS 语法
- CSS 引入方式
- 内部样式表
- 外部样式表
- 行内样式表
- 选择器
- 基础选择器
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
- 画盒子
- 文字控制属性
- 字体大小
- 字体粗细
- 字体倾斜
- 行高
- 字体族
- font 复合属性
- 文本缩进
- 文本对齐
- 文本修饰线
- 文字颜色
- 复合选择器
- 后代选择器
- 子选择器
- 并集选择器
- 交集选择器
- 伪类选择器
- CSS 三大特性
- 继承性
- 层叠性
- 优先级
- 背景属性
- 背景色
- 背景图
- 背景图平铺方式
- 背景图位置
- 背景图缩放
- 背景图固定
- 背景复合属性
- 显示模式
- 显示模式
- 块级元素
- 行内元素
- 行内块元素
- 转换显示模式
- 结构伪类选择器
- 结构伪类选择器
- nth-child(公式)
- 伪元素选择器
- 盒子模型
- 组成
- 边框线
- 内边距
- 尺寸计算
- 外边距
- 边距问题
- 外边距-合并现象
- 外边距-塌陷问题
- 行内元素-内外边距问题
- 清除默认样式
- 元素溢出
- 圆角
- 圆角应用
- 正圆形状
- 胶囊形状
- 阴影
- 标准流
- 概念
- 元素类型及排列规则
- 块级元素
- 行内元素
- 行内块元素
- 标准流的特点
- 打破标准流
- 浮动
- 基本使用
- 清除浮动
- 额外标签法
- 单伪元素法
- 双伪元素法（推荐）
- overflow 法
- Flex 布局
- Flex 组成
- 主轴对齐方式
- 侧轴对齐方式
- 修改主轴方向
- 弹性盒子伸缩比
- 弹性盒子换行
- 行对齐方式
- 定位
- 相对定位
- 绝对定位
- 定位居中
- 固定定位
- 堆叠层级 z-index
- CSS 精灵
- 字体图标
- 下载字体
- 使用字体
- 垂直对齐方式
- 过渡
- 修饰属性
- 透明度
- 光标类型
- 平面转换
- 平移
- 旋转
- 改变旋转原点
- 多重转换
- 缩放
- 倾斜
- 渐变
- 线性渐变
- 径向渐变
- 空间转换
- 平移
- 视距
- 旋转
- 立体呈现
- 缩放
- 动画
- 使现步骤
- animation 复合属性
- animation 属性拆分
- 逐帧动画
- 多组动画
CSS 基本概念
CSS 的定义
CSS（Cascading Style Sheets）即层叠样式表，是一种用于描述网页呈现样式的标记性语言，主要用于定义 HTML（超文本标记语言）或 XML（可扩展标记语言）文档的显示风格。
CSS 的作用
CSS 可以用来设置网页元素的字体、颜色、大小、布局、背景等各种样式属性。通过将样式与内容分离，使得网页的维护和更新更加容易，同时也提高了网页的性能和用户体验。例如，通过 CSS 可以将整个网站的标题字体统一设置为某种特定的字体和大小，而无需在每个 HTML 文件中单独设置。
CSS 语法
CSS 语法由选择器（Selector）和声明块（Declaration Block）组成。
选择器{
属性名 : 属性值;
}
选择器用于指定要应用样式的 HTML 元素，声明块则包含一个或多个属性 - 值对，用于定义元素的样式。
p {
color: blue;
font-size: 16px;
}
上述代码中，p是选择器，表示要选择所有的<p>标签元素；color: blue;和font-size: 16px;是声明块中的属性 - 值对，分别设置了文本颜色为蓝色和字体大小为 16 像素。
CSS 引入方式
内部样式表
将 CSS 代码写在 HTML 代码中：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>内部样式表</p>
</body>
</html>
注意事项：
- CSS 应该写在 HTML 中 title 标签的下方
- CSS 代码要写在
<style></style>块中
外部样式表
CSS 代码写在单独的 CSS 文件中（.css），在 HTML 中使用 link 标签引入：<link rel = "stylesheet" href = "css文件相对路径">：
p{
color: green;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
<p>外部样式表</p>
</body>
</html>
行内样式表
CSS 写在标签的 style 属性值里：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
</head>
<body>
<p style="color: purple;">外部样式表</p>
</body>
</html>
选择器
基础选择器
标签选择器
标签选择器：使用标签名作为选择器 → 选中同名标签设置相同样式
语法格式：
标签名{
属性名 : 属性值;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>这是第一行字</p>
<div>这是第二行字</div>
<p>这是第三行字</p>
<div>这是第四行字</div>
<p>这是第五行字</p>
</body>
</html>
注意事项：选中同名标签设置相同的样式，无法差异化同名标签的样式
类选择器
作用：查找标签，差异化设置标签的显示效果
步骤：
- 定义类选择器 → .类名
- 使用类选择器 → 标签添加 class = “类名”
语法格式：
.类名{
属性名 : 属性值;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.red{
color: red;
}
</style>
</head>
<body>
<p>这是第一行字</p>
<p class="red">这是第二行字</p>
<p>这是第三行字</p>
<p class="red">这是第四行字</p>
<p>这是第五行字</p>
</body>
</html>
注意事项：
- 一个类选择器可以给多个标签使用
- 一个标签可以使用多个类名，class 属性值写多个类名，类名之间用空格隔开
id 选择器
作用：查找标签，差异化设置标签的显示效果
步骤：
- 定义 id 选择器 → #id 名
- 使用 id 选择器 → 标签添加 id = “id 名”
语法格式：
#id 名{
属性名 : 属性值;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
#red{
color: red;
}
</style>
</head>
<body>
<p>这是第一行字</p>
<p id="red">这是第二行字</p>
<p>这是第三行字</p>
<p>这是第四行字</p>
<p>这是第五行字</p>
</body>
</html>
注意事项：同一个 id 选择器在一个页面只能使用一次
通配符选择器
作用：查找页面所有标签，设置相同样式
通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
语法格式：
*{
属性名 : 属性值;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
*{
color: yellow;
}
</style>
</head>
<body>
<p>这是第一行字</p>
<p>这是第二行字</p>
<p>这是第三行字</p>
<p>这是第四行字</p>
<p>这是第五行字</p>
</body>
</html>
画盒子
目标：使用合适的选择器画盒子
新属性：
| 属性名 | 说明 |
|---|---|
| width | 宽度 |
| height | 高度 |
| background-color | 背景色 |
如图，《关雎》的宽为 360、高为 125，背景色为红色；《蒹葭》的宽为 700、高为75，背景色为蓝色，按照该要求画盒子
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.first{
width: 360px;
height: 125px;
background-color:red;
}
.second{
width: 700px;
height: 75px;
background-color:blue;
}
</style>
</head>
<body>
<div class="first">
<ul>
<li>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</li>
<li>参差荇菜，左右流之。窈窕淑女，寤寐求之。</li>
<li>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</li>
<li>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</li>
<li>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</li>
</ul>
</div>
<div class="second">
<ul>
<li>蒹葭苍苍，白露为霜。所谓伊人，在水一方。溯洄从之，道阻且长。溯游从之，宛在水中央。</li>
<li>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。溯洄从之，道阻且跻。溯游从之，宛在水中坻。</li>
<li>蒹葭采采，白露未已。所谓伊人，在水之涘。溯洄从之，道阻且右。溯游从之，宛在水中沚。</li>
</ul>
</div>
</body>
</html>
文字控制属性
字体大小
属性名：font-size
属性值：文字尺寸，PC 端网页最常用的单位 px（像素）
格式：
选择器{
font-size: 30px;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.bigger{
font-size: 30px;
}
</style>
</head>
<body>
<p>这是一段普通文字</p>
<p class="bigger">这是一段加大了的文字</p>
</body>
</html>
结果如下：
字体粗细
属性名：font-weight
属性值：
- 正常：normal（400）
- 加粗：bold（700）
格式：
选择器{
font-weight: normal;
font-weight: 400;
font-weight: bold;
font-weight: 700;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
h3{
font-weight: normal;
}
p{
font-weight: bold;
}
h4{
font-weight: 400;
}
div{
font-weight: 700;
}
</style>
</head>
<body>
<h3>这是h3标签</h3>
<p>这是一句文字</p>
<h4>这是h4标签</h4>
<div>这是一段文字</div>
</body>
</html>
结果如下：
字体倾斜
作用：清除文字默认的倾斜效果
属性名：font-style
属性值：
- 正常：normal
- 倾斜：italic
格式：
选择器{
font-style: normal;
ront-style: italic;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.normaldemo{
font-style: normal;
}
.italicdemo{
font-style: italic;
}
</style>
</head>
<body>
<em>这是一段倾斜的字</em>
<br>
<em class="normaldemo">这是一段倾斜的字使用 font-style 后的效果</em>
<div>这是一段正常的字</div>
<div class="italicdemo">这是一段正常的字使用 font-style 后的效果</div>
</body>
</html>
结果如下：
行高
作用：设置多行文本的间距
属性名：line-height
属性值：
- 数字 + px
- 数字（当前标签 font-size 属性值的倍数）
格式：
选择器{
line-height: 2;
line-height: 30px;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.style1{
line-height: 40px;
}
.style2{
line-height: 2;
}
</style>
</head>
<body>
<div style="width: 400px;background-color: red;">生命的意义就是在于奋斗，人生的意义则在于积累。不要乞求太多，每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态，我们就会拥有整个世界</div>
<div style="width: 400px;background-color: gray;" class="style1">生命的意义就是在于奋斗，人生的意义则在于积累。不要乞求太多，每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态，我们就会拥有整个世界</div>
<div style="width: 400px;background-color: green;" class="style2">生命的意义就是在于奋斗，人生的意义则在于积累。不要乞求太多，每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态，我们就会拥有整个世界</div>
</body>
</html>
结果如下：
注意事项：
- 行高 = 文本高度 + 上间距 + 下间距
- 行高测量方法：从一行文字的最顶端（最低端）量到下一行文字的最顶端（最低端）
利用行高进行垂直居中：
技巧：行高属性等于盒子高度属性
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
background-color: red;
line-height: 100px;
}
</style>
</head>
<body>
<div>生命的意义就是在于奋斗，人生的意义则在于积累。不要乞求太多，每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态，我们就会拥有整个世界</div>
</body>
</html>
结果如下：
注意事项：只能是单行文字垂直居中
字体族
属性名：font-family
属性值：字体名
格式：
选择器{
font-family: "楷体";
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
font-family: "楷体";
}
</style>
</head>
<body>
<div>将进酒</div>
</body>
</html>
结果如下：
font 复合属性
复合属性：属性的简写方式，一个属性对应多个值的写法，各属性值之间用空格隔开
font：是否倾斜 是否加粗 字号/行高 字体（必须按照顺序书写）
注意事项：字号和字体值必须书写，否则 font 属性不生效
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
font: italic bold 30px/2 "楷体";
}
</style>
</head>
<body>
<div>君不见黄河之水天上来，奔流到海不复回。</div>
<div>君不见高堂明镜悲白发，朝如青丝暮成雪。</div>
<div>人生得意须尽欢，莫使金樽空对月。</div>
<div>天生我材必有用，千金散尽还复来。</div>
<div>烹羊宰牛且为乐，会须一饮三百杯。</div>
</body>
</html>
结果如下：
文本缩进
属性名：text-indent
属性值：
- 数字 + px
- 数字 + em（推荐：1em = 当前标签的字号大小）
格式：
选择器{
text-indent: 2em;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
p{
text-indent: 2em;
}
</style>
</head>
<body>
<p>我们可以度过美好时光，也可以虚度光阴，但我希望你活得精彩。
我希望你能看到令你惊叹的事物，我希望你体会从未有过的感觉，
我希望你遇见具有不同观点的人，我希望你的一生能让自己过得自豪。
如果你发现你的生活并非如此，我希望你能有勇气重新来过。
你是独特的，但你必须向统一让步；
你是自由的，但你必须向禁忌妥协。
因为你渴望亲近群体，渴望他们的接受。
你害怕被群体驱逐。因而你是孤独的，你是独特但孤独的心魂。
生来如此。
生，就是这样，永远都是这样。</p>
</body>
</html>
结果如下：
文本对齐
作用：控制内容水平对齐方式
属性名：text-align
属性值：
- left：左对齐（默认）
- center：居中对齐
- right：右对齐
格式：
选择器{
text-align: center;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
p{
text-indent: 2em;
text-align: center;
}
</style>
</head>
<body>
<p>我要留下昨晚做的梦，</p>
<p>把它保存在冰箱里。</p>
<p>很久很久以后的一天，</p>
<p>当我变成一个白发老翁，</p>
<p>便要取出我冻结的美梦，</p>
<p>把它融化，把它烧开，</p>
<p>然后我就慢慢坐下，</p>
<p>用它来浸泡我的一双苍老冰冷的脚。</p>
</body>
</html>
结果如下：
注意事项：居中的是文字内容，并不是标签
图片水平居中方式：
text-align本质是控制内容的对齐方式，属性要设置给内容的父级
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="./img/image.png" alt="">
</div>
</body>
</html>
结果如下：
文本修饰线
属性名：text-decoration
属性值：
- none：去掉文本修饰线
- underline：下划线
- line-through：删除线
- overline：上划线
格式：
选择器{
text-decoration: none;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none;
}
p{
text-decoration: underline;
}
div{
text-decoration: line-through;
}
span{
text-decoration: overline;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">去掉a标签访问百度的下划线</a>
<p>给这行字加下划线</p>
<div>把这行字删了</div>
<span>给这行字加上划线</span>
</body>
</html>
结果如下：
文字颜色
属性名：color
属性：
| 颜色表示方式 | 属性值 | 说明 | 使用场景 |
|---|---|---|---|
| 颜色关键字 | 颜色英文单词 | red、green、blue… | 学习测试 |
| rgb 表示法 | rgb(r, g, b) | rgb 表示红绿蓝三原色，取值：0 - 255 | 了解 |
| rgba 表示法 | rgba(r, g, b, a) | a 表示透明度，取值：0 - 1 | 开发使用，实现透明色 |
| 十六进制表示法 | #RRGGBB | #000000，#ffcc00，简写：#000，#fc0 | 开发使用（从设计稿复制） |
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
h1{
color: red;
}
h2{
color: rgb(0, 0, 255)
}
h3{
color: rgba(4, 94, 67, 0.5)
}
h4{
color: #FFAACC;
}
</style>
</head>
<body>
<h1>颜色关键字</h1>
<h2>rgb表示法</h2>
<h3>rgba表示法</h3>
<h4>十六进制表示法</h4>
</body>
</html>
结果如下：
复合选择器
定义：由两个或多个基础选择器，通过不同的方式组合而成
作用：更准确、更高效的选择目标元素（标签）
后代选择器
后代选择器：选中某元素的后代元素（所有后代）
格式：
父选择器 子选择器{
CSS 属性
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div span{
color: red;
}
</style>
</head>
<body>
<span>这是一个span标签</span>
<div>
<span>这是div标签中的span标签</span>
</div>
</body>
</html>
结果如下：
子选择器
子代选择器：选中某元素的子代元素
格式：
父选择器>子选择器{
CSS 属性
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div>span{
color: red;
}
</style>
</head>
<body>
<div>
<span>大儿子span</span>
<p>
<span>孙子span</span>
</p>
<span>小儿子span</span>
</div>
</body>
</html>
结果如下：
并集选择器
并集选择器：选中多组标签设置相同的样式
格式：
选择器1,选择器2,...,选择器N{
CSS 属性
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div,p,span{
color: red;
}
</style>
</head>
<body>
<div>div标签</div>
<p>p标签</p>
<span>span标签</span>
</body>
</html>
结果如下：
交集选择器
交集选择器：选中同时满足多个条件的元素
格式：
选择器1选择器2{
CSS 属性
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
p.box{
color: red;
}
</style>
</head>
<body>
<p class="box">p标签，使用了类选择器</p>
<p>p标签</p>
<div class="box">div标签，使用了类选择器</div>
</body>
</html>
结果如下：
注意事项：
- 选择器之间连写，没有任何符号
- 如果交集选择器中有标签选择器，标签选择器必须写在最前面
伪类选择器
伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式
格式：
鼠标悬停状态：
选择器:hover{
CSS 属性
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
a:hover{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<a href="#">这是没有鼠标悬停的a标签</a>
<br>
<a href="#">这是有鼠标悬停的a标签</a>
</body>
</html>
结果如下：
伪类-超链接：
超链接一共有四个状态
| 选择器 | 作用 |
|---|---|
| :link | 访问前 |
| :visited | 访问后 |
| :hover | 鼠标悬停 |
| :active | 点击时（激活） |
注意事项：如果要给超链接设置以上四个状态，要按 lvha 的顺序书写
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
a:link{
color: orange;
}
a:visited{
color: black;
}
a:hover{
color:yellow
}
a:active{
color:gray
}
</style>
</head>
<body>
<a href="#">这是一段文字</a>
</body>
</html>
结果如下：
屏幕录制 2025-03-07 171505
CSS 三大特性
继承性
子级默认继承父级的文字控制属性
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
body{
font-size: 30px;
font-family: "楷体";
color: red;
}
</style>
</head>
<body>
<div>
樱花飘落的速度是每秒五厘米，而我对你的思念，始终追不上季节的更迭。
</div>
<p>
咖啡杯沿的温度逐渐冷却，书页间夹着的旧车票，还留着那年雨季的褶皱。
</p>
<span>
地铁里陌生人的一个微笑，像极了某个黄昏你转身时发梢掠过的风。
</span>
</body>
</html>
结果如下：
注意事项：当子级有自己的样式的时候，优先生效自己的样式，就不会对父级的样式生效
层叠性
特点：
- 相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
- 不同的属性会叠加：不同的 CSS 属性都生效
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
font-size: 30px;
color: red;
}
div{
color: purple;
font-family: "楷体";
}
</style>
</head>
<body>
<div>
萤火虫提着灯笼穿过月光，在旧砖墙的皱纹里种下星辰的碎片。
</div>
</body>
</html>
结果如下：
优先级
优先级也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则
规则：选择器优先级高的样式生效
公式：通配选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < ！important（选中标签的范围越大，优先级越低）
!important 提高权重，将优先级提到最高
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
*{
color: purple !important;
}
.style1{
color: red;
}
</style>
</head>
<body>
<div>
<p>这是一段文字1</p>
<p class="style1">这是一段文字2</p>
</div>
</body>
</html>
结果如下：
叠加计算规则：
叠加计算：如果是复合选择器，则需要权重叠加计算
规则：（行内样式，id 选择器个数，类选择器个数，标签选择器个数）
- 从左向右依次比较个数，同一级个数多的优先级高，如果个数相同，则向后比较
!important权重最高（在继承中变为无效）- 继承权重最低
背景属性
背景色
属性名：background-color
属性：
| 颜色表示方式 | 属性值 | 说明 | 使用场景 |
|---|---|---|---|
| 颜色关键字 | 颜色英文单词 | red、green、blue… | 学习测试 |
| rgb 表示法 | rgb(r, g, b) | rgb 表示红绿蓝三原色，取值：0 - 255 | 了解 |
| rgba 表示法 | rgba(r, g, b, a) | a 表示透明度，取值：0 - 1 | 开发使用，实现透明色 |
| 十六进制表示法 | #RRGGBB | #000000，#ffcc00，简写：#000，#fc0 | 开发使用（从设计稿复制） |
格式：
选择器{
background-color: red;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
p{
background-color: red;
}
</style>
</head>
<body>
<p>这是一段文字</p>
</body>
</html>
结果如下
背景图
网页中使用背景图实现装饰性的图片效果
属性名：background-image
属性值：url(背景图路径)
格式：
选择器{
background-image: url(./images/1.png);
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
width: 504px;
height: 495px;
background-image: url(./img/1.png);
}
</style>
</head>
<body>
<div>这是一段文字</div>
</body>
</html>
结果如下：
注意事项：背景图默认是平铺的效果
背景图平铺方式
属性名：background-repeat
属性值：
- no-repeat：不平铺
- repeat：平铺（默认效果）
- repeat-x：水平方向平铺
- repeat-y：垂直方向平铺
格式：
选择器{
background-repeat: no-repeat;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
width: 504px;
height: 495px;
background-color: rgb(240, 29, 117);
background-image: url(./img/1.png);
background-repeat: no-repeat;
font-size: 80px;
}
p{
width: 504px;
height: 495px;
background-color: rgb(240, 29, 117);
background-image: url(./img/1.png);
background-repeat: repeat-x;
font-size: 80px;
}
.y{
width: 504px;
height: 495px;
background-color: rgb(240, 29, 117);
background-image: url(./img/1.png);
background-repeat: repeat-y;
font-size: 80px;
}
</style>
</head>
<body>
<div>这是不平铺</div>
<p>这是水平平铺</p>
<p class="y">这是垂直平铺</p>
</body>
</html>
结果如下：
背景图位置
属性名：background-position
属性值：水平方向位置 垂直方向位置
- 关键字
- left：左侧
- right：右侧
- center：居中
- top：置顶
- bottom：置底
- 偏移量（数字 + px，正负都可以）
- 水平方向：正数向右，负数向左
- 垂直方向：正数向下，负数向上
格式：
选择器{
background-position: center bottom;
background-position: 50px -100px;
background-position: 50px center;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
width: 504px;
height: 495px;
background-color: rgb(240, 29, 117);
background-image: url(./img/1.png);
background-repeat: no-repeat;
background-position: right center;
}
p{
width: 504px;
height: 495px;
background-color: rgb(240, 29, 117);
background-image: url(./img/1.png);
background-repeat: no-repeat;
background-position: 126px 123.75px;
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
</html>
结果如下：
注意事项：
background-position: 0 0和background-position: left top为默认的左上角- 关键字取值方式写法，可以颠倒取值顺序
- 可以只写一个关键字，另一个方向默认居中；数字只写一个值表示水平方向，垂直方向为居中
背景图缩放
属性：background-size
属性值：
- 关键字
- cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
- contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
- 百分比：根据盒子尺寸计算图片大小
- 数字 + 单位（例如 px）
格式：
选择器{
background-size: contain;
background-size: cover;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.size1{
width: 1500px;
height: 1500px;
background-color: rgb(240, 29, 117);
background-image: url(./img/2.png);
background-repeat: no-repeat;
background-size: contain;
}
.size2{
width: 1500px;
height: 1500px;
background-color: rgb(240, 29, 117);
background-image: url(./img/2.png);
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<p class="size1"></p>
<p class="size2"></p>
</body>
</html>
结果如下：
背景图固定
作用：背景图不会随着元素的内容滚动
属性名：background-attachment
属性值：fixed
格式：
选择器{
background-attachment: fixed;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
body{
background-image: url(./img/3.png);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
background-attachment: fixed;
}
body p{
font-size: 20px;
font-family: "楷体";
font-weight: bold;
text-indent: 2em;
}
h1{
font-family: "楷体";
text-align: center;
}
</style>
</head>
<body>
<h1>孔雀东南飞</h1>
<p>序曰：汉末建安中，庐江府小吏焦仲卿妻刘氏，为仲卿母所遣，自誓不嫁。其家逼之，乃投水而死。仲卿闻之，亦自缢于庭树。时人伤之，为诗云尔。</p>
<p>孔雀东南飞，五里一徘徊。</p>
<p>“十三能织素，十四学裁衣，十五弹箜篌，十六诵诗书。十七为君妇，心中常苦悲。君既为府吏，守节情不移。贱妾留空房，相见常日稀。鸡鸣入机织，夜夜不得息。三日断五匹，大人故嫌迟。非为织作迟，君家妇难为！妾不堪驱使，徒留无所施。便可白公姥，及时相遣归。”</p>
<p>府吏得闻之，堂上启阿母：“儿已薄禄相，幸复得此妇，结发同枕席，黄泉共为友。共事二三年，始尔未为久。女行无偏斜，何意致不厚？”</p>
<p>阿母谓府吏：“何乃太区区！此妇无礼节，举动自专由。吾意久怀忿，汝岂得自由！东家有贤女，自名秦罗敷，可怜体无比，阿母为汝求。便可速遣之，遣去慎莫留！”</p>
<p>府吏长跪告：“伏惟启阿母，今若遣此妇，终老不复取！”</p>
<p>阿母得闻之，槌床便大怒：“小子无所畏，何敢助妇语！吾已失恩义，会不相从许！”</p>
<p>府吏默无声，再拜还入户。举言谓新妇，哽咽不能语：“我自不驱卿，逼迫有阿母。卿但暂还家，吾今且报府。不久当归还，还必相迎取。以此下心意，慎勿违吾语。”</p>
<p>新妇谓府吏：“勿复重纷纭。往昔初阳岁，谢家来贵门。奉事循公姥，进止敢自专？昼夜勤作息，伶俜萦苦辛。谓言无罪过，供养卒大恩；仍更被驱遣，何言复来还！妾有绣腰襦，葳蕤自生光；红罗复斗帐，四角垂香囊；箱帘六七十，绿碧青丝绳，物物各自异，种种在其中。人贱物亦鄙，不足迎后人，留待作遗施，于今无会因。时时为安慰，久久莫相忘！”</p>
<p>鸡鸣外欲曙，新妇起严妆。著我绣夹裙，事事四五通。足下蹑丝履，头上玳瑁光。腰若流纨素，耳著明月珰。指如削葱根，口如含朱丹。纤纤作细步，精妙世无双。</p>
<p>上堂拜阿母，阿母怒不止。“昔作女儿时，生小出野里。本自无教训，兼愧贵家子。受母钱帛多，不堪母驱使。今日还家去，念母劳家里。” 却与小姑别，泪落连珠子。“新妇初来时，小姑始扶床；今日被驱遣，小姑如我长。勤心养公姥，好自相扶将。初七及下九，嬉戏莫相忘。” 出门登车去，涕落百余行。</p>
<p>府吏马在前，新妇车在后。隐隐何甸甸，俱会大道口。下马入车中，低头共耳语：“誓不相隔卿，且暂还家去；吾今且赴府，不久当还归。誓天不相负！”</p>
<p>新妇谓府吏：“感君区区怀！君既若见录，不久望君来。君当作磐石，妾当作蒲苇，蒲苇纫如丝，磐石无转移。我有亲父兄，性行暴如雷，恐不任我意，逆以煎我怀。” 举手长劳劳，二情同依依。</p>
<p>入门上家堂，进退无颜仪。阿母大拊掌，不图子自归：“十三教汝织，十四能裁衣，十五弹箜篌，十六知礼仪，十七遣汝嫁，谓言无誓违。汝今何罪过，不迎而自归？” 兰芝惭阿母：“儿实无罪过。” 阿母大悲摧。</p>
<p>还家十余日，县令遣媒来。云有第三郎，窈窕世无双。年始十八九，便言多令才。</p>
<p>阿母谓阿女：“汝可去应之。”</p>
<p>阿女含泪答：“兰芝初还时，府吏见丁宁，结誓不别离。今日违情义，恐此事非奇。自可断来信，徐徐更谓之。”</p>
<p>阿母白媒人：“贫贱有此女，始适还家门。不堪吏人妇，岂合令郎君？幸可广问讯，不得便相许。”</p>
<p>媒人去数日，寻遣丞请还，说有兰家女，丞籍有宦官。云有第五郎，娇逸未有婚。遣丞为媒人，主簿通语言。直说太守家，有此令郎君，既欲结大义，故遣来贵门。</p>
<p>阿母谢媒人：“女子先有誓，老姥岂敢言！”</p>
<p>阿兄得闻之，怅然心中烦。举言谓阿妹：“作计何不量！先嫁得府吏，后嫁得郎君，否泰如天地，足以荣汝身。不嫁义郎体，其往欲何云？”</p>
<p>兰芝仰头答：“理实如兄言。谢家事夫婿，中道还兄门。处分适兄意，那得自任专！虽与府吏要，渠会永无缘。登即相许和，便可作婚姻。”</p>
<p>媒人下床去，诺诺复尔尔。还部白府君：“下官奉使命，言谈大有缘。” 府君得闻之，心中大欢喜。视历复开书，便利此月内，六合正相应。良吉三十日，今已二十七，卿可去成婚。交语速装束，络绎如浮云。青雀白鹄舫，四角龙子幡。婀娜随风转，金车玉作轮。踯躅青骢马，流苏金镂鞍。赍钱三百万，皆用青丝穿。杂彩三百匹，交广市鲑珍。从人四五百，郁郁登郡门。</p>
<p>阿母谓阿女：“适得府君书，明日来迎汝。何不作衣裳？莫令事不举！”</p>
<p>阿女默无声，手巾掩口啼，泪落便如泻。移我琉璃榻，出置前窗下。左手持刀尺，右手执绫罗。朝成绣夹裙，晚成单罗衫。晻晻日欲暝，愁思出门啼。</p>
<p>府吏闻此变，因求假暂归。未至二三里，摧藏马悲哀。新妇识马声，蹑履相逢迎。怅然遥相望，知是故人来。举手拍马鞍，嗟叹使心伤：“自君别我后，人事不可量。果不如先愿，又非君所详。我有亲父母，逼迫兼弟兄。以我应他人，君还何所望！”</p>
<p>府吏谓新妇：“贺卿得高迁！磐石方且厚，可以卒千年；蒲苇一时纫，便作旦夕间。卿当日胜贵，吾独向黄泉！”</p>
<p>新妇谓府吏：“何意出此言！同是被逼迫，君尔妾亦然。黄泉下相见，勿违今日言！” 执手分道去，各各还家门。生人作死别，恨恨那可论？念与世间辞，千万不复全！</p>
<p>府吏还家去，上堂拜阿母：“今日大风寒，寒风摧树木，严霜结庭兰。儿今日冥冥，令母在后单。故作不良计，勿复怨鬼神！命如南山石，四体康且直！”</p>
<p>阿母得闻之，零泪应声落：“汝是大家子，仕宦于台阁。慎勿为妇死，贵贱情何薄！东家有贤女，窈窕艳城郭，阿母为汝求，便复在旦夕。”</p>
<p>府吏再拜还，长叹空房中，作计乃尔立。转头向户里，渐见愁煎迫。</p>
<p>其日牛马嘶，新妇入青庐。奄奄黄昏后，寂寂人定初。“我命绝今日，魂去尸长留！” 揽裙脱丝履，举身赴清池。</p>
<p>府吏闻此事，心知长别离。徘徊庭树下，自挂东南枝。</p>
<p>两家求合葬，合葬华山傍。东西植松柏，左右种梧桐。枝枝相覆盖，叶叶相交通。中有双飞鸟，自名为鸳鸯。仰头相向鸣，夜夜达五更。行人驻足听，寡妇起彷徨。多谢后世人，戒之慎勿忘！</p>
</body>
</html>
结果如下：
屏幕录制 2025-03-08 013552
背景复合属性
属性名：background
属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（不区分顺序）
格式：
选择器{
background: red url(./img/1.png) no-repeat right center/cover;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
width: 600px;
height: 400px;
background: red url(./img/1.png) no-repeat right center/cover;
}
</style>
</head>
<body>
<div>这是一段字</div>
</body>
</html>
结果如下：
显示模式
显示模式
显示模式：标签（元素）的显示方式
作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容
块级元素
特点：
- 独占一行
- 高度默认是父级的 100%
- 添加宽高属性生效
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.div1{
background-color: red;
}
.div2{
height: 60px;
background-color: gray;
}
</style>
</head>
<body>
<div class="div1">这是一段字</div><div class="div2">这是一段字</div>
</body>
</html>
结果如下：
行内元素
特点：
- 一行可共存多个
- 宽高跟内容宽高一致
- 添加宽高属性不生效
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.span1{
background-color: red;
font-size: 30px;
}
.span2{
width: 20px;
height: 60px;
background-color: gray;
}
</style>
</head>
<body>
<span class="span1">这是span标签</span><span class="span2">这是span标签</span>
</body>
</html>
结果如下：
行内块元素
特点：
- 一行可共存多个
- 宽高与内容宽高一致
- 添加宽高属性生效
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.span1{
background-color: red;
font-size: 30px;
}
.span2{
width: 20px;
height: 60px;
background-color: gray;
}
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<span class="span1">这是span标签</span>
<img src="./img/1.png" alt="">
</body>
</html>
结果如下：
转换显示模式
属性名：display
属性值：
- block：块级
- inline-block：行内块
- inline：行内
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
display: inline;
}
span{
width: 200px;
height: 200px;
background-color: gray;
display: inline-block;
}
img{
width: 100px;
height: 100px;
display: block;
}
</style>
</head>
<body>
<div>这是一段字</div>
<div>这是一段字</div>
<span>这是span标签</span>
<span>这是span标签</span>
<img src="./img/1.png" alt="">
<img src="./img/1.png" alt="">
</body>
</html>
结果如下：
结构伪类选择器
结构伪类选择器
作用：根据元素的结构关系查找元素
| 选择器 | 说明 |
|---|---|
| E:first-child | 查找第一个 E 元素 |
| E:last-child | 查找最后一个 E 元素 |
| E:nth-child(N) | 查找第 N 个 E 元素（第一个元素 N 值为 1） |
格式：
选择器:first-child{
background color: red;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
li:first-child{
background-color: rgb(238, 115, 115);
}
li:last-child{
background-color: rgb(131, 231, 131);
}
li:nth-child(2){
background-color: rgb(174, 174, 235);
}
</style>
</head>
<body>
<ul>
<li>床前明月光，疑是地上霜。—— 李白《静夜思》</li>
<li>独在异乡为异客，每逢佳节倍思亲。—— 王维《九月九日忆山东兄弟》</li>
<li>欲穷千里目，更上一层楼。—— 王之涣《登鹳雀楼》</li>
</ul>
</body>
</html>
结果如下：
nth-child(公式)
作用：根据元素的结构关系查找多个元素
| 功能 | 公式 |
|---|---|
| 偶数标签 | 2n |
| 奇数标签 | 2n+1，2n-1 |
| 找到 5 的倍数的标签 | 5n |
| 找到第 5 个以后的标签 | n+5 |
| 找到第 5 个以前的标签 | -n+5 |
格式：
选择器:nth-child(2n){
background color: red;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
li:nth-child(2n-1){
background-color: rgb(174, 174, 235);
}
li:nth-child(2n){
background-color: rgb(235, 235, 157);
}
li:first-child{
background-color: rgb(238, 115, 115);
}
li:last-child{
background-color: rgb(131, 231, 131);
}
</style>
</head>
<body>
<ul>
<li>床前明月光，疑是地上霜。—— 李白《静夜思》</li>
<li>独在异乡为异客，每逢佳节倍思亲。—— 王维《九月九日忆山东兄弟》</li>
<li>欲穷千里目，更上一层楼。—— 王之涣《登鹳雀楼》</li>
<li>问君能有几多愁？恰似一江春水向东流。—— 李煜《虞美人》</li>
<li>大江东去，浪淘尽，千古风流人物。—— 苏轼《念奴娇・赤壁怀古》</li>
<li>寻寻觅觅，冷冷清清，凄凄惨惨戚戚。—— 李清照《声声慢》</li>
<li>落红不是无情物，化作春泥更护花。—— 龚自珍《己亥杂诗》</li>
<li>黑夜给了我黑色的眼睛，我却用它寻找光明。—— 顾城《一代人》</li>
<li>你站在桥上看风景，看风景人在楼上看你。—— 卞之琳《断章》</li>
</ul>
</body>
</html>
结果如下：
伪元素选择器
作用：创建虚拟元素（伪元素），用来摆放装饰性的内容
| 选择器 | 说明 |
|---|---|
| E::before | 在 E 元素里面的最前面添加一个伪元素 |
| E::after | 在 E 元素里面的最后面添加一个伪元素 |
注意事项：
- 必须设置
content:" "属性，用来设置伪元素的内容，如果没有内容，则引号留空即可 - 伪元素默认是行内显示模式
- 权重和标签选择器相同
格式：
选择器::before{
content:" ";
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
width: 275px;
height: 50px;
background-color: #f7b7b7;
}
div::before{
content: "寻寻觅觅，";
}
div::after{
content: "凄凄惨惨戚戚。";
}
</style>
</head>
<body>
<div>冷冷清清，</div>
</body>
</html>
结果如下：
盒子模型
作用：布局网页，摆放盒子和内容
组成
盒子模型重要组成部分：
- 内容区域：width & height
- 内边距：padding（出现在内容与盒子边缘之间）
- 边框线：border
- 外边距：margin（出现在盒子外面）
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #f7b7b7;
padding: 20px;
border: 2px solid black;
margin: 20px;
}
</style>
</head>
<body>
<div>
这是一段文字
这是一段文字
这是一段文字
这是一段文字
</div>
</body>
</html>
结果如下：
边框线
属性名：border
属性值：边框线粗细 线条样式 颜色（不区分顺序）
常用线条样式：
| 属性值 | 线条样式 |
|---|---|
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: #f7b7b7;
border: 2px solid black;
display: inline-block;
}
.div2{
width: 100px;
height: 100px;
background-color: #f7b7b7;
border: 2px dashed black;
display: inline-block;
}
.div3{
width: 100px;
height: 100px;
background-color: #f7b7b7;
border: 2px dotted black;
display: inline-block;
}
</style>
</head>
<body>
<div class="div1">
这是一段文字
这是一段文字
这是一段文字
这是一段文字
</div>
<div class="div2">
这是一段文字
这是一段文字
这是一段文字
这是一段文字
</div>
<div class="div3">
这是一段文字
这是一段文字
这是一段文字
这是一段文字
</div>
</body>
</html>
结果如下：
设置单方向边框线：
属性名：border-方位名词
属性值：边框线粗细 线条样式 颜色（不区分顺序）
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #f7b7b7;
border-right: 2px solid black;
border-top: 4px dotted red;
border-left: 2px dashed blue;
border-bottom: 4px solid yellow;
}
</style>
</head>
<body>
<div>
这是一段文字
这是一段文字
这是一段文字
这是一段文字
</div>
</body>
</html>
结果如下：
内边距
作用：设置内容与盒子边缘之间的距离
属性名：padding / padding-方位名词
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #f7b7b7;
padding-left: 20px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 50px;
}
</style>
</head>
<body>
<div>
这是一段文字
这是一段文字
这是一段文字
这是一段文字
</div>
</body>
</html>
结果如下：
内边距多值写法
| 取值个数 | 示例 | 含义 |
|---|---|---|
| 一个值 | padding: 10px; | 四个方向内边距均为 10px |
| 两个值 | padding: 10px 80px; | 上下：10px；左右：80px |
| 三个值 | padding: 10px 40px 80px; | 上：10px；左右：40px；下：80px |
| 四个值 | padding: 10px 20px 40px 80px; | 上：10px；右：20px；下：40px；左：80px |
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #f7b7b7;
padding: 10px 20px 40px 80px;
}
</style>
</head>
<body>
<div>
这是一段文字
这是一段文字
这是一段文字
这是一段文字
</div>
</body>
</html>
结果如下：
注意事项：从上开始顺时针转一圈，如果当前方向没有数值，取值跟对边一样
尺寸计算
默认情况：
- 盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸
结论：给盒子加 border/padding 会撑大盒子
解决方法：
- 手动做减法：减掉 border/padding 的尺寸
- 内减模式：
box-sizing:border-box
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: #f7b7b7;
padding: 20px;
border: 2px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
这是一段文字
</div>
</body>
</html>
结果如下：
外边距
作用：拉开两个盒子之间的距离
属性名：margin
提示：与 padding 属性值写法、含义相同
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: #f7b7b7;
margin: 20px;
}
</style>
</head>
<body>
<div>
这是一段文字
</div>
</body>
</html>
结果如下：
注意事项：外边距不会撑大盒子
外边距版心居中
通过左右两边添加相同的外边距使版心居中
格式：
选择器{
margin: 0 auto 0;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
width: 800px;
height: 512px;
background-color: #f7b7b7;
margin: 0 auto 0;
}
</style>
</head>
<body>
<div>
<img src="./img/2.png" alt="">
</div>
</body>
</html>
结果如下：
注意事项：版心居中盒子一定要有宽度
边距问题
外边距-合并现象
场景：垂直排列的兄弟元素，上下 margin 会合并
现象：取两个 margin 中较大值生效
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.div1{
width: 200px;
height: 100px;
background-color: #f0a3a3;
margin-bottom: 20px;
}
.div2{
width: 200px;
height: 100px;
background-color: #b4a3f0;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="div1">这是一段字</div>
<div class="div2">这是一段字</div>
</body>
</html>
结果如下：
外边距-塌陷问题
场景：父子级的标签，子级的添加上外边距会产生塌陷问题
现象：导致父级一起向下移动
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.father{
width: 400px;
height: 400px;
background-color: #f0a3a3;
}
.son{
width: 200px;
height: 100px;
background-color: #b4a3f0;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>
</html>
结果如下：
解决方法：
- 取消子级 margin，父级设置 padding（规避问题）
- 父级设置 overflow: hidden
- 父级设置 border-top
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.father{
width: 400px;
height: 400px;
background-color: #f0a3a3;
padding-top: 50px;
box-sizing: border-box;
}
.son{
width: 200px;
height: 100px;
background-color: #b4a3f0;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>
</html>
结果如下：
行内元素-内外边距问题
场景：行内元素添加 margin 和 padding，无法改变元素垂直位置
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
span{
margin: 50px;
padding: 20px;
}
</style>
</head>
<body>
<span>这是一行字</span>
</body>
</html>
结果如下：
解决方法：给行内元素添加 line-height 可以改变垂直位置
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
span{
margin: 50px;
padding: 20px;
line-height: 100px;
}
</style>
</head>
<body>
<span>这是一行字</span>
</body>
</html>
结果如下：
清除默认样式
清除标签默认的样式，比如：默认的内外边距
格式：
*{
margin: 0;
padding: 0;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>文本内容</p>
<ul>
<li>列表内容</li>
</ul>
</body>
</html>
结果如下：
去掉列表项目符号
格式：
选择器{
list-style: none;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
li{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ul>
</body>
</html>
结果如下：
元素溢出
作用：控制溢出元素的内容的显示方式
属性名：overflow
属性值：
- hidden：溢出隐藏
- scroll：溢出滚动（无论是否溢出，都显示滚动条位置）
- auto：溢出滚动（溢出才显示滚动条位置）
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: #f0a3a3;
overflow: auto;
}
</style>
</head>
<body>
<div>雨丝斜斜地穿过玻璃幕墙，在地面洇开细碎的光斑。咖啡馆里飘着焦糖玛奇朵的甜香，邻座姑娘的笔记本摊开在《雪国》某页，窗外的樱花正与书页上 "银河倾泻进瞳孔" 的句子重叠。地铁报站声从地底传来时，自动贩卖机突然吐出一罐过期的橘子汽水，金属拉环 "咔嗒" 轻响，惊飞了檐下打盹的灰鸽。暮色漫过街道时，修鞋匠终于为最后一只旧皮鞋钉上铜掌，锤子与铁砧碰撞的节奏，恰好吻合十字路口红绿灯交替的频率。</div>
</body>
</html>
结果如下：
屏幕录制 2025-03-08 175915
圆角
作用：设置元素的外边框为圆角
属性名：border-radius
属性值：（圆角半径）
-
数字 + px
-
百分比
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
margin: 50px auto;
width: 200px;
height: 200px;
background-color: #42e2ee;
border-radius: 80px 20px 80px 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如下：
注意事项：从左上角顺时针开始赋值，没有赋值的角与对角的值相同
圆角应用
正圆形状
给正方形盒子设置圆角属性值为宽高的一半（50%）
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
margin: 50px auto;
width: 200px;
height: 200px;
background-color: #42e2ee;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如下：
注意事项：圆角最大值是 50%，超过 50% 不会生效
胶囊形状
给长方形盒子设置圆角属性值为盒子高度的一半
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
margin: 50px auto;
width: 200px;
height: 80px;
background-color: #42e2ee;
border-radius: 40px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如下：
阴影
作用：给元素设置阴影效果
属性名：box-shadow
属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内/外阴影
注意事项：
- X 轴偏移量和 Y 轴偏移量必须书写
- 默认是外阴影，内阴影需要添加 inset
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
margin: 50px auto;
width: 200px;
height: 80px;
background-color: #42e2ee;
border-radius: 40px;
box-shadow: 2px 5px 10px 2px black inset;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如下：
标准流
CSS 标准流是网页布局的基础，也被称为文档流，是元素在网页中默认的排列和显示方式
概念
标准流是指元素按照其在 HTML 文档中出现的先后顺序依次排列，并根据元素自身的类型（块级元素、行内元素、行内块元素）和相关的 CSS 属性（如 width、height、margin、padding 等）来确定其在页面中的位置和大小
元素类型及排列规则
在标准流中，HTML 元素主要分为块级元素和行内元素，它们的排列规则有所不同：
块级元素
- 特点：
- 独占一行，即使内容宽度小于父元素宽度，也会自动换行
- 可以设置宽度和高度，如果不设置宽度，默认宽度是父元素宽度的 100%
- 常见元素：
<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>等 - 排列规则：块级元素会从上到下依次排列，每个元素之间会有换行
行内元素
- 特点：
- 不会独占一行，多个行内元素会在同一行内依次排列，直到该行排满后自动换行
- 宽度和高度由内容决定，不能直接设置宽度和高度（
width和height属性无效）
- 常见元素：
<a>、<span>、<img>、<input>、<label>等 - 排列规则：行内元素会从左到右依次排列，如果一行排不下，会自动换行到下一行继续排列
行内块元素
- 特点：
- 不会独占一行，多个行内块元素可以在同一行内排列
- 可以设置宽度和高度
- 常见元素：
<img>、<input>等元素默认具有行内块元素的特性，也可以通过display: inline-block将其他元素转换为行内块元素 - 排列规则：与行内元素类似，从左到右依次排列，当一行排不下时会自动换行
标准流的特点
- 自动换行：当块级元素排满一行或者行内元素、行内块元素在一行排不下时，会自动换行到下一行继续排列
- 文档顺序：元素按照 HTML 文档中的先后顺序依次显示，先出现的元素先显示
- 受父元素影响：元素的宽度、高度等尺寸和布局会受到父元素的影响，例如块级元素默认宽度是父元素宽度的 100%
打破标准流
虽然标准流是默认的布局方式，但在实际开发中，有时需要打破标准流来实现更复杂的布局。常见的打破标准流的方式有：
- 浮动（
float）：使用float: left或float: right可以让元素脱离标准流，向左或向右浮动，其他元素会围绕浮动元素排列 - 绝对定位（
position: absolute）和固定定位（position: fixed）：设置这两种定位方式后，元素会脱离标准流，相对于特定的参考元素进行定位
浮动
基本使用
作用：让块元素水平排列
属性名：float
属性值：
- left：左对齐
- right：右对齐
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.one{
width: 100px;
height: 100px;
background-color: #e98989;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: #ace989;
float: right;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>
</html>
结果如下：
特点：
- 浮动后的盒子顶部对齐
- 浮动后的盒子具备行内块特点
- 浮动后的盒子会脱离标准流，不占用标准流的位置
清除浮动
作用：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能会导致页面布局错乱）
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.top{
margin: auto;
width: 600px;
/* height: 200px; */
background-color: #e66d6d;
}
.bottom{
height: 100px;
background-color: #7059f3;
}
.left{
float: left;
width: 100px;
height: 200px;
background-color: #011f09;
}
.right{
float: right;
width: 400px;
height: 200px;
background-color: #2f0241;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
结果如下：
解决方法：清除浮动（清除浮动带来的影响）
额外标签法
在父元素内容的最后添加一个块级元素，设置 CSS 属性clear: borth
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.top{
margin: auto;
width: 600px;
/* height: 200px; */
background-color: #e66d6d;
}
.bottom{
height: 100px;
background-color: #7059f3;
}
.left{
float: left;
width: 100px;
height: 200px;
background-color: #011f09;
}
.right{
float: right;
width: 400px;
height: 200px;
background-color: #2f0241;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
<div class="bottom"></div>
</body>
</html>
结果如下：
单伪元素法
使用单伪元素：
.clearfix::after{
content: "";
display: block;
clear: both;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.top{
margin: auto;
width: 600px;
/* height: 200px; */
background-color: #e66d6d;
}
.bottom{
height: 100px;
background-color: #7059f3;
}
.left{
float: left;
width: 100px;
height: 200px;
background-color: #011f09;
}
.right{
float: right;
width: 400px;
height: 200px;
background-color: #2f0241;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="top clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
双伪元素法（推荐）
使用双伪元素：
.clearfix::before,.clearfix::after{
content: "";
display: table;
}
.clearfix::after{
clear: both;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.top{
margin: auto;
width: 600px;
/* height: 200px; */
background-color: #e66d6d;
}
.bottom{
height: 100px;
background-color: #7059f3;
}
.left{
float: left;
width: 100px;
height: 200px;
background-color: #011f09;
}
.right{
float: right;
width: 400px;
height: 200px;
background-color: #2f0241;
}
.clearfix::before,.clearfix::after{
content: "";
display: table;
}
.clearfix::after{
clear: both;
}
</style>
</head>
<body>
<div class="top clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
注意事项：
clearfix::before解决外边距塌陷问题clearfix::after清除浮动
overflow 法
父元素添加 CSS 属性 overflow: hidden
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.top{
margin: auto;
width: 600px;
/* height: 200px; */
background-color: #e66d6d;
overflow: hidden;
}
.bottom{
height: 100px;
background-color: #7059f3;
}
.left{
float: left;
width: 100px;
height: 200px;
background-color: #011f09;
}
.right{
float: right;
width: 400px;
height: 200px;
background-color: #2f0241;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
Flex 布局
Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力
Flex 布局不会产生浮动布局中的脱标现象，布局网页更简单、更灵活
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.box{
display: flex;
justify-content: space-between;
height: 300px;
border: 1px solid black;
}
.box div{
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
结果如下：
Flex 组成
设置方式：给父元素设置display: Flex，子元素可以自动挤压或拉伸
组成部分：
- 弹性容器
- 弹性盒子
- 主轴：默认在水平方向
- 侧轴/交叉轴：默认在垂直方向
主轴对齐方式
属性名：justify-content
属性值：
- flex-start：默认值，弹性盒子从起点开始依次排列
- flex-end：弹性盒子从终点开始依次排列
- center：弹性盒子沿主轴居中排列
- space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
- space-around：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
- space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.box{
display: flex;
justify-content: space-evenly;
height: 300px;
border: 1px solid black;
}
.box div{
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
结果如下：
侧轴对齐方式
属性名：
align-items当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）align-self单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
属性值：
- stretch：弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸才能拉伸）
- center：弹性盒子沿侧轴居中排列
- flex-start：弹性盒子从起点开始依次排列
- flex-end：弹性盒子从终点开始依次排列
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.box{
display: flex;
align-items: flex-end;
height: 300px;
border: 1px solid black;
}
.box div:nth-child(2){
align-self: center;
}
.box div{
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
结果如下：
修改主轴方向
主轴默认在水平方向，侧轴默认在垂直方向
属性名：flex-direction
属性值：
- row：水平方向，从左向右（默认）
- column：垂直方向，从上向下
- row-reverse：水平方向，从右向左
- column-reverse：垂直方向，从下向上
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 300px;
border: 1px solid black;
}
img{
width: 40%;
height: 50%;
}
span{
font-size: 30px;
font-family: "楷体";
}
</style>
</head>
<body>
<div class="box">
<img src="./img/1.jpg" alt="">
<span>山水水墨画</span>
</div>
</body>
</html>
结果如下：
注意事项：修改主轴方向为垂直方向，侧轴会自动变换到水平方向
弹性盒子伸缩比
作用：控制弹性盒子的主轴方向的尺寸
属性名：flex
属性值：整数数字，表示占用父级剩余尺寸的份数
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.box{
display: flex;
height: 300px;
border: 1px solid black;
}
.box div{
height: 100px;
}
.box div:nth-child(1){
flex: 1;
background-color: red;
}
.box div:nth-child(2){
flex: 2;
background-color: blue;
}
.box div:nth-child(3){
flex: 3;
background-color: gray;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
结果如下：
弹性盒子换行
弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示
属性名：flex-wrap
属性名：
- wrap：换行
- nowrap：不换行（默认）
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.box{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
height: 300px;
border: 1px solid black;
}
.box div{
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
结果如下：
行对齐方式
属性名：align-content
属性值：
- flex-start：默认值，弹性盒子从起点开始依次排列
- flex-end：弹性盒子从终点开始依次排列
- center：弹性盒子沿主轴居中排列
- space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
- space-around：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
- space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.box{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-content: space-around;
height: 300px;
border: 1px solid black;
}
.box div{
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
结果如下：
注意事项：align-content对单行不生效
定位
作用：灵活的改变盒子在网页中的位置
实现：
- 定位模式：
position - 边偏移：设置盒子的位置
- 水平：left、right
- 垂直：top、bottom
相对定位
属性名：position: relative
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<p>樱花飘落的坡道上，校服裙摆被春风掀起涟漪。
少女抱着素描本驻足，看花瓣像融化的蜂蜜般缓缓坠落。
忽然有片花瓣在她眼前悬停，折射出七重光晕，化作蓝紫色蝴蝶振翅欲飞。
远处传来棒球击打声与蝉鸣交织的午后，自动贩卖机旁的少年正对着她微笑，玻璃瓶装的橘子汽水在阳光下泛着金色泡沫。</p>
<div>
<img src="./img/1.png" alt="">
</div>
<p>樱花飘落的坡道上，校服裙摆被春风掀起涟漪。
少女抱着素描本驻足，看花瓣像融化的蜂蜜般缓缓坠落。
忽然有片花瓣在她眼前悬停，折射出七重光晕，化作蓝紫色蝴蝶振翅欲飞。
远处传来棒球击打声与蝉鸣交织的午后，自动贩卖机旁的少年正对着她微笑，玻璃瓶装的橘子汽水在阳光下泛着金色泡沫。</p>
</body>
</html>
结果如下：
注意事项：
- 改变位置的参照物是原来的位置
- 改变位置后不会脱标，仍然占原来的位置
- 标签显示模式不会改变
绝对定位
属性名：position: absolute
使用场景：子级绝对定位，父级相对定位
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
width: 600px;
}
.news{
position: relative;
margin: 100px auto;
width: 600px;
height: 540px;
background-color: #f1c0c0;
}
.news span{
position: absolute;
right: 0;
top: 0;
display: block;
width: 55px;
height: 25px;
background-color: rgba(0, 0, 0, 0.4);
text-align: center;
line-height: 25px;
color: white;
}
</style>
</head>
<body>
<div class="news">
<img src="./img/4.png" alt="">
<span>花卉展</span>
<p>晴空如洗，湛蓝底色纯粹而明亮。繁茂的蔷薇在枝头铺展开绚烂画卷，粉白花瓣层层叠叠，似被阳光吻过的云朵，与翠绿枝叶交织缠绕。微风拂过，花朵轻颤，仿佛在低吟春日的浪漫絮语，每一簇绽放都浸满温柔气息，将画面晕染成动漫中独有的梦幻景致 —— 阳光倾洒，花香漫溢，连时光都在此刻变得柔软又诗意。</p>
</div>
</body>
</html>
结果如下：
注意事项：
- 改变位置后会脱标，不会占用原来位置
- 参照物：先找最近的已经定位的先代元素，如果所有先代元素都没有定位，会参照浏览器可视区改变位置
- 显示模式会改变，宽高生效，具备了行内块的特点
定位居中
实现步骤：
- 绝对定位
- 水平、垂直边偏移为 50%
- 子级向左、上移动自身尺寸的一半
- 左、上的外边距为 -(尺寸的一半)
transform: translate(-50%,-50%);
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
position: absolute;
left: 50%;
top: 50%;
/* margin-top: -150px;
margin-left: -100px; */
transform: translate(-50%,-50%);
width: 200px;
}
.news{
position: relative;
margin: 200px auto;
width: 400px;
height: 400px;
background-color: #e24242;
}
</style>
</head>
<body>
<div class="news">
<img src="./img/1.jpg" alt="">
</div>
</body>
</html>
结果如下：
固定定位
属性名：position: fixed
场景：元素的位置在网页滚动时不会改变
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
position: fixed;
width: 1897px;
height: 50px;
}
p{
line-height: 50px;
}
</style>
</head>
<body>
<img src="./img/2.jpg" alt="">
<p>这是一行字</p>
<p>这是一行字</p>
<p>这是一行字</p>
<p>这是一行字</p>
<p>这是一行字</p>
<p>这是一行字</p>
<p>这是一行字</p>
<p>这是一行字</p>
<p>这是一行字</p>
<p>这是一行字</p>
<p>这是一行字</p>
<p>这是一行字</p>
<p>这是一行字</p>
<p>这是一行字</p>
<p>这是一行字</p>
<p>这是一行字</p>
<p>这是一行字</p>
<p>这是一行字</p>
<p>这是一行字</p>
<p>这是一行字</p>
</body>
</html>
结果如下：
屏幕录制 2025-03-09 165009
注意事项：
- 固定定位会脱标，不会占有原来的位置
- 参照物是浏览器窗口
- 显示模式具备行内块特点
堆叠层级 z-index
默认效果：按照标签书写顺序，后来者居上
作用：设置定位元素的层级顺序，改变定位元素的显示顺序
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
position: absolute;
width: 200px;
height: 200px;
}
.box1{
background-color: #eca8a8;
z-index: 2;
}
.box2{
background-color: #a2a9ee;
left: 80px;
top: 80px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
结果如下：
注意事项：
-
堆叠顺序默认按标签顺序后来居上
-
z-index取值是整数，默认是0，取值越大显示顺序越靠上
CSS 精灵
CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置
优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度
实现步骤：
- 创建盒子，盒子尺寸与小图尺寸相同
- 设置盒子背景图为精灵图
- 添加
background-position属性，改变背景图位置- 使用测量工具测量图片左上角坐标
- 取负数坐标为
background-position属性值（向左上移动图片位置）
假如要将下图的字母 N 显示出来
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 45px;
height: 50px;
background-color: pink;
background-image: url(./img/5.png);
background-position: -106px -110px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如下：
字体图标
字体图标：展示的是图标，本质是字体
作用：在网页中添加简单的、颜色单一的小图标
优点：
- 灵活性：灵活地修改样式，例如：尺寸、颜色等
- 轻量级：体积小、渲染快、降低服务器请求次数
- 兼容性：几乎兼容所有主流浏览器
- 使用方便：先下载再使用
下载字体
iconfont 图标库：https://www.iconfont.cn/
下载字体：登录→素材库→官方图标库→进入图标库→选图标，加入购物车→购物车添加至项目→下载至本地
屏幕录制 2025-03-09 220036
使用字体
操作步骤：
- 引入字体样式表（iconfont.css）
<link rel="stylesheet" href="./iconfont.css">
- 挑选相应图标并获取类名，应用于页面
<span class="iconfont icon-xxx"></span>
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/font_4851524_dfjzseqnraq/iconfont.css">
<style>
.iconfont{
font-size: 100px;
color: rgb(168, 37, 168);
margin: 20px;
}
</style>
</head>
<body>
<span class="iconfont icon-kongtiao"></span>
<span class="iconfont icon-nuanqi"></span>
<span class="iconfont icon-bingxiang"></span>
<span class="iconfont icon-xiyiji"></span>
<span class="iconfont icon-dianshiji"></span>
<span class="iconfont icon-reshuiqi"></span>
</body>
</html>
结果如下：
注意事项：如果要调整字体大小，选择器的优先级要高于 iconfont 类
垂直对齐方式
属性名：vertical-align
属性值：
- baseline：基线对齐（默认）
- top：顶部对齐
- middle：居中对齐
- bottom：底部对齐
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 2px solid black;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="./img/1.png" alt="">
醉后不知天在水，满船清梦压星河
</div>
</body>
</html>
结果如下：
过渡
作用：可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名：transition（复合属性）
属性值：过渡的属性 花费时间（s）
注意事项：
- 过渡的属性可以是具体的 CSS 属性
- 也可以为 all（两个状态属性值不同的所有属性都产生过渡效果）
- transition 设置给元素本身
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 300px;
height: 300px;
transition: all 1s;
}
img:hover{
width: 450px;
height: 450px;
}
</style>
</head>
<body>
<img src="./img/1.png" alt="">
</body>
</html>
结果如下：
屏幕录制 2025-03-09 230108
修饰属性
透明度
作用：设置整个元素的透明度（包含背景和内容）
属性名：opacity
属性值：
- 0：完全透明（元素不可见）
- 1：不透明
- 0 - 1 之间小数：半透明
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 400px;
height: 400px;
background-color: rgb(226, 115, 115);
opacity: 0.5;
}
</style>
</head>
<body>
<div>
<img src="./img/1.png" alt="">
</div>
</body>
</html>
结果如下：
光标类型
作用：鼠标悬停在元素上时指针显示样式
属性名：cursor
属性值：
- default：默认值，通常是箭头
- pointer：小手效果，提示用户可以点击
- text：工字型，提示用户可以选择文字
- move：十字光标，提示用户可以移动
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: #e08b8b;
cursor: pointer;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-09 231536
平面转换
作用：为元素添加动态效果，一般与过渡配合使用
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
平面转换又叫 2D 转换
属性名：transform
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin: 100px 0;
width: 100px;
height: 100px;
background-color: #e08b8b;
transition: all 1s;
}
div:hover{
transform: translate(700px) rotate(360deg) scale(2) skew(360deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 153147
平移
属性名：transform: translate(X轴移动距离, Y轴移动距离);
属性值：
- 像素单位数值
- 百分比（参照盒子自身尺寸计算结果）
- 正负均可
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid black;
}
.son{
width: 200px;
height: 100px;
background-color: antiquewhite;
transition: all 0.5s;
}
.father:hover .son{
transform: translate(150%,200%);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 154956
注意事项：
- translate() 只写一个值，表示沿着 X 轴移动
- 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()
旋转
属性名：transform: rotate(旋转角度);
属性值：
- 角度单位是 deg
- 取值正负均可
- 取正顺时针旋转，取负逆时针旋转
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 200px;
transition: all 1s;
}
img:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./img/3.jpg" alt="">
</body>
</html>
结果如下：
屏幕录制 2025-03-13 162633
改变旋转原点
默认情况下，旋转远点是盒子中心点
属性名：transform-origin: 水平原点位置 垂直原点位置;
属性值：
- 方位名称（left、top、right、bottom、center）
- 像素单位数值
- 百分比
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 200px;
transition: all 1s;
transform-origin: right bottom;
}
img:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./img/3.jpg" alt="">
</body>
</html>
结果如下：
屏幕录制 2025-03-13 163957
多重转换
先平移再旋转
属性名：transform: translate() rotate();
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 1200px;
height: 200px;
border: 1px solid black;
}
img{
width: 200px;
transition: all 4s;
}
div:hover img{
transform: translateX(500%) rotate(360deg);
}
</style>
</head>
<body>
<div>
<img src="./img/4.jpg" alt="">
</div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 165216
注意事项：
- 不能先旋转再平移，因为旋转会改变坐标轴向
- 复合属性不能分开写，否则后面的属性会覆盖前面的属性
缩放
属性名：
transform: scale(缩放倍数);transform: scale(X轴缩放倍数, Y轴缩放倍数);
属性值：
- 通常只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
- 取值大于 1 表示放大，取值小于 1 表示缩小
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 143px;
margin: 100px auto;
}
img{
width: 200px;
transition: all 4s;
}
div:hover img{
transform: scale(2);
}
</style>
</head>
<body>
<div>
<img src="./img/4.png" alt="">
</div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 171831
倾斜
属性名：transform: skew();
属性值：
- 角度度数 deg
- 取正向左倾斜，取负向右倾斜
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 143px;
margin: 100px auto;
}
img{
width: 200px;
transition: all 2s;
}
div:hover img{
transform: skew(30deg)
}
</style>
</head>
<body>
<div>
<img src="./img/4.png" alt="">
</div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 174606
渐变
渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景
线性渐变
属性名：
background-image: linear-gradient(
渐变方向,
颜色1 终点位置,
颜色2 终点位置,
......
);
属性值：
- 渐变方向：（可选）
- to 方位名词
- 角度度数
- 终点位置：（可选）
- 百分比
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: #a0adf7;
background-image: linear-gradient(
45deg,
red,
#f8a4a4,
#a0adf7
);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如下：
径向渐变
作用：给按钮添加高光效果
属性名：
background-image: radial-gradient(
半径 at 圆心位置,
颜色1 终点位置,
颜色2 终点位置,
......
);
属性值：
- 半径可以是两条，则为椭圆
- 圆心位置取值：像素单位数值/百分比/方位名词
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
background-image: radial-gradient(
50px at center center,
red,
pink
);
}
button{
width: 100px;
height: 40px;
background-color: purple;
border: 0;
border-radius: 5px;
color: white;
background-image: radial-gradient(
30px at center center,
rgba(255,255,255,0.2),
transparent
);
}
</style>
</head>
<body>
<div></div>
<button>按钮</button>
</body>
</html>
结果如下：
空间转换
空间：是从坐标轴角度定义的 X、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴与视线方向相同
空间转换也叫 3D 转换
属性：transform
平移
属性名：
transform: translate3d(x,y,z);transform: translateX();transform: translateY();transform: translateZ();
属性值：
- 像素单位数值
- 百分比（参照盒子自身尺寸计算结果）
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
transition: all 0.5s;
}
.box:hover{
transform: translate3d(100px,200px,300px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 194159
注意事项：默认无法观察 Z 轴平移效果
视距
作用：制定了观察者与 z=0 平面的距离，为元素添加透视效果
透视效果：近大远小、近实远虚
属性名：perspective: 视距;
属性值：
- 添加给父级，取值范围 800-1200
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
perspective: 1000px;
}
.son{
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
transition: all 0.5;
}
.son:hover{
transform: translateZ(-300px);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 195356
旋转
属性名：
transform: rotateZ() 沿着 Z 轴旋转
transform: rotateX() 沿着 X 轴旋转
transform: rotateY() 沿着 Y 轴旋转
transform: rotate3d(x,y,z,角度度数); x，y，z 取值为 0-1 之间的数字
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
margin: 100px auto;
perspective: 1000px;
}
img{
width: 200px;
transition: all 2s;
}
.d1 img:hover{
transform: rotateZ(360deg);
}
.d2 img:hover{
transform: rotateX(60deg);
}
.d3 img:hover{
transform: rotateY(60deg);
}
</style>
</head>
<body>
<div class="d1">
<img src="./img/3.jpg" alt="">
</div>
<div class="d2">
<img src="./img/1.png" alt="">
</div>
<div class="d3">
<img src="./img/2.png" alt="">
</div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 201450
左手法则
根据旋转方向确定取值正负
左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向
立体呈现
作用：设置元素的子元素是位于 3D 空间中还是平面中
属性名：transform-style
属性值：
- flat：子级处于平面中
- preserve-3d：子级处于 3D 空间中
呈现立体图形步骤：
- 父元素添加
transform-style: preserve-3d; - 子级定位
- 调整子盒子的位置（位移或旋转）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.cube{
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
/* background-color: pink; */
transition: all 1s;
transform-style: preserve-3d;
}
.cube div{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
.front{
background-color: orange;
transform: translateZ(100px);
}
.back{
background-color: green;
transform: translateZ(-100px);
}
.cube:hover{
transform: rotateY(90deg);
}
</style>
</head>
<body>
<div class="cube">
<div class="front">前面</div>
<div class="back">后面</div>
</div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 213518
缩放
属性名：
transform: scale3d(x,y,z);transform: scaleX();transform: scaleY();transform: scaleZ();
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.cube{
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
/* background-color: pink; */
transition: all 4s;
transform-style: preserve-3d;
transform: scale3d(1.5,2,3);
}
.cube div{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
.front{
background-color: orange;
transform: translateZ(100px);
}
.back{
background-color: green;
transform: translateZ(-100px);
}
.cube:hover{
transform: rotate3d(1,1,1,90deg);
}
</style>
</head>
<body>
<div class="cube">
<div class="front">前面</div>
<div class="back">后面</div>
</div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 220517
动画
过渡：实现两个状态间的变化过程
动画：实现多个动态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
width: 1000px;
height: 200px;
border: 1px solid black;
}
.d2{
width: 200px;
height: 200px;
background-color: pink;
animation: change 1s infinite alternate;
}
@keyframes change {
0% {
transform: translate(0);
}
100% {
transform: translate(800px);
}
}
</style>
</head>
<body>
<div class="d1">
<div class="d2"></div>
</div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 221903
使现步骤
定义动画
- 两个状态
@keyframes 动画名称 {
from {}
to {}
}
- 多个状态
@keyframes 动画名称 {
0% {}
10% {}
......
100% {}
}
使用动画
animation: 动画名称 动画花费时长;
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
animation: change 10s;
}
@keyframes change {
0% {
width: 200px;
height: 200px;
}
25% {
width: 400px;
height: 200px;
}
75% {
width: 400px;
height: 400px;
}
100% {
border-radius: 50%;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 235715
animation 复合属性
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
- 速度曲线：
- linear：匀速运动
- steps()：括号里填数字，表示分几步完成动画
- 重复次数：
- infinite：无限循环重复播放
- 动画方向：
- alternate：反向执行
- 执行完毕时状态：
- backwards：开始状态
- forwards：结束状态
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 100px;
background-color: pink;
animation: change 1s linear 1s 3 alternate forwards;
}
@keyframes change {
from {
width: 200px;
}
to {
width: 800px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-14 002430
注意事项：
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有两个时间值，第一个时间值表示动画时长，第二个时间值表示延迟时间
animation 属性拆分
| 属性 | 作用 | 取值 |
|---|---|---|
animation-name | 动画名称 | |
animation-duration | 动画时长 | |
animation-delay | 延迟时间 | |
animation-fill-mode | 动画执行完毕时状态 | forwards：最后一帧状态 backwards：第一帧状态 |
animation-timing-function | 速度曲线 | steps (数字)：逐帧动画 |
animation-iteration-count | 重复次数 | infinite 为无限循环 |
animation-direction | 动画执行方向 | alternate 为反向 |
animation-play-state | 暂停动画 | paused 为暂停，通常配合:hover 使用 |
逐帧动画
核心原理：
- steps() 逐帧动画
- CSS 精灵图
精灵动画制作步骤：
- 准备显示区域：盒子尺寸与一张精灵小图尺寸相同
- 定义动画：移动背景图（移动距离 = 精灵图宽度）
- 使用动画：strps(N)，N 与精灵小图个数相同
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 140px;
height: 140px;
border: 1px solid black;
background-image: url(./img/01.png);
animation: run 1s steps(12) infinite;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-14 144049
多组动画
语法格式：
animation:
动画1,
动画2,
......
;
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 140px;
height: 140px;
/* border: 1px solid black; */
background-image: url(./img/01.png);
animation:
run 1s steps(12) infinite,
move 5s linear forwards
;
}
@keyframes run {
from {
background-position: 0 0;
}
to {
background-position: -1680px 0;
}
}
@keyframes move {
0% {
transform: translate(0);
}
100% {
transform: translate(800px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-14 144234