现在开始要在之前的HTML的基础上加入CSS样式了
文中打勾 ✔ 的为常用或是重要的
一、引入CSS
|
内部样式表 |
样式代码写在 head下的style 标签里面 |
|
外部样式表 |
样式代码写在独立的 CSS 文件中 |
|
内联样式（行内样式） |
样式代码写在标签内使用（style）属性 |
<!DOCTYPE html>
<html lang="en">
<head>
<!– 内部样式 –>
<style>
div {
width: 100px;
height: 100px;
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<div>
内部样式表
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<!– 外部样式表 –>
<link rel="stylesheet" href="my.css">
</head>
<body>
<div>
外部样式表
</div>
</body>
</html>
<body>
<div style="color: blue; width: 100px; height: 100px; background-color: yellow;">
内联样式（行内样式）
</div>
</body>
二、基础选择器
1、标签选择器
使用场景： 选中相同的标签名来设置样式
书写方法：标签名 + { }
<head>
<style>
<!– 选中div标签来进行设置样式，其他标签也是一样 –>
div {
width: 100px;
height: 100px;
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<div>
标签选择器
</div>
</body>
2、类选择器
使用场景：用来差异化设置标签的显示效果
书写方法：（1）英文点（.）+ 自命名名称 + { }
（2）在想差异的地方加 class = "自命名名称"
<head>
<style>
div{
color: blue;
}
.box{
color: red;
}
</style>
</head>
<body>
<div>1111111</div>
<div class="box">类选择器</div>
</body>
3、id选择器
使用场景：用来差异化设置标签的显示效果
书写方法：（1）# + 自命名名称 + { }
（2）在想差异的地方加 id = "自命名名称"
<head>
<style>
div{
color: blue;
}
#box{
color: red;
}
</style>
</head>
<body>
<div>1111111</div>
<div id="box">id选择器</div>
</body>
4、通配符选择器
使用场景：给页面内的所有标签设置一样的样式
书写方法：* + { }
<head>
<style>
*{
color: blue;
}
</style>
</head>
<body>
<div>1111111111</div>
<p>2222222222</p>
<span>3333333333</span>
</body>
三、组合选择器
1、后代选择器
作用：选中该元素的后代元素。
写法：注意：中间是用空格隔开
父选择器 子选择器 {
}
<style>
.container p {
color: blue;
}
</style>
<div class="container">
<p>这是.container的子元素p（会变成蓝色）</p>
<div>
<p>这是.container的孙元素p（也会变成蓝色）</p>
</div>
</div>
<p>这是.container外的p（不会变色）</p>被选中）</p>
2、子代选择器
作用：选中该元素的子代元素（最近的子代元素）。
写法：
父选择器 > 子选择器 {
CSS 属性
}
<style>
.list > li {
color: blue;
}
</style>
<ul class="list">
<li>这是.list的直接子元素li（会变成蓝色）</li>
<li>
<ul>
<li>这是.list的孙元素li（不会变色）</li>
</ul>
</li>
</ul>
3、并集选择器
作用：选中多组元素标签设置相同的样式。
写法：
选择器1, 选择器2, …, 选择器N {
CSS 属性
}
<style>
h1, p, .box {
color: blue;
}
</style>
<h1>标题（会变成蓝色）</h1>
<p>段落文本（会变成蓝色）</p>
<div class="box">盒子内容（会变成蓝色）</div>
4、交集选择器
作用：选中同时满足多个条件的元素。
写法：注意：选择器之间连写。
选择器1选择器2 {
CSS 属性
}
<style>
p.active {
color: blue;
}
</style>
<p class="active">这是p标签且class为active（会变成蓝色）</p>
<p>这是普通p标签（不会变色）</p>
<div class="active">这是class为active的div（不会变色）</div>
四、伪类选择器：
作用：用于选择元素特定状态或特定位置关系的选择器
1、 动态伪类
| 动态伪类选择器 | 作用 |
| :hover | 鼠标悬停在元素上时 |
| :active | 元素被激活时（如鼠标点击按下但未松开） |
| :link | 未被访问过的链接（访问前） |
| :visited | 已被访问过的链接（访问后） |
<style>
/* 未被访问过的链接 */
a:link {
color: blue;
}
/* 已被访问过的链接 */
a:visited {
color: purple;
}
/* 鼠标悬停在链接上时 */
a:hover {
color: red;
}
/* 链接被点击按下时（激活状态） */
a:active {
color: orange;
}
/* 给按钮也加个:active示例 */
button:active {
background: red;
}
</style>
<a href="#">测试链接（点我试试）</a>
<br><br>
<button>测试按钮（按住我看看）</button>
2、结构伪类
| 结构伪类选择器 | 作用 |
| :first-child | 父元素的第一个子元素 |
| :last-child | 父元素的最后一个子元素 |
| :nth-child(n) | 父元素的第 n 个子元素（n 可写数字、公式如2n表示偶数） |
| :first-of-type | 父元素中同类型的第一个元素 |
<style>
/* 父元素的第一个子元素 */
ul li:first-child {
color: red;
}
/* 父元素的最后一个子元素 */
ul li:last-child {
color: blue;
}
/* 父元素的第3个子元素 */
ul li:nth-child(3) {
color: green;
}
/* 父元素中偶数位置的子元素（2n表示偶数） */
ol li:nth-child(2n) {
background: #eee;
}
/* 父元素中同类型的第一个元素（这里是第一个p标签） */
div p:first-of-type {
font-weight: bold;
}
</style>
<!– 测试:first-child、:last-child、:nth-child(n) –>
<ul>
<li>第一个li（红色）</li>
<li>第二个li（默认色）</li>
<li>第三个li（绿色）</li>
<li>第四个li（默认色）</li>
<li>最后一个li（蓝色）</li>
</ul>
<!– 测试:nth-child(2n) –>
<ol>
<li>第一个li（默认背景）</li>
<li>第二个li（灰色背景）</li>
<li>第三个li（默认背景）</li>
<li>第四个li（灰色背景）</li>
</ol>
<!– 测试:first-of-type –>
<div>
<h3>标题</h3>
<p>第一个p标签（加粗）</p>
<p>第二个p标签（默认样式）</p>
</div>
五、伪元素选择器
作用：用于创建并选择元素虚拟部分的选择器
注意：必须设置 content属性，即使content为空。
| 伪元素选择器 | 作用 |
|
::before |
在元素内容之前插入虚拟内容并设置样式，需配合content属性使用（即使content为空） |
|
::after |
在元素内容之后插入虚拟内容并设置样式，同样依赖content属性。 |
<style>
/* ::before 示例：在元素内容前插入内容 */
.box::before {
content: "前缀：";
color: red;
}
/* ::after 示例：在元素内容后插入内容 */
.box::after {
content: "后缀";
color: blue;
}
/* 另一个按钮示例 */
button::before {
content: "🔍";
margin-right: 5px;
}
</style>
<div class="box">这是盒子内容</div>
<br>
<button>搜索</button>
六、CSS三大特性
1、层叠性
层叠性：指相同选择器设置相同样式时，后面的样式会覆盖前面的样式（遵循 “后来者居上”）
相同的属性会覆盖，不同的属性会叠加
<style>
p {
color: red; /* 前面的样式 */
font-size: 50px;
}
p {
color: blue; /* 后面的样式覆盖前面，最终文字为蓝色 ，字号为50px*/
}
</style>
<p>测试层叠性，文字颜色是蓝色</p>
2、继承性
继承性：指子元素会继承父元素的某些样式
<style>
.parent {
color: green; /* 父元素设置颜色 */
font-family: "微软雅黑"; /* 父元素设置字体 */
}
</style>
<div class="parent">
父元素文本（绿色）
<p>子元素p标签（继承父元素的绿色和字体）</p>
</div>
3、优先级
优先级：指不同选择器作用于同一元素时，优先级高的样式生效
<style>
p { /* 元素选择器，优先级低 */
color: gray;
}
.text { /* 类选择器，优先级中 */
color: orange;
}
#demo { /* ID选择器，优先级高 */
color: purple;
}
</style>
<p id="demo" class="text">测试优先级，最终文字为紫色（ID选择器生效）</p>
七、Emmet写法
作用：用于快速生成 HTML/CSS 代码的（了解写多就会了）
下面这些只是一部分还有很多简写写法
| 元素嵌套 | > | 子元素关系（嵌套） | div>ul>li |
| + | 兄弟元素关系（平级） | div+p+span | |
| 重复与编号 | *n | 重复生成 n 个元素 | div*3 |
| CSS 属性缩写 | w100 | width: 100px; | w100 |
| h50 | height: 50px; | h50 | |
| m10-20 | margin: 10px 20px; | m10-20 | |
| p10+5 | padding: 10px 5px; | p10+5 | |
| c#f00 | color: #ff0000; | c#f00 | |
| bg#ccc | background: #cccccc; | bg#ccc | |
| pos:a | position: absolute; | pos:a | |
| d:f | display: flex; | d:f | |
| jc:c | justify-content: center; | jc:c | |
| ai:c | align-items: center; | ai:c |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emmet 语法示例</title>
<style>
/* CSS 属性缩写对应的样式 */
.box {
width: 100px; /* w100 */
height: 50px; /* h50 */
margin: 10px 20px; /* m10-20 */
padding: 10px 5px; /* p10+5 */
color: #ff0000; /* c#f00 */
background: #cccccc; /* bg#ccc */
position: absolute; /* pos:a */
display: flex; /* d:f */
justify-content: center; /* jc:c */
align-items: center; /* ai:c */
}
/* 辅助样式，让结构更清晰 */
div, ul, li, p, span {
border: 1px solid #999;
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<!– 元素嵌套：div>ul>li –>
<div>
<ul>
<li>嵌套结构：div > ul > li</li>
</ul>
</div>
<!– 兄弟元素关系：div+p+span –>
<div>兄弟1：div</div>
<p>兄弟2：p</p>
<span>兄弟3：span</span>
<!– 重复生成：div*3 –>
<div>重复生成1</div>
<div>重复生成2</div>
<div>重复生成3</div>
<!– CSS 属性缩写效果 –>
<div class="box">CSS 缩写样式效果</div>
</body>
</html>
CSS常用属性
| width | 宽度 | width: 200px;（设置元素宽度为 200 像素） |
| height | 高度 | height: 200px;（设置元素高度为 200 像素） |
| color | 颜色 | color: red;（设置文本颜色为红色） |
| background-color | 背景色 | background-color: #eee;（设置背景色为浅灰色） |
<style>
.demo {
width: 200px;
height: 200px;
color: red;
background-color: #eee;
}
</style>
<div class="demo">这是演示文本</div>
八、字体
| font-size | 设置字体大小 | font-size: 10px;（设置字体大小为 10像素） |
| font-weight | 设置字体粗细 | font-weight: bold;（设置字体为粗体）font-weight: 700;（数值表示，700 等同于 bold） |
| font-style | 设置字体倾斜效果 | font-style: italic;（设置字体为斜体） |
| line-height | 设置行与行之间的间距 |
line-height: 20px; (设置行高为 20 像素) |
| line-height: 1.5; (设置行高为字体大小的 1.5 倍) | ||
| font-family | 设置字体族（字体类型） |
font-family: "Microsoft YaHei", Arial, sans-serif; （优先使用微软雅黑，其次 Arial，最后使用无衬线字体） |
| font | 字体复合属性（按顺序简写） |
font: italic bold 16px "Microsoft YaHei", sans-serif; （同时设置斜体、粗体、16px 大小、微软雅黑字体族） |
1、字体大小
注意:字体的默认尺寸为16px
<style>
.size-s {
font-size: 10px;
color: blue;
}
.size-m {
font-size: 16px;
color: green;
}
.size-l {
font-size: 24px;
color: red;
}
</style>
<div class="size-s">10px </div>
<div class="size-m">16px </div> <!– 这是默认字号可以不用设置字号 –>
<div class="size-l">24px </div>
2、字体粗细
| font-weight | 设置字体粗细程度 | 正常：400 或 normal |
font-weight: 400;（正常粗细） font-weight: normal;（正常粗细） |
| 加粗：700 或 bold |
font-weight: 700;（加粗） font-weight: bold;（加粗） |
<style>
/* 正常粗细示例 */
.normal-400 {
font-weight: 400;
}
.normal-text {
font-weight: normal;
}
/* 加粗示例 */
.bold-700 {
font-weight: 700;
}
.bold-text {
font-weight: bold;
}
</style>
<div class="normal-400">font-weight: 400（正常）</div>
<div class="normal-text">font-weight: normal（正常）</div>
<div class="bold-700">font-weight: 700（加粗）</div>
<div class="bold-text">font-weight: bold（加粗）</div>
3、字体倾斜效果
| font-style | 设置字体的倾斜效果 | normal | 正常（不倾斜） |
| italic | 倾斜 |
<style>
/* 正常字体样式 */
.aa {
font-style: normal;
}
/* 倾斜字体样式 */
.bb {
font-style: italic;
}
</style>
<div class="aa">这是正常字体样式（font-style: normal）</div>
<div class="bb">这是倾斜字体样式（font-style: italic）</div>
4、字体类型
在使用字体类型要确保字体类型要支持
这个只做了解一般在实际开发中会有开发文档直接复制就行
中文值跟英文值都可以
可以写多个字体要用英文逗号 “，” 隔开 ,系统会依次从第一个字体类型检查是否支持
<style>
.aa {
font-family: "SimSun", sans-serif; /* 当系统中没有宋体时，浏览器会使用无衬线字体 */
font-size: 16px;
}
.bb {
font-family: 宋体, sans-serif; /* 规范一点要用""包着"宋体" */
font-size: 16px;
}
</style>
<div class="aa">宋体示例1</div>
<div class="bb">宋体示例2</div>
5、字体复合属性
字体复合属性（font）的注意事项
属性顺序固定： 必须按照 font-style font-variant font-weight font-size/line-height font-family 的顺序书写，不能随意调换
|
1 |
font-style |
可选 |
字体样式（如 italic） |
|
2 |
font-variant |
可选 |
小型大写字母（如 small-caps） |
|
3 |
font-weight |
可选 |
字体粗细（如 bold） |
|
4 |
font-size/line-height |
必填 |
字体大小（必填）+ 行高（可选，用 / 连接） |
|
5 |
font-family |
必填 |
字体族（如 "Microsoft YaHei"） |
必填项：font-size 和 font-family 是必填的，缺少任意一个都会导致整个 font 属性失效
行高可选：line-height 可通过 / 跟在 font-size 后面（如 16px/24px），不写则使用默认值
可选值：font-style、font-variant、font-weight 是可选的，不写则使用默认值（normal）
引号规则：font-family 中包含空格或中文的字体名需加引号
<style>
/* 完整的字体复合属性示例 */
.aa {
font: italic small-caps bold 16px/24px "Microsoft YaHei", sans-serif;
}
/* 简化的字体复合属性示例（只包含必填项） */
.bb {
font: 14px Arial, sans-serif;
}
</style>
<div class="aa">这是完整的字体复合属性效果</div>
<div class="bb">这是简化的字体复合属性效果</div>
6、行高：
行高可以用来设置行与行之间的间距，
如果是单行文本时，可以利用这个特性来做文本垂直居中，设置行高的属性值等于盒子高度的属性值一样，就可以使文本垂直方向居中
行高构成
<style>
/* 用行高控制多行文本的行间距 */
.aa {
width: 100px;
height: 100px;
font-size: 16px;
background-color: pink;
line-height: 2; /* 行高是字体大小的2倍，行间距更宽松 */
}
</style>
<div class="aa">哈哈哈哈哈哈哈哈哈哈哈哈</div>
<style>
/* 定义一个盒子，设置固定高度 */
.box {
width: 200px;
height: 60px; /* 盒子高度 */
background-color: pink;
line-height: 60px; /* 行高 = 盒子高度，实现垂直居中 */
}
</style>
<!– 单行文本在盒子内垂直居中 –>
<div class="box">这是垂直居中的文本</div>
九、文本
| 文本基础样式 | color | 设置文本颜色 | 支持十六进制值、RGB 值、颜色名称三种取值方式 |
| 文本缩进 | text-indent | 指定段落首行缩进距离 | 常用像素（px）作为单位，适配中文段落排版习惯 |
| 文本对齐 | text-align | 控制文本水平对齐方式 | 常用取值：center（居中）、right（右对齐）、justify（两端对齐，类似杂志排版）、left（默认左对齐） |
| 文本装饰 | text-decoration | 为文本添加 / 删除装饰线 | 核心用途是删除链接下划线（none）；不建议为非链接文本添加下划线，易混淆；其他取值：overline（上划线）、line-through（删除线） |
| 文本大小写 | text-transform | 控制文本字母大小写 | 取值对应功能：uppercase（全大写）、lowercase（全小写）、capitalize（单词首字母大写） |
| 字符 / 单词间距 | letter-spacing | 调整字符之间的间距 | 可增加或减少字符间距，优化文本紧凑度 |
| 字符 / 单词间距 | word-spacing | 调整单词之间的间距 | 仅对英文等空格分隔单词的语言生效，增加 / 减少单词间距 |
| 行高 | line-height | 设置文本行与行之间的高度 | 影响段落可读性，合理设置可减少阅读疲劳 |
| 文本方向 | direction | 设置文本排列方向 | 用于适配多语言排版（如阿拉伯语从右到左），需配合 unicode-bidi 使用 |
| 文本阴影 | text-shadow | 为文本添加阴影效果 | 增强文本视觉层次感，可设置阴影颜色、模糊度、偏移量 |
| 垂直对齐 | vertical-align | 控制元素垂直对齐方式 | 常用于调整文本与相邻图像的对齐关系（如居中、顶部对齐） |
| 空白处理 | white-space | 控制元素内空白的显示方式 | 可实现 “禁用文字换行” 等效果，控制空格、换行的保留 / 折叠 |
| 多语言文本 | unicode-bidi | 设置 / 返回文本是否被重写 | 配合 direction 属性，解决多语言文本方向冲突问题 |
常用：
1、文本颜色
写法：
color：颜色
<style>
.aa {
color: #ff6600; /* 橙色，也可写 rgb(255, 102, 0) 或 orange */
font-size: 16px;
}
</style>
<div class="aa">这是橙色的文本内容</div>
2、文本缩进
写法：
text-indent：数字+em单位
<style>
.bb {
text-indent: 2em; /* 缩进2个字符宽度，常用作段落首行缩进 */
font-size: 16px;
}
</style>
<p class="bb">这是一段带有首行缩进的文本，通常用于文章段落的排版，让内容结构更清晰。</p>
3、文本（水平）对齐方式
用来对齐内容，图片，文字都可以。
注意：属性要设置给内容的父级。
写法：
text-align：left
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
<style>
/* 左对齐 */
.aa {
background-color: red;
text-align: left;
}
/* 居中对齐 */
.bb {
text-align: center;
}
/* 右对齐 */
.cc {
background-color: red;
text-align: right;
}
</style>
<div class="aa">left（左对齐）</div>
<div class="bb">center（居中对齐）</div>
<div class="cc">right（右对齐）</div>
4、单行文本（垂直）对齐方式
写法：
line-height：值等于高
可以用行高来做，不清楚可以翻看上面也有解释
<style>
/* 定义一个盒子，设置固定高度 */
.box {
width: 200px;
height: 60px; /* 盒子高度 */
background-color: pink;
line-height: 60px; /* 行高 = 盒子高度，实现垂直居中 */
}
</style>
<!– 单行文本在盒子内垂直居中 –>
<div class="box">这是垂直居中的文本</div>
5、文本修饰线
核心用途是删除链接下划线（none）；不建议为非链接文本添加下划线
写法：
text-decoration：none
<style>
.aa {
text-decoration: none;
}
</style>
<div>
<!– 还有下划线 –>
<a href="#">空链接</a>
<br>
<!– 已清除下划线 –>
<a href="https://www.baidu.com/" class="aa">跳转百度</a>
</div>
十、CSS 背景
| 背景色 | background-color |
| 背景图 | background-image |
| 背景图平铺方式 | background-repeat |
| 背景图位置 | background-position |
| 背景图缩放 | background-size |
| 背景图固定 | background-attachment |
| 背景复合属性 | background |
1、背景色
写法：
background-color：颜色值
<style>
.aa {
width: 300px;
height:300px;
background-color: red; /* 红色背景 */
}
</style>
<div class="aa">背景色</div>/
2、背景图
写法：
background-image:url("这里填图片地址");
<style>
.aa {
width: 300px;
height:300px;
/* 引入示例背景图，可替换为自己的图片地址 */
background-image: url("https://picsum.photos/300/150");
}
</style>
<div class="aa">背景图</div>
3、背景图平铺方式
写法：
background-repeat: 平铺方式值;
| no-repeat | 不平铺 |
| repeat | 平铺（默认效果） |
| repeat-x | 沿水平方向平铺 |
| repeat-y | 沿垂直方向平铺 |
<style>
/* 公共样式：统一盒子样式 */
.box {
width: 300px;
height: 200px;
margin: 10px 0;
border: 1px solid #ccc;
background-image: url("https://picsum.photos/100/100"); /* 示例背景图 */
}
/* 不平铺 */
.aa {
background-repeat: no-repeat;
}
/* 平铺（默认） */
.bb {
background-repeat: repeat;
}
/* 水平方向平铺 */
.cc {
background-repeat: repeat-x;
}
/* 垂直方向平铺 */
.dd {
background-repeat: repeat-y;
}
</style>
<div class="box aa">不平铺效果</div>
<div class="box bb">平铺效果</div>
<div class="box cc">水平方向平铺效果</div>
<div class="box dd">垂直方向平铺效果</div>
4、背景图位置
写法：
background-position: 位置值;
|
方位关键字 |
left、right、top、bottom、center，可组合使用（如 left top） |
|
具体数值 |
50px、100px 等（如 50px 100px，第一个值为水平位置，第二个为垂直位置） |
|
百分比 |
50%、100% 等（如 50% 50%，基于盒子尺寸计算位置） |
<style>
/* 统一公共盒子样式（只写一次即可） */
.box {
width: 300px;
height: 200px;
margin: 10px 0;
border: 1px solid #ccc;
background-image: url("https://picsum.photos/100/100");
background-repeat: no-repeat;
}
/* 1. 基础方位关键字 */
.aa {
background-position: left; /* 左 */
}
.bb {
background-position: right; /* 右 */
}
.cc {
background-position: top; /* 上 */
}
.dd {
background-position: bottom; /* 下 */
}
.ee {
background-position: right top; /* 右上 */
}
/* 2. 其他位置类型 */
.ff {
background-position: center; /* 居中 */
}
.gg {
background-position: left top; /* 左上 */
}
.hh {
background-position: 50px 80px; /* 具体数值 */
}
.ii {
background-position: 50% 50%; /* 百分比 */
}
</style>
<!– 基础方位关键字示例 –>
<div class="box aa">背景图靠左侧</div>
<div class="box bb">背景图靠右侧</div>
<div class="box cc">背景图靠上方</div>
<div class="box dd">背景图靠下方</div>
<div class="box ee">背景图靠右上</div>
<!– 其他位置类型示例 –>
<div class="box ff">背景图居中</div>
<div class="box gg">背景图左上</div>
<div class="box hh">背景图水平50px、垂直80px</div>
<div class="box ii">背景图50% 50%位置</div>
5、背景图缩放
写法：
background-size: 缩放方式值;
| auto | 保持背景图原始尺寸（默认值） |
| cover | 等比缩放背景图，使其覆盖整个盒子（超出部分裁剪）（✔） |
| contain | 等比缩放背景图，使其完整显示在盒子内（可能留有空白）（✔） |
| 具体数值 | 200px、150px 等（如 200px 150px，设置宽高，可只写一个值，另一个为 auto） |
| 百分比 | 50%、100% 等（如 100% 100%，基于盒子尺寸缩放，可只写一个值，另一个为 auto） |
<style>
/* 公共盒子样式 */
.box {
width: 300px;
height: 200px;
margin: 10px 0;
border: 1px solid #ccc;
background-image: url("https://picsum.photos/400/300"); /* 原图尺寸大于盒子，方便看缩放效果 */
background-repeat: no-repeat;
background-position: center;
}
/* auto：保持原始尺寸 */
.aa {
background-size: auto;
}
/* cover：覆盖整个盒子 */
.bb {
background-size: cover;
}
/* contain：完整显示在盒子内 */
.cc {
background-size: contain;
}
/* 具体数值：宽200px、高auto */
.dd {
background-size: 200px;
}
/* 百分比：宽100%、高100% */
.ee {
background-size: 100% 100%;
}
</style>
<div class="box aa">保持背景图原始尺寸</div>
<div class="box bb">等比缩放覆盖整个盒子</div>
<div class="box cc">等比缩放完整显示在盒子内</div>
<div class="box dd">背景图宽度设为200px</div>
<div class="box ee">背景图宽高均设为盒子的100%</div>
6、背景图固定
写法：
background-attachment: 固定方式值;
| scroll | 背景图随页面滚动而滚动（默认值） |
| fixed | 背景图固定在视口，不随页面 / 元素滚动 |
| local | 背景图随元素的内容滚动而滚动 |
<style>
/* 公共盒子样式（给local加足够高度，方便看滚动效果） */
.box {
width: 300px;
height: 300px;
margin: 10px 0;
border: 1px solid #ccc;
background-image: url("https://picsum.photos/300/300");
background-repeat: no-repeat;
background-size: cover;
}
/* local场景需要元素内容可滚动 */
.local-box {
height: 200px;
overflow: auto;
}
/* scroll：背景随页面滚动 */
.aa {
background-attachment: scroll;
}
/* fixed：背景固定在视口 */
.bb {
background-attachment: fixed;
}
/* local：背景随元素内容滚动 */
.cc {
background-attachment: local;
}
</style>
<div class="box aa">
背景随页面滚动（默认）<br>
滚动页面查看效果
</div>
<div class="box bb">
背景固定在视口<br>
滚动页面查看效果
</div>
<div class="box cc local-box">
背景随元素内容滚动<br>
（滚动这个盒子的内容）<br>
内容1<br>内容2<br>内容3<br>内容4<br>内容5<br>内容6<br>内容7<br>内容8
</div>
7、背景复合属性
写法：不需要按顺序来写
background: 属性值
属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）
注：若用 CSS3 新写法，可在 位置 后加 / 跟上 background-size，但老旧浏览器可能不兼容，background-size 可能有时候需单独写；）
<style>
.box {
width: 300px;
height: 200px;
margin: 10px 0;
border: 1px solid #ccc;
}
/* 示例1：包含背景色、图、平铺、位置、固定 */
.aa {
/* 顺序：背景色 背景图 平铺方式 固定方式 位置 */
background: #f5f5f5 url("https://picsum.photos/200/200") no-repeat fixed center;
/* 单独写background-size（兼容写法） */
background-size: contain;
}
/* 示例2：CSS3新写法（位置+size用/连接） */
.bb {
/* 顺序：背景图 平铺 位置/size 背景色 */
background: url("https://picsum.photos/200/200") no-repeat center/cover #eef;
}
</style>
<div class="aa">复合属性：背景色+图+平铺+固定+位置</div>
<div class="bb">CSS3新写法：位置/缩放+背景色</div>
十一、盒子模型
盒子组成
| 内容区（content） | 存放元素内容（文字、图片等）的区域，大小由 width/height 控制 |
| 内边距（padding） | 内容区与边框之间的空白区域，可通过 padding 相关属性设置 |
| 边框线（border） | 包裹内边距和内容区的边框，可通过 border 相关属性设置样式、宽度、颜色 |
| 外边距（margin） | 边框外的空白区域，用于控制元素与其他元素的间距，可通过 margin 相关属性设置 |
box-sizing: border-box;——这个可以对解决由内外边距撑大盒子的影响
盒子计算
不关外边距
计算盒子尺寸 = 内容尺寸 + 边框线尺寸 + 内边距尺寸
| 标准盒模型（W3C） |
content-box（默认） 或是不使用box-sizing属性时 |
盒子自身尺寸 = 内容区（width/height） + 内边距（padding） + 边框（border） |
| IE 盒模型（怪异） | 值为border-box | 盒子自身尺寸 = 设定的width/height（包含内容区 + 内边距 + 边框） |
1、内边距（padding）
写法：
方式一：单方向设置内边距
border-方位名词：尺寸距离
方法二：多值写法
<style>
/* 公共盒子样式 */
.box {
width: 200px;
height: 150px;
background-color: pink;
border: 1px solid #333; /* 加边框方便看内边距范围 */
}
/* 1. 单方向设置内边距 */
.aa {
/* 单独设置四个方向内边距 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 80px;
}
/* 2. padding一个值：四个方向相同 */
.bb {
padding: 10px;
}
/* 3. padding四个值：上→右→下→左，可以看成一个顺时针来取值 */
.cc {
padding: 10px 20px 40px 80px; /* 效果同.aa */
}
/* 4. padding三个值：上→左右→下 */
.dd {
padding: 10px 40px 80px;
}
/* 5. padding两个值：上下→左右 */
.ee {
padding: 10px 80px;
}
</style>
<div class="box aa">单方向设置内边距</div>
<div class="box bb">padding一个值（四方向均10px）</div>
<div class="box cc">padding四个值（上10/右20/下40/左80）</div>
<div class="box dd">padding三个值（上10/左右40/下80）</div>
<div class="box ee">padding两个值（上下10/左右80）</div>
2、边框线（border）
写法：
方法一：单独分开写
border-width: 3px; 边框宽度（尺寸）
border-color: #333; 边框颜色
border-style: solid; 边框线线样式
border-top-style: solid; 上方的边框线线样式
方法二：
属性名：border-方位名词
属性值：边框线粗细（尺寸） 线条样式 颜色（不区分顺序）
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
<style>
/* 方法一 */
.box1 {
width: 200px;
height: 100px;
margin: 10px 0;
padding: 10px;
border-width: 3px; /* 边框宽度，让样式更明显 */
border-color: #333; /* 边框颜色 */
border-style: solid; /* 实线样式 */
}
/* 方法二 */
.box2 {
width: 200px;
height: 100px;
margin: 10px 0;
padding: 10px;
border: 2px solid blue;
}
/* 设置单方向的边框线 */
.box3 {
width: 200px;
height: 100px;
margin: 10px 0;
padding: 10px;
border-top: 2px solid blue;
border-bottom: 2px solid red;
border-left: 2px solid yellow;
border-right: 2px solid black;
}
</style>
<div class="box1">实线边框（solid）</div>
<div class="box2">实线边框（solid）</div>
<div class="box3">单方向的边框线（solid）</div>
3、外边距（margin）
写法：与 padding写法相同
<style>
/* 父容器：用于衬托子盒子的外边距效果，加背景和边框区分 */
.container {
width: 500px;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
margin: 20px auto;
}
/* 公共子盒子样式：统一尺寸和背景，方便看外边距间距 */
.box {
width: 200px;
height: 100px;
background-color: skyblue;
border: 1px solid #333;
}
/* 1. 单方向设置外边距（上、右、下、左） */
.aa {
margin-top: 10px; /* 上外边距 */
margin-right: 20px; /* 右外边距 */
margin-bottom: 30px; /* 下外边距 */
margin-left: 40px; /* 左外边距 */
}
/* 2. margin一个值：四个方向外边距相同 */
.bb {
margin: 20px;
}
/* 3. margin四个值：上 → 右 → 下 → 左（顺时针顺序） */
.cc {
margin: 10px 20px 30px 40px; /* 效果同.aa */
}
/* 4. margin三个值：上 → 左右 → 下 */
.dd {
margin: 10px 50px 30px;
}
/* 5. margin两个值：上下 → 左右 */
.ee {
margin: 10px 50px;
}
/* 6. 特殊用法：margin: 0 auto（水平居中，块级元素专属） */
.ff {
margin: 0 auto; /* 上下外边距0，左右自动居中 */
}
</style>
<div class="container">
<div class="box aa">单方向设置外边距</div>
<div class="box bb">margin一个值（四方向均20px）</div>
<div class="box cc">margin四个值（上10/右20/下30/左40）</div>
<div class="box dd">margin三个值（上10/左右50/下30）</div>
<div class="box ee">margin两个值（上下10/左右50）</div>
<div class="box ff">margin: 0 auto（水平居中）</div>
</div>
合并问题
描述：
当两个垂直相邻的块级元素（比如上下排列的两个 div），上方元素设置了margin-bottom，下方元素设置了margin-top，最终两者之间的间距会取较大的那个 margin 值（而非两个值相加），这就是 “外边距合并”。
<style>
.box {
width: 200px;
height: 100px;
background: skyblue;
}
.box1 {
margin-bottom: 30px; /* 下方外边距30px */
}
.box2 {
margin-top: 20px; /* 上方外边距20px */
}
</style>
<!– 最终两个盒子的间距是30px（取较大的margin-bottom），而非50px –>
<div class="box box1">上方盒子（margin-bottom:30px）</div>
<div class="box box2">下方盒子（margin-top:20px）</div>
塌陷问题
描述：父子级的标签，子级的添加 上外边距 会产生塌陷问题，可以通过加边框线，或是子级不用margin ，直接在父级中用padding来设置。
<style>
.aa {
width: 300px;
height: 300px;
background-color: blue;
box-sizing: border-box;
/* 若取消下面这行注释（方法一：用内边距并且把 margin-top: 50px;删掉），塌陷会消失 */
/* padding-top: 50px; */
/* 若取消下面这行注释（方法二：加边框），塌陷会消失 */
/* border-top: 1px solid #000; */
}
.bb {
width: 100px;
height: 100px;
background-color: orange;
margin-top: 50px;
}
</style>
<body>
<div class="aa">
<div class="bb">son</div>
</div>
</body>
拓展
行内元素span，添加 margin 和 padding，无法改变元素垂直位置
可以通过给行内元素添加 line-height来改变垂直位置
<style>
/* 行内元素设置margin/padding（垂直无效，水平有效）+ line-height（生效） */
span {
background: pink;
/* 垂直margin/padding不生效，水平生效 */
margin: 20px;
padding: 20px;
/* line-height改变垂直占位，生效 */
line-height: 80px;
}
</style>
<!– 水平间距有变化，垂直方向由line-height撑开，margin/padding垂直无作用 –>
<span>666666666666</span>
十二、圆角
写法：
属性名：border-radius
属性值：数字+px / 百分比
支持多值写法
<style>
/* 公共样式：统一尺寸和背景，方便对比圆角效果 */
.box {
width: 200px;
height: 100px;
margin: 10px 0;
background: pink;
}
/* 1. 四个角统一圆角（像素值） */
.aa {
border-radius: 15px;
}
/* 2. 四个角分别设置：左上 → 右上 → 右下 → 左下（顺时针） */
.bb {
border-radius: 5px 20px 30px 40px;
}
/* 3. 两个值：第一个值（左上、右下），第二个值（右上、左下） */
.cc {
border-radius: 30px 10px;
}
/* 4. 百分比值（适合做圆形/胶囊形） */
.dd {
/* 宽高相等时，50%就是正圆形；宽高不等时是椭圆 */
width: 100px;
height: 100px;
border-radius: 50%;
}
/* 5. 胶囊形（宽高不等，圆角设为高度的一半） */
.ee {
border-radius: 50px; /* 高度是100px，50px即为高度的一半 */
}
/* 6. 单个角设置（左上圆角） */
.ff {
border-top-left-radius: 30px;
/* 也可以这样子 */
/* border-radius: 30px 0px 0px 0px; */
}
</style>
<div class="box aa">四个角统一圆角（15px）</div>
<div class="box bb">四个角分别设置圆角（5px 20px 30px 40px）</div>
<div class="box cc">两个值设置圆角（30px 10px）</div>
<div class="box dd">百分比值（50%）→ 圆形</div>
<div class="box ee">胶囊形（圆角=高度的一半）</div>
<div class="box ff">单个角设置圆角（左上30px）</div>
十三、渐变
| 线性渐变 | linear-gradient(方向/角度, 色1, 色2) | 方向支持to 方向词或角度数值 |
| 径向渐变 | radial-gradient(范围, 色1, 色2) | 范围支持closest-side/farthest-corner等 |
| 重复渐变 | repeating-线性/径向渐变(…) | 需指定颜色的间隔宽度 |
<style>
.box {
width: 220px;
height: 100px;
margin: 10px 0;
border-radius: 12px;
line-height: 100px;
text-align: center;
color: #fff;
}
/* 1. 线性渐变：不同方向写法 */
.a1 {
/* 方向1：to 方向词（上/下/左/右/对角） */
background: linear-gradient(to bottom right, #4361ee, #3a0ca3);
}
.a2 {
/* 方向2：角度（0deg=向上，90deg=向右） */
background: linear-gradient(135deg, #f72585, #4cc9f0);
}
/* 2. 径向渐变：不同范围写法 */
.b1 {
border-radius: 50%; /* 圆形 */
/* 范围1：closest-side（渐变到最近边） */
background: radial-gradient(closest-side, #ffadad, #ffd6a5);
}
.b2 {
border-radius: 50%;
/* 范围2：farthest-corner（渐变到最远角） */
background: radial-gradient(farthest-corner, #caffbf, #9bf6ff);
}
/* 3. 重复渐变 + 胶囊形 */
.c1 {
border-radius: 50px; /* 胶囊形 */
background: repeating-linear-gradient(
45deg,
#ff006e,
#ff006e 10px,
#8338ec 10px,
#8338ec 20px
);
}
</style>
<div class="box a1">线性渐变（to bottom right）</div>
<div class="box a2">线性渐变（135deg 角度）</div>
<div class="box b1">径向渐变（closest-side）</div>
<div class="box b2">径向渐变（farthest-corner）</div>
<div class="box c1">重复线性渐变+胶囊形</div>
