🌈
个人主页: Hygge_Code
🔥
热门专栏:从0开始学习Java | Linux学习 | 计算机网络
💫
个人格言: “既然选择了远方，便不顾风雨兼程”
前言
CSS（Cascading Style Sheets）作为网页样式的核心语言，从基础语法到前沿特性持续迭代。本文将覆盖所有常用CSS知识点，助力你掌握CSS！
一、CSS基础：语法与核心概念🥝
1.1 语法结构
CSS最小功能单位是规则集，由「选择器」「声明块」「属性」「值」组成，语法需严格遵循规范：
/* 规则集 = 选择器 + 声明块 */
选择器 {
属性1: 值1; /* 声明：冒号分隔属性与值，分号结尾（不可省略） */
属性2: 值2; /* 多声明换行书写，提升可读性 */
}
/* 实战示例：段落基础样式 */
p {
font-size: 16px; /* 非0值必须带单位（px/em/rem） */
color: #333; /* 十六进制颜色（缩写，等价#333333） */
line-height: 1.5; /* 无单位：当前字体大小的1.5倍 */
margin: 0; /* 0可省略单位 */
font-family: "Microsoft YaHei", Arial, sans-serif; /* 字体族：优先使用前者 */
}
关键语法规则
-
注释：仅支持
/* 内容 */（单行/多行），// 单行注释无效（会导致后续样式失效）。 -
大小写：属性/选择器不区分大小写（
Color=,color），但值中路径（url(Image.jpg)）、字体名（"Microsoft YaHei"）区分大小写。 -
空格规范：选择器与
{之间必须加空格（p{不规范），冒号与值之间建议加空格（font-size:16px→font-size: 16px）。
1.2 四种引入方式🤔
| 引入方式 | 语法示例 | 优先级 | 加载机制 | 适用场景 | 避坑点 |
|---|---|---|---|---|---|
| 内联样式 | <div style="color: red; font-size: 18px;">内容</div> |
最高 | 随元素加载 | 动态元素、临时样式调整 | 样式与HTML耦合，无法复用 |
| 内部样式 | <head><style>.box { width: 200px; }</style></head> |
中 | 随HTML头部加载 | 单页面网站、临时测试 | 仅当前页面生效，样式过多导致HTML臃肿 |
| 外部样式 | <link rel="stylesheet" href="style.css" media="all"> |
中 | 并行加载 | 多页面网站、大型项目 | 需额外HTTP请求（可通过打包优化） |
| @import引入 | <style>@import url("reset.css");</style> |
最低 | 串行加载 | 样式模块化拆分（如导入重置样式） | 必须放样式顶部，无法在@media中使用 |
1.3 三大特性：层叠性、继承性与优先级详解🐦🔥
CSS（层叠样式表）之所以能灵活控制网页样式，核心在于它的三大特性：层叠性、继承性和优先级。这些特性决定了样式如何应用、冲突如何解决以及元素如何继承样式规则。
1. 层叠性
层叠性是CSS名称中"层叠"二字的直接体现，它定义了如何处理多个样式规则应用到同一元素时的冲突问题。
核心原则
-
样式冲突时，遵循"就近原则"
当多个选择器对同一元素设置了相同属性时，距离元素结构更近的样式会覆盖较远的样式。span { color: red; /* 距离远，被覆盖 */ font-size: 42px; /* 不冲突，正常生效 */ } span { color: pink; /* 距离近，生效 */ } -
样式不冲突时，会叠加生效
不同属性的样式规则会同时作用于元素，不会相互影响。
实际应用
层叠性让我们可以：
- 先设置通用样式，再针对特定元素微调
- 按页面结构层级组织样式，后期修改更灵活
- 避免样式重复定义，简化代码结构
2. 继承性
继承性指子元素会自动获取父元素的某些样式属性，实现"子承父业"的效果，从而减少重复代码。
可继承的样式类别
并非所有CSS属性都能继承，主要可继承的属性集中在：
- 文本相关：
text-开头的属性（如text-align、text-indent） - 字体相关：
font-开头的属性（如font-size、font-family） - 行高相关：
line-height - 颜色相关：
color
h3 {
/* 父元素设置 */
color: green;
font: 32px/1.5 "Microsoft YaHei"; /* 字体大小32px，行高1.5 */
}
div {
/* 子元素继承了h3的行高设置 */
font-size: 20px; /* 行高自动计算为 20px * 1.5 = 30px */
}
继承性的实用技巧
- 在
body标签中设置全局样式（如字体、颜色、行高），让所有文本元素继承 - 利用行高继承的特性：父元素设置
line-height: 1.5，子元素会根据自身字体大小自动计算行高 - 注意：块级元素的宽度默认继承父容器的100%，这也是一种特殊的继承表现
不可继承的典型属性
- 布局相关：
width、height、margin、padding、border - 定位相关：
position、top、left等 - 背景相关：
background系列属性
3. 优先级：决定样式应用的权重规则
当多个不同选择器作用于同一元素时，优先级规则决定了哪个样式最终生效。优先级通过"权重"来量化，权重高的样式会覆盖权重低的样式。
权重计算规则
CSS权重采用四组数字表示 (a,b,c,d)，从左到右优先级依次降低：
-
!important：无穷大（最高优先级） - 行内样式
style=""：(1,0,0,0) - ID选择器：
(0,1,0,0) - 类选择器、伪类选择器：
(0,0,1,0) - 元素选择器：
(0,0,0,1) - 继承或通配符
*：(0,0,0,0)
关键注意事项
-
权重不会进位：例如10个元素选择器
(0,0,0,10)仍小于1个类选择器(0,0,1,0) -
继承的权重为0：即使父元素权重很高，子元素通过继承获得的样式权重依然为0
#father { color: red; /* 父元素权重高，但子元素p通过继承获得的权重为0 */ } p { color: blue; /* 元素选择器权重(0,0,0,1) > 继承权重0，因此生效 */ } -
复合选择器权重叠加：多个基础选择器组合时，权重为各部分之和
ul li { /* 两个元素选择器：0,0,0,1 + 0,0,0,1 = 0,0,0,2 */ color: green; } .nav li { /* 类选择器 + 元素选择器：0,0,1,0 + 0,0,0,1 = 0,0,1,1 */ color: pink; /* 权重更高，生效 */ } -
!important的使用：添加在属性值后可强制提升优先级，但应谨慎使用h4 { color: pink !important; /* 优先级最高，覆盖行内样式 */ }
4. 综合案例：理解三大特性的协同工作
1. 以导航菜单为例，展示三大特性如何共同作用
/* 1. 继承性：设置基础样式，被所有子元素继承 */
body {
font-family: "Microsoft YaHei";
line-height: 1.5;
}
/* 2. 优先级：类选择器定义导航容器样式 */
.nav {
color: #333;
}
/* 3. 复合选择器权重叠加：.nav li (0,0,1,1) */
.nav li {
color: #666;
}
/* 4. 更高权重：.nav .active (0,0,2,0) */
.nav .active {
color: #ff6700;
}
/* 5. 层叠性：hover状态样式覆盖默认样式 */
.nav li:hover {
color: #f00; /* 鼠标悬停时生效 */
}
这个案例中：
- 继承性减少了字体和行高的重复定义
- 优先级确保了特定菜单项（.active）的样式正确应用
- 层叠性让hover状态能动态覆盖默认样式
2. 综合代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三大特性</title>
<!-- CSS三个特性：层叠性、继承性、优先级 -->
<style>
/* 111.层叠性 */
/* 给相同选择器设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式，层叠样式主要解决样式冲突的问题
层叠性原则：
1.样式冲突，遵循 就近原则 ，哪个样式离结构近，就执行哪个样式
2.样式不冲突，不会重叠
*/
span {
color: red;
/* 这个font-size样式并没有和下面span存在样式冲突，正常生效 */
font-size: 42px;
}
span {
/* 这个color样式与前面div的color样式发生冲突，但这个距离更近，显示这个 */
color: pink;
}
/* 222.继承性 */
/* 1.恰当地使用继承可以简化代码，降低CSS的复杂性
2.子标签会集成父标签的某些样式(text- ,font- ,line- 这些元素开头的可以继承，以及color属性)
即 子承父业
*/
h3 {
color: green;
/* font-size: 25px; */
/* font复合简写 32px为字体大小 1.5px为行高
(1.5px也可以省略掉px)行高可以跟单位，也可以不跟单位
1.如果子元素没有设置行高，则会集成父元素的行高为1.5，此时子元素的行高是：当前这个子元素的文字大小*1.5
一般在body{}里面统一设置行高（开发中常用），这里为了不和前面层叠性测试冲突，就换成h3,
这样设置行高的最大优势就是里面的子元素可以根据自己的文字大小自动调整行高
*/
/* font: 32px/1.5px "Microsoft YaHei"; */
font: 32px/1.5 "Microsoft YaHei";
}
div {
/* 这个font-size覆盖掉了h3里面设置的font-size */
/* 继承了父标签h3的行高设置，此时 div里面文本的行高为20*1.5 */
font-size: 20px;
}
/* 333.优先级 */
/* 当同一个元素指定多个选择器，就会有优先级的产生
1.选择器相同，按照层叠性执行
2.选择器不同，根据选择器的权重执行
权重： 1.继承 或 *(通配符选择器) ：0,0,0,0
2.元素选择器：0,0,0,1
3.类选择器，伪类选择器：0,0,1,0
4.ID选择器：0,1,0,0
5.行内样式 style="" ：1,0,0,0
6.!important 重要的 :无穷大
注意：
1. 权重由四组数字组成，(权重虽然会有叠加)但永远不会有进位
例如： div ul li ---》0,0,0,3 .nav ul li --->0,0,1,2
a:hover -->0,0,1,1(标签选择器+伪类选择器).nav a ---> 0,0,1,1
2.等级判断从左到右，如果某一位数值相同，则判断下一位数值
3.! 继承的权重为0 !,如果该元素没有被直接选中，不管父元素权重有多高，子元素得到的权重都是0
*/
#demo {
/* ID选择器 优先级高于类选择器 */
color: skyblue;
}
.test {
/* 类选择器 优先级高于元素选择器 */
color: red;
}
h4 {
/* 元素选择器 */
/* color: pink; */
/* 若加了!important，则优先级变为无穷大 */
color: pink !important;
}
/* 父亲的自己的ID选择器的权重很高 */
#father {
color: red;
}
/* 但p继承的权重为0 */
p {
color: blue;
}
/* 对<a>进行测试
body继承的权重为0,a链接浏览器默认指定了一个样式，蓝色的 有下划线，a{color:blue;}
*/
body {
color: aqua;
}
/* 444.复合选择器会有权重叠加的问题 */
/* 1. 权重由四组数字组成，(权重虽然会有叠加)但永远不会有进位
例如： div ul li ---》0,0,0,3 .nav ul li --->0,0,1,2
a:hover -->0,0,1,1(标签选择器+伪类选择器).nav a ---> 0,0,1,1
*/
/* ul li 两个元素选择器权重叠加 0,0,0,1 + 0,0,0,1 = 0,0,0,2 所以优先级大于单独的li */
ul li {
color: green;
}
/* li为元素选择器，权重是0,0,0,1 (11)*/
li {
color: red;
}
/* .nav li 的权重： 0,0,1,0 + 0,0,0,1 = 0,0,1,1 (11) > 0,0,0,2 (2)*/
.nav li {
color: pink;
}
/* 单独的.cal中设置的color不会生效，因为.avl li 的权重比单独的.cal的权重高 */
/* 而改成 .nav .cal 就会生效 (权重0,0,2,0(20)) 高于.nav li(0,0,1,1)*/
.nav .cal {
color: yellow;
}
</style>
</head>
<body>
<!-- 测验层叠性 -->
<span>长江后浪推前浪，前浪死在沙滩上</span>
<!-- 测验继承性 -->
<h3>
<!-- 这里的div继承父类h3设置的样式 -->
<div>龙生龙，凤生凤，老鼠生的孩子会打洞</div>
<div>龙生龙，凤生凤，老鼠生的孩子会打洞</div>
<!-- li 没有手动指定文字大小，则会继承父标签h3的设置的大小32px -->
<ul>
<li>我没有指定文字大小</li>
</ul>
</h3>
<!-- 测试优先级 -->
<!-- 行内样式 style="" 权重比前面几个选择器的优先级都要高,除了 !important -->
<div>
<h4 class="test" id="demo" style="color:purple">测试优先级</h4>
</div>
<!-- 继承的权重为0 -->
<div id="father">
<p>你还是很好看</p>
</div>
<a href="#">我是单独的样式</a>
<!-- 测试复合选择器的权重叠加 -->
<ul class="nav">
<li class="cal" class="change1">大猪蹄子</li>
<li>大肘子</li>
<li>猪尾巴</li>
</ul>
</body>
</html>
演示标果：
1.4 CSS字体样式常用属性🍋🟩
1. font-family 设置字体
属性：font-family 设置字体
1.各种字体之间必须使用英文逗号隔开
2.尽量使用系统默认自带字体，保证在任何用户的浏览器都能正确显示
3.统一设置字体的话可以用 因为内容一般都是在body中
----------------------------------------------------------
body{
font-family:"Microsoft Yahei（微软雅黑，中英文都可以用）",arial(等等);
}
2. font-size 设置字体的像素大小
属性：font-size 设置字体的像素大小
1.谷歌浏览器默认的文字大小为16px（字体大小参考）
2.不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确的大小，不要默认大小
3.统一设置字体大小的话可以在body标签中操作(不对标题(h1-h6)生效，标题需要单独指定大小，操作同理)
--------------------------------------------------------
body{
font-size: 20px; (切记，不要漏了px)
}
3. font-weight 设置字体粗细
属性：font-weight 设置字体粗细
normal: 默认字体粗细为number=400
bold: 粗体，相当于number=700
bolder: 特粗体
lighter: 细体
number(自定义)：100|200|300|400|500|600|700|800|900
注意数字后面不要跟px，实际开发时提倡用 数字 表示
可以让标签/文字加粗，也可以让加粗标签（比如h和strong）不加粗
--------------------------------------------------
.bold {
color: red;
font-weight: 900;
}
1.4 font-style 设置字体的样式
属性：font-style 设置字体的样式（如斜体）
font-style属性值: normal(默认值，浏览器会显示标准的字体样式)或者italic(浏览器会显示斜体的字体样式，很少用)
常用操作：把倾斜的变成不倾斜，比如把em或i属性的倾斜改为不倾斜的
--------------------------------------------------
div {
font-style: italic;
}
em {
font-style: normal;
}
1.5 字体属性之复合属性
复合属性---》简写的方式/语法要求:
font: font-style font-weight font-size/line-height(行高，即为行间距) font-family;
1. 各个属性之间以空格隔开，并且严格按照顺序要求书写，不得颠倒！
2. 不需要设置的属性可以省略(默认值)，但 必须保留font-size 和 font-family属性，否则font复合属性将不起作用
------- 要求：想要span文字变倾斜 加粗 字号设置为36像素 微软雅黑 ----------
span {
不复合写法：
font-style: italic;
font-weight: 700;
font-size: 36px;
font-family: "Microsoft Yahei";
复合写法：
font: italic 700 36px "Microsoft Yahei";
}
1.5 CSS常用文本属性🍋🟩
介绍：可定义文本的外观，如文本的颜色、对齐文本、装饰文本（如:下划线）、文本缩进、行间距等
1. color 文本颜色
color的两种表示方式：
1.预定义的颜色值（如red,green,blue等等）
2.十六进制(开发中最常用)(如#FF6600) 3.RGB代码（如：rgb(255,0,0)）
2. text-align 文本对齐方式
text-align 设置元素内文本的 水平对齐 方式
语法：xx(标签) {text-align:center;}
有三个值：left（默认左对齐）center(居中对齐) right(右对齐)
h4 {
text-align: center;
color:red;
}
3. text-decoration 装饰文本
text-decoration 可以给文本添加下划线、删除线和上划线等
语法：xx(标签/类名) {text-decoration:属性;}
属性值：none(默认，啥都没有,常用) underline(下划线，链接a自带下划线(所以也可以用该属性去掉链接的下划线)，常用) overline(上划线，几乎不用) line-through(删除线)
h3 {
/* text-decoration: underline; */
/* text-decoration: line-through; */
text-decoration: overline;
}
a {
text-decoration: none;
}
4. text-indent 文本缩进
text-indent 用来指定文本的第一行的缩进，通常是将段落的首行缩进
语法：xx{text-indent: 多少px}
em是一个相对单位，就是当前元素(font-size)一个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小,适合用于段落缩进两个文字大小的空格
正值往右边缩进，负值往左边缩进（可能会导致一些文字消失）
p {
text-indent: 20px;
text-indent: 2em;
}
5. line-height 行间距
line-height 用于设置行间的距离（行高），控制文字行与行之间的距离
语法：xx{line-height:26px;}
注意：行间距包括=上间距+文本高度+下间距，而我们改变的是上下间距
p {
line-height: 26px;
}
1.6 Emmet语法（快速生成HTML结构语法）🚀
有些操作可以助力我们快速生成需要的代码
1. 快速生成HTML结构语法
1.生成标签直接输入标签名 按tab键即可，比如 div 然后tab键，就可以生成<div></div>
2.如果想要生成多个相同的标签，加上*即可，比如 div*3 就可以快速生成3个div
3.如果有父子级关系的标签，可以用> 比如 ul>li 就可以了
4.如果有兄弟关系的标签，用 + 比如 div+p
5.如果生成带有类名或者id名字的，直接用.demo(为类名) 或者 #two（为id名） 再tab键就可以了（默认生成的标签是div）
6.如果想要用6实现div以外的标签，可以在 . 前面加上对应的标签名
7.如果生成的div类名是有顺序的，可以用自增符号$
8.如果想要生成的标签内部写内容可以用 xx(想要的标签名){}*number(生成多少个) 表示(也是默认div标签)
<!-- div 再tab键 -->
<div></div>
<!-- div*3 -->
<div></div>
<div></div>
<div></div>
<!-- div>p 再tab键 -->
<div>
<p></p>
</div>
<!-- ul>li -->
<ul>
<li></li>
</ul>
<!-- div+span -->
<div></div>
<span></span>
<!-- .nav (默认生成的标签是div)-->
<div class="nav"></div>
<!-- .man -->
<div class="man"></div>
<!-- #boy -->
<div id="boy"></div>
<!-- p.one -->
<p class="one"></p>
<!-- span.hello -->
<span class="hello"></span>
<!-- span#nihao -->
<span id="nihao"></span>
<!-- h1.demo$*5 -->
<h1 class="demo1"></h1>
<h1 class="demo2"></h1>
<h1 class="demo3"></h1>
<h1 class="demo4"></h1>
<h1 class="demo5"></h1>
<!-- div{使用emmet语法快速生层文段}*1 -->
<div>使用emmet语法快速生层文段</div>
<!-- div{你好啊$号}*5 -->
<div>你好啊1号</div>
<div>你好啊2号</div>
<div>你好啊3号</div>
<div>你好啊4号</div>
<div>你好啊5号</div>
2. 快速生成CSS指定样式语法
CSS基本样式采取简写形式即可
1.比如 w200 按tab/enter键， 可以生成width:200px;
2.比如 lh26 按tab/enter键， 可以生成line-height:26px;
<style>
.one {
/* ta:center */
text-align: center;
/* w200 */
width: 200px;
/* lh26 */
line-height: 26;
/* ti:200 */
text-indent: 200px;
/* td:none */
text-decoration: none;
}
</style>
二、CSS元素显示模式🍂
2.1 什么是元素显示模式？
元素显示模式指的是HTML元素在页面中默认的表现形态，它决定了元素的排列方式、尺寸计算规则和嵌套关系。简单来说，就是元素"如何展示自己"以及"如何与其他元素相处"。
浏览器会为每个HTML标签预设默认的显示模式，例如：
-
<div>默认占据一整行（块级模式） -
<span>默认与其他元素并排显示（行内模式） -
<input>既可以并排显示又能设置宽高（行内块模式）
我们可以通过CSS的display属性修改元素的显示模式，这是实现灵活布局的关键技巧。
2.2 三大核心显示模式详解
1. 块级元素（Block Level Elements）
典型标签：<div>、<h1>-<h6>、<p>、<ul>、<ol>、<li>、<header>、<footer>等
核心特性：
- 独占一行：无论内容多少，都会单独占据一整行空间
-
尺寸可控：可以通过
width和height属性设置宽高 - 默认宽度：未设置时默认占满父容器的100%宽度
-
边距生效：
margin和padding的四个方向（上下左右）都能正常生效 - 容器特性：可以嵌套其他块级元素或行内元素
代码示例：
.change {
height: 200px;
background-color: aqua;
}
注意事项：
- 文字类块元素（如
<p>、<h1>-<h6>）不能嵌套其他块级元素，例如<p>中不能放<div> - 块元素虽然可以嵌套行内元素，但语义上应保持合理（如导航容器嵌套链接）
2. 行内元素（Inline Elements）
典型标签：<span>、<a>、<strong>、<em>、<b>、<i>、<del>、<ins>等
核心特性：
- 并肩排列：多个行内元素可以在同一行显示
-
尺寸受限：
width和height设置无效，尺寸由内容决定 -
边距限制：
margin和padding仅左右方向生效，上下方向不影响布局 - 嵌套限制：只能容纳文本或其他行内元素，不能嵌套块级元素
代码示例：
.span1 {
/* 宽高设置无效 */
width: 100px;
height: 100px;
/* 背景色等样式有效 */
background-color: hotpink;
}
注意事项：
- 链接
<a>不能嵌套其他链接 - 行内元素虽然不能设置宽高，但可以通过转换显示模式实现（见后文）
3. 行内块元素（Inline-Block Elements）
典型标签：<img>、<input>、<td>等
核心特性：
-
兼具两者优点：
- 可以和其他行内元素并排显示（行内元素特性）
- 可以设置
width、height（块级元素特性） -
margin和padding四个方向均有效（块级元素特性）
- 默认宽度：由内容决定（类似行内元素）
- 间隙特性：相邻行内块元素之间会有默认空白间隙
代码示例：
input {
width: 249px;
height: 50px;
}
2.3元素显示模式的转换语法
实际开发中，我们经常需要改变元素的默认显示模式以实现特定布局。CSS提供了三种主要转换方式：
1. 转为块级元素：display: block
适用场景：
- 需要让行内元素（如
<a>）独占一行 - 需要为行内元素设置宽高
- 需要让链接等可点击区域扩大
.a1 {
width: 150px;
height: 50px;
/* 转换为块级元素 */
display: block;
background-color: pink;
}
2. 转为行内元素：display: inline
适用场景：
- 需要让块级元素（如
<div>）并排显示 - 需要取消块级元素的默认独占一行特性
.change2 {
/* 转换为行内元素 */
display: inline;
}
3. 转为行内块元素：display: inline-block
适用场景：
- 需要元素并排显示且能设置宽高（如导航按钮、表单控件）
- 需要保持行内特性的同时拥有块级元素的尺寸控制能力
.change3 {
width: 300px;
height: 30px;
background-color: skyblue;
/* 转换为行内块元素 */
display: inline-block;
}
2.4 实战案例：小米侧边栏实现
以小米官网侧边栏为例，展示元素显示模式转换的实际应用：
实现思路：
- 将行内元素
<a>转换为块级元素，使其独占一行并可设置宽高 - 设置背景色和文字样式
- 使用
line-height实现文字垂直居中 - 添加hover效果实现交互反馈
.a-change {
color: white;
width: 230px;
height: 40px;
background-color: #535758;
/* 转换为块级元素 */
display: block;
text-decoration: none;
font-size: 14px;
text-indent: 2em;
/* 文字垂直居中（行高=盒子高度） */
line-height: 40px;
}
/* 鼠标悬停效果 */
a:hover {
background-color: #ff6700;
}
HTML结构：
<a href="#" class="a-change">手机 电话卡</a>
<a href="#" class="a-change">电视 盒子</a>
<a href="#" class="a-change">笔记本 平板</a>
<!-- 更多链接 -->
实现效果：
2.5综合代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素显示模式</title>
<!-- ------ 元素显示模式 ------ -->
<!-- 1.作用：网页标签非常多，在不同地方会用到不同的标签，了解他们的特点可以更好的布局我们的网页
2.元素显示模式就是 元素(标签) 以什么方式进行显示，比如<div>自己独占一行，而<span>一行可以放多个
3.HTML元素一般分为 块元素 和 行内元素 两种类型
-->
<style>
/* 111.块元素 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>，其中<div>标签是最典型的块元素
11.块元素特点：
1.独占一行
2.高度、宽度、外边距和内边距都可以控制
3.宽度默认是容器(父级宽度)的100%
4.是一个容器和盒子，里面可以放行内或块级元素
22.注意：
1.文字类元素不能使用块元素
2.<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
3.同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
例如： <p>
<div>这里有问题</div> (使用浏览器的审查器即可发现问题)
</p>
*/
.change {
/* width: 200px; */
height: 200px;
background-color: aqua;
}
/* 222.行内元素 常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
其中<span>是最典型的行内元素（内联元素）
11.行内元素的特点：
1.相邻行内元素在一行上，即一行可以显示多个
2.高、宽直接设置是无效的
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本后者其他行内元素
22.注意：
1.链接里面不能再放链接
2.特殊情况链接<a>里面可以放块级元素，但给<a>转换一下块级模式最安全
*/
.span1 {
/* 这里设置宽度和高度是无效的，但是设置其他的是可以的，比如下面设置背景颜色 */
width: 100px;
height: 100px;
background-color: hotpink;
}
/* 333.行内块元素 在行内元素中有几个特殊的标签 <img>、<input>、<td>，他们同时具有块元素和行内元素的特点（行内块元素）*/
/* 11.行内块元素的特点
1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙，一行可以显示多个（行内元素的特定）
2.默认宽度就是它本身内容的宽度（行内元素的特点）
3.高度、行高、外边距和内边距都可以控制（块级元素的特点）
*/
input {
width: 249px;
height: 50px;
}
/* --- 元素显示模式的转换 --- (特殊情况下，我们需要元素模式的转换 简单理解：一个模式的元素需要另一种模式的特性)*/
/*
1. 转换为块元素：display:block
2. 转换为行内元素：display:inline;
3. 转换为行内块元素：display:inline-block;
*/
/* 这里想要增加链接<a>的触发范围 */
.a1 {
width: 150px;
height: 50px;
/* 1.把行内元素<a>转换为块级元素 这样width和height的修改才能生效 */
display: block;
background-color: pink;
}
.change2 {
/* 2.把块级元素转换为行内元素，实现一行放多个块级元素 */
display: inline;
}
.change3 {
/* 把行内元素转换为行内块元素 */
width: 300px;
height: 30px;
background-color: skyblue;
/* 转换前，对于行内元素来说，宽度和高度的设置是无效的 */
display: inline-block;
}
/* 简洁版小米侧边栏案例 */
.a-change {
/* 设置字体颜色 */
color: white;
width: 230px;
height: 40px;
background-color: #535758;
/* 把行内元素转换为块元素 */
display: block;
/* 取消链接下划线 */
text-decoration: none;
font-size: 14px;
/* 空两个格子 */
text-indent: 2em;
/* ! 实现单行文字垂直居中 ! --> 解决方案：让文字的行高等于盒子的高度*/
/* 原理：行高由上空隙、文本本省的高度、下空隙组成
简单理解：行高的上空隙和下空隙把文字挤到中间了，
所以如果行高小于盒子高度，文字就会偏上；吐过行高大于盒子高度，则文字会偏下
*/
line-height: 40px;
}
a:hover {
background-color: #ff6700;
}
del{
display:block;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<!-- 块元素测验 -->
<div class="change">比较霸道，自己独占一行</div>
<!-- 不能这么用！！用浏览器检查会发现有问题 -->
<p>
<div class="change">这里有问题</div>
</p>
<!-- 行内元素测验 -->
<span class="span1">pink老师你怎么穿着品如的衣服呢</span> <strong>品如的衣服</strong>
<span class="span1">pink老师</span> <strong>品如的衣服</strong>
<!-- 行内块元素测验 -->
<input type="text" />
<input type="text" />
<!-- 元素模式的转换测验 -->
<!-- 这里想要增加链接<a>的触发范围 -->
<a href="picture/img1.jpg" class="a1">夏至未至</a>
<a href="picture/img1.jpg" class="a1">夏至未至</a>
<!-- 使块级元素在一行显示多个 -->
<div class="change2">我是块级元素，将要通过元素转换模式(改为行内元素)</div>
<div class="change2">我是块级元素 </div>
<!-- 想行内元素的宽度和高度 -->
<span class="change3">把行内元素转换为行内块元素</span>
<span class="change3">把行内元素转换为行内块元素</span>
<br />
<!-- 简洁版小米侧边栏案例 主要思路
1.链接<a>要实现竖着显示(行内元素转换为块级元素，这样链接就可以独占一行并且有高度和宽度)
2.链接有背景颜色，鼠标经过<a>时链接变色
-->
<a href="https://re.jd.***/search?keyword=%E7%94%B5%E8%AF%9D%E5%8D%A1&enc=utf-8" target="_blank" class="a-change">手机
电话卡</a>
<a href="picture/img1.jpg" class="a-change">电视 盒子</a>
<a href="#" class="a-change" target="_blank">笔记本呢 平板</a>
<a href="#" class="a-change">出行 穿戴</a>
<a href="#" class="a-change">智能 路由器</a>
<a href="#" class="a-change">健康儿童</a>
<a href="#" class="a-change">耳机 音响</a>
<del>你好啊</del>林七夜
</body>
</html>
显示效果：
三、CSS选择器：全类型解析（15+种）🐦🔥
注意：CSS的部分统一放在<head>的<style>中，实现骨架和渲染的分离【内联样式】
选择器是定位元素的核心工具，按功能分为6大类，覆盖所有定位场景。
3.1 基础/通用选择器（5种）
| 选择器类型 | 语法 | 功能 | 代码示例 | 匹配元素 |
|---|---|---|---|---|
| 元素(标签)选择器 | 标签名 | 匹配所有该标签元素 | h2 { font-size: 24px; } |
所有<h2>标签 |
| 类选择器 | .类名 |
匹配含该类名的元素 | .btn { padding: 8px 16px; } |
所有类名="btn"的元素 |
| ID选择器 | #ID名 |
匹配唯一ID元素 | #header { height: 80px; } |
唯一id="header"的元素 |
| 通配符选择器 | * |
匹配所有元素 | * { margin: 0; padding: 0; } |
所有HTML元素 |
| 属性选择器 | [属性=值] |
匹配含指定属性/值的元素 | input[type="text"] { border: 1px solid #ddd; } |
所有type="text"的<input>
|
1.元素选择器：
----------- CSS标签选择器 -----------
语法：标签名 {
属性1: 属性值;
属性2: 属性值;
.......
}
优点：能快速为页面中同类型的标签统一设置样式
缺点：不能差异刷设计样式，只能选择对应的全部标签
------------------------------------------
p {
color: blue;
}
div {
color: rgb(147, 147, 103);
}
2.类选择器
---------- CSS类选择器(开发最常用) ------------
语法： .类名{ （温馨提示：不要把类名前面的.漏了）
属性1:属性值1;
属性2:属性值2;
.........
}
1.类标签需要使用class属性定义
2.长名称或者词组可以使用中横线来为选择器命名
3.不要使用纯数字、中文等命名，尽量使用英文字母来表示
4.命名尽量有意义
例如: <div class="red"> 变红色 </div>
-------------------------------------------------
.green1 {
color: green;
}
.star-sing {
color: chocolate;
}
.size-box {
/* 设置box里的字体的颜色 */
color: white;
/* px为像素(类似大小的意思) */
width: 100px;
height: 100px;
/* font-size 为字体的像素大小 font(字体)*/
font-size: 20px;
}
.red-box {
/* 背景颜色 */
background-color: red;
}
.green-box {
background-color: green;
}
3.id选择器
----------- CSS id选择器 --------
id选择器可以为标有特定id的元素指定特定的样式 以#id（自己命名的id）来操作id选择器
id选择器和类选择器的区别：
1.id选择器只能调用一次（就像唯一身份，不允许多个使用）
2.类选择器就好比人的名字，一个人可以有多个名字同一个名字也可以被多个人使用
3.列选择器在修改样式中用的最多，而id选择器一般用于页面唯一性的元素上，经常和javaScript搭配使用
------------------------------------------------------------------
#pink {
color: pink;
}
4.通配符选择器
----------- CSS通配符选择器 ----------
在CSS中，通配符选择器使用 "*" 来定义，它表示选取页面中所有的元素（未被其他选择器改变的）、标签
缺点：选择的太多，有部分不需要
1.通配选择器不需要调用，自动就给所有元素使用样式
2.特殊情况才使用，比如用来清除所有元素标签的内外边距
语法： *{
属性1:属性值1;
.........
}
-----------------------------------------
这个通配符选择器把所有没有被其他选择器操作过的 html body div p li 等等的标签都改为了darkmagenta色
* {
color: darkmagenta;
}
综合应用代码及显示效果
通用选择器代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>体验CSS语法规范</title>
<!-- CSS引入方式 -->
<!-- 111.内部样式表(内嵌样式表) 是写到html页面内部，是将所有CSS代码抽取出来，单独放到一个<style>标签中 我下面使用的正是内部样式表
1.此种方式方便控制当前整个页面中的元素样式设置
2.代码结构清晰（head部分写CSS和body部分写内容），但并没有实现结构和样式完全分离（仍然在HTML内部）
-->
<!-- 222.行内样式表（内联样式表），是在元素标签颞部的style属性中设定CSS样式，使用与修改简单样式
1.可以控制当前标签的设置样式
2.由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，才考虑使用
-->
<!-- 333.外部样式表 实际开发都是外部样式表(吐血推荐)，适用于样式比较多的情况，可以引入控制多个页面
核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用
1.创建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中
2.在HTML页面中，使用<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径">
-->
<!-- 外部样式表引用测试，对应的测试部分写在body的最后一行 -->
<link rel="stylesheet" href="style_try.css" />
<style>
/* CSS的部分统一放在<head>的<style>中，实现骨架和渲染的分离*/
/* CSS四种通用选择器篇 */
/*
----------- CSS标签选择器 -------
语法：标签名 {
属性1: 属性值;
属性2: 属性值;
.......
}
优点：能快速为页面中同类型的标签统一设置样式
缺点：不能差异刷设计样式，只能选择对应的全部标签
*/
p {
color: blue;
}
div {
color: rgb(147, 147, 103);
}
/*
---------- CSS类选择器(开发最常用) -------
语法： .类名{ （温馨提示：不要把class前面的.漏了）
属性1:属性值1;
属性2:属性值2;
.........
}
1.类标签需要使用class属性定义
2.长名称或者词组可以使用中横线来为选择器命名
3.不要使用纯数字、中文等命名，尽量使用英文字母来表示
4.命名尽量有意义
例如: <div class="red"> 变红色 </div>
*/
.green1 {
color: green;
}
.star-sing {
color: chocolate;
}
.size-box {
/* 设置box里的字体的颜色 */
color: white;
/* px为像素(类似大小的意思) */
width: 100px;
height: 100px;
/* font-size 为字体的像素大小 font(字体)*/
font-size: 20px;
}
.red-box {
/* 背景颜色 */
background-color: red;
}
.green-box {
background-color: green;
}
/* ----------- CSS id选择器 --------*/
/* id选择器可以为标有特定id的元素指定特定的样式 以#id（自己命名的id）来操作id选择器*/
/*
id选择器和类选择器的区别：
1.id选择器只能调用一次（就像唯一身份，不允许多个使用）
2.类选择器就好比人的名字，一个人可以有多个名字同一个名字也可以被多个人使用
3.列选择器在修改样式中用的最多，而id选择器一般用于页面唯一性的元素上，经常和javaScript搭配使用
*/
#pink {
color: pink;
}
/*
----------- CSS通配符选择器 ----------
在CSS中，通配符选择器使用 "*" 来定义，它表示选取页面中所有的元素（未被其他选择器改变的）、标签
缺点：选择的太多，有部分不需要
1.通配选择器不需要调用，自动就给所有元素使用样式
2.特殊情况才使用，比如用来清除所有元素标签的内外边距
语法： *{
属性1:属性值1;
.........
}
*/
* {
color: darkmagenta;
}
/* * 这个通配符选择器把所有没有被其他选择器操作过的 html body div p li 等等的标签都改为了darkmagenta色*/
/* CSS font-family设置字体*/
/*1.各种字体之间必须使用英文逗号隔开
2.尽量使用系统默认自带字体，保证在任何用户的浏览器都能正确显示
3.统一设置字体的话可以用 因为内容一般都是在body中
body{
font-family:"Microsoft Yahei（微软雅黑，中英文都可以用）",arial(等等);
}
*/
p {
/* 写了多种字体的话，系统会依次往后寻找，一旦找到系统存在该字体，就应用，后面的就不再检索了 */
font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
}
/* CSS文字属性篇 */
/* CSS font-size 设置字体的像素大小 */
/*
1.谷歌浏览器默认的文字大小为16px（字体大小参考）
2.不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确的大小，不要默认大小
3.统一设置字体大小的话可以在body标签中操作(不对标题(h1-h6)生效，标题需要单独指定大小，操作同理)
body{
font-size: 20px; (切记，不要漏了px)
}
*/
div {
font-size: 30px;
}
/* CSS font-weight 设置字体粗细 */
/* normal: 默认字体粗细为number=400
bold: 粗体，相当于number=700
bolder: 特粗体
lighter: 细体
number(自定义)：100|200|300|400|500|600|700|800|900
注意数字后面不要跟px，实际开发时提倡用 数字 表示
可以让标签/文字加粗，也可以让加粗标签（比如h和strong）不加粗
*/
.bold {
color: red;
font-weight: 900;
}
/* CSS font-style 设置字体的样式（如斜体） */
/* font-style: normal(默认值，浏览器会显示标准的字体样式)或者italic(浏览器会显示斜体的字体样式，很少用)
常用：把倾斜的变成不倾斜，比如把em或i属性的倾斜改为不倾斜的
*/
div {
font-style: italic;
}
em {
font-style: normal;
}
/* CSS 字体属性之复合属性 */
/* 想要span文字变倾斜 加粗 字号设置为36像素 微软雅黑 */
span {
/* font-style: italic;
font-weight: 700;
font-size: 36px;
font-family: "Microsoft Yahei"; */
/* 复合属性---》简写的方式/语法要求:
font: font-style font-weight font-size/line-height(行高，即为行间距) font-family;
1. 各个属性之间以空格隔开，并且严格按照顺序要求书写，不得颠倒！
2. 不需要设置的属性可以省略(默认值)，但 必须保留font-size 和 font-family属性，否则font复合属性将不起作用
*/
font: italic 700 36px "Microsoft Yahei";
}
/* CSS文本属性篇 */
/* 可定义文本的外观，如文本的颜色、对齐文本、装饰文本（如:下划线）、文本缩进、行间距等 */
/* 11文本颜色--》color的表示:1.预定义的颜色值（如red,green,blue等等）2.十六进制(开发中最常用)(如#FF6600) 3.RGB代码（如：rgb(255,0,0)）
22对齐文本--》text-align 设置元素内文本的 水平对齐 方式 语法：xx(标签) {text-align:center;}
有三个值：left（默认左对齐）center(居中对齐) right(右对齐)
*/
h4 {
/* 本质是让h4盒子中的文字水平居中对齐 */
text-align: center;
}
/* 33装饰文本--》text-decoration 可以给文本添加下划线、删除线和上划线等 语法：xx(标签/类名) {text-decoration:属性;}
属性值：none(默认，啥都没有,常用) underline(下划线，链接a自带下划线(所以也可以用该属性去掉链接的下划线)，常用) overline(上划线，几乎不用) line-through(删除线)
*/
h3 {
/* text-decoration: underline; */
/* text-decoration: line-through; */
text-decoration: overline;
}
a {
text-decoration: none;
}
/* 44文本缩进--》text-indent 用来指定文本的第一行的缩进，通常是将段落的首行缩进 语法：xx{text-indent: 10px}*/
/* em是一个相对单位，就是当前元素(font-size)一个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小,适合用于段落缩进两个文字大小的空格*/
p {
/* 正值往右边缩进，负值往左边缩进（可能会导致一些文字消失） */
/* text-indent: 20px; */
text-indent: 2em;
}
/* 55.行间距--》line-height 用于设置行间的距离（行高），控制文字行与行之间的距离
语法：xx{line-height:26px;} 行间距包括=上间距+文本高度+下间距 我们改变的是上下间距
*/
p {
line-height: 26px;
}
</style>
</head>
<body>
<h4>标签选择器试验</h4>
<div>供标签选择器做试验</div>
<p>有点意思</p>
<p>男生男士男士男阿斯顿发发阿打发斯蒂芬啊搭嘎上东国际阿斯顿法师打发洒点水
啊时间生阿斯顿法师打发是的法师打发阿斯顿发伺机待发阿斯顿法师打发手动阀
手打手动阀手动阀神鼎飞丹砂刚发送阿斯蒂芬哈阿加莎两地分居奥阿斯顿发山东法律
手段飞机阿萨达拉法基就达噶送达噶送达噶手打干撒搭嘎手打
</p>
<p>男生南山大道</p>
<p>男生阿斯顿发生大法师</p>
<!-- 行内样式表测试 -->
<p style="color:pink;">给我一个粉红色的回忆，行内样式表测试</p>
<div>女生</div>
<div>女生</div>
<em>这原本是一个斜体的文段(em属性),将会被font-style改为不倾斜的normal字体</em>
<h4>类选择器试验</h4>
<ul>
<li class="green1">冰雨</li>
<li>来生缘(未被其他选择器操作，将被通配选择器设置的颜色染色)</li>
<li class="green1">李香兰</li>
<li class="star-sing">江南style</li>
</ul>
<!-- 类选择器-多类名 可以定义多个类标签，会同时生效 也验证了div其实就是一个盒子、-->
<div class="red-box size-box">红色</div>
<div class="green-box size-box">绿色</div>
<div class="red-box size-box">红色</div>
<h4>id选择器试验</h4>
<div id="pink">迈克尔-杰克逊</div>
<div id="pink">柯洁</div>
<div class="bold">这是个秘密</div>
<span>字体复合属性测试</span>
<h3>text-decoration测试</h3>
<a href="#">测试看text-decoration能否取消链接的下划线</a>
<br />
<div class="styleTry">----唯一的外部样式表引入测试-----</div>
</body>
</html>
运行效果：
3.2 复合选择器（5种）
-
后代选择器：
选择器1 选择器2（空格分隔），匹配选择器1包含的所有选择器2元素（无论层级）：后代选择器 又称为 包含选择器 ，可以选择父元素里面的子元素。其写法就是把外层标签写在前面， 内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代 1. 语法： 元素1 元素2 (元素3....){} ，所以最终作用对象可以使儿子/孙子/重孙子..... 2. 注意元素1得是元素2的父级（而元素2得是元素3的父级），最终选择的是元素2（元素3） ------------------------------------------------------------- ol的所有li后代都会变为pink色 ol li { color: pink; } ol li a { color: red; } /* ---- 这个应用重要 ----- */ .change li { color: green; } -
子选择器：
选择器1 > 选择器2（>分隔），仅匹配直接子元素：子元素选择器（子选择器）只能选择作为某元素的最近一级元素，简单理解就是选亲儿子元素 1. 语法：元素1>元素2 {样式声明} 2. 元素2必须是亲儿子才会生效，其孙子，重孙子之类的都不归他管（亲儿子选择器） 3. 元素1是父级，元素2是子级，最终选择的是元素2 -------------------------------------------------- .nav>a { color: yellow; } -
相邻兄弟选择器：
选择器1 + 选择器2（+分隔），匹配选择器1紧邻的第一个选择器2元素：选中紧跟在某元素后面的第一个同层级兄弟元素（两者有共同的父元素，且位置相邻） ---------------------------------------------------------------- <head> <style> div + p { color:red; } </style> </head> <body> <div>参考元素</div> <p>相邻的第一个兄弟（会被选中）</p> <p>不相邻的兄弟（不会被选中）</p> </body> -
通用兄弟选择器：
选择器1 ~ 选择器2（~分隔），匹配选择器1后面所有同层级选择器2元素：选中某元素后面所有同层级的兄弟元素（无论是否相邻，只要在后面且平级） --------------------------------------------------------- <head> <style> div ~ p { color:red; } </style> </head> <body> <div>参考元素</div> <p>相邻的第一个兄弟（会被选中）</p> <p>不相邻的兄弟（会被选中）</p> </body> -
并集选择器：
选择器1,选择器2(,选择器3....)(,分隔) ，选择多组标签，同时为他们定义相同的样式，通常用于集体声明
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明
1. 语法：元素1,元素2(,元素3...){样式声明} ！任何形式的选择器都可以作为并集选择器的一部分 ！
2. 元素之间用,号隔开 逗号可以理解为和的意思
3. 并集选择器 喜欢 竖着写 元素1 元素2 元素3...
4. 最后一个元素不需要加逗号
-------------------------------------------------
div,
p,
.pig li {
color: blue;
}
3.3 伪类选择器（10种）
按功能分为状态伪类、结构伪类、否定伪类等，语法为选择器:伪类：
-
状态伪类：
-
:link：把所有未被访问过的链接选出来 （如a:link { color: red; }） -
:hover：鼠标悬浮（如.btn:hover { background: #0056b3; }） -
:active：元素被点击时（如.btn:active { transform: scale(0.98); }） -
:focus：元素获得焦点（如input:focus { border-color: #007bff; }） -
:visited：链接被访问后（如a:visited { color: #6610f2; }）
-
-
结构伪类：
-
:first-child：父元素第一个子元素（如ul li:first-child { font-weight: bold; }） -
:last-child：父元素最后一个子元素 -
:nth-child(n)：父元素第n个子元素（n为数字/公式，如2n=偶数位，2n+1=奇数位） -
:empty：匹配空元素（如div:empty { display: none; }）
-
-
否定伪类：
:not(选择器)，匹配不满足选择器的元素（如div:not(.hidden) { display: block; }）
1. 特点：用冒号（:）表示，比如 :hover 、:fist-child (区别于类选择器--》用点(.)表示)
2.注意事项：
1.为了确保生效，请按照LVHA的顺序声明：:link - :visited - :hover - :active
2.记忆法：love hate 或 lv 包包 hao
3.因为a链接在浏览器中具有默认样式，所以我们在实际工作中都需要给链接单独指定样式
(比如 body{color:red} ,这样是无法改变链接的样式的，需要单独在a{}中指定)
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器</title>
<link rel="stylesheet" href="style_try.css" />
<style>
ol li {
color: pink;
}
ol li a {
color: red;
}
.change li {
color: green;
}
div a {
color: yellow;
}
.nav>a {
color: yellow;
}
div,
p,
.pig li {
color: blue;
}
a:link {
color: red;
}
a:visited {
color: blue;
text-decoration-color: rgb(34, 235, 8);
}
a:hover {
color: skyblue;
}
a:active {
color: green;
}
input:focus {
background-color: pink;
}
</style>
</head>
<body>
<!-- 后代选择器测试 -->
<ol>
在ol中写写文字（不可，此处用于验证后代选择器仅仅是作用于li，而不作用于ol）
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li><a href="#">我是孙子</a></li>
</ol>
<!-- 快速简写emmet语法的使用： ul>li{我是ul的孩子}*3 -->
<ul>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
</ul>
<br />
<!-- 使用后代选择器做到改变第二个ul里面的li而不改变前面的ul的li -->
<ul class="change">
<li>我是ul的孩子2</li>
<li>我是ul的孩子2</li>
<li>我是ul的孩子2</li>
</ul>
<!-- 这个用来跟后面span标签的子选择器做比较（后代选择器：div的所有a后代都会变黄色） -->
<div class="nav">
<a href="">我是儿子</a>
<p><a href="#">我是孙子</a></p>
</div>
<br />
<!-- 子选择器测试 -->
<!-- 这个用来跟前面div标签的后代选择器做比较（子选择器：只有span的亲儿子a才会变黄色） -->
<span class="nav">
<a href="https://www.baidu.***/">我是儿子</a>
<p><a href="#">我是孙子</a></p>
</span>
<br />
<!-- 并集选择器测试 -->
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
<!-- 伪类选择器 -->
<a href="#">小猪佩奇测试伪类选择器</a>
<a href="https://www.baidu.***/">被访问过了</a>
<a href="www.123.***">未被访问过的</a>
<br />
<!-- focus伪类选择器测试 -->
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
显示效果：
四、CSS背景样式全解析🥝
在网页设计中，背景样式是塑造页面视觉效果的关键元素之一。通过CSS的背景属性，我们可以为页面添加丰富的视觉效果，包括背景颜色、背景图片、平铺方式、定位以及固定等。
4.1 背景颜色 (background-color)
背景颜色是最基础的背景属性，用于设置元素的背景色。
div {
width: 200px;
height: 200px;
/* 默认值为transparent（透明） */
/* background-color: transparent; */
background-color: pink;
}
- 默认值：
transparent（透明） - 可接受的值：颜色名称、十六进制值、RGB值、RGBA值
- 应用场景：为元素提供基础底色，或作为背景图片的补充
4.2 背景图片 (background-image)
使用背景图片可以为元素添加更丰富的视觉效果。
#image-test {
width: 200px;
height: 340px;
background-image: url(picture/Q.png);
}
- 语法：
background-image: none | url(图片地址) - 默认值：none（无背景图）
- 实际应用：常用于logo、装饰性小图片或超大背景图，便于精确控制位置
4.3 背景平铺 (background-repeat)
控制背景图片是否以及如何在元素中平铺。
#image-test {
background-image: url(picture/Q.png);
/* 可选值：repeat | no-repeat | repeat-x | repeat-y */
background-repeat: no-repeat;
}
-
repeat：默认值，在水平和垂直方向都平铺 -
no-repeat：不平铺，只显示一次 -
repeat-x：仅在水平方向平铺 -
repeat-y：仅在垂直方向平铺
注意：背景图片会覆盖背景颜色
4.4 背景图片位置 (background-position)
精确控制背景图片在元素中的位置。
#image-test {
background-image: url(picture/Q.png);
background-repeat: no-repeat;
/* 语法：background-position: x y; */
background-position: right center;
}
位置参数可以是：
- 方位名词：
left、center、right（水平方向）；top、center、bottom（垂直方向） - 精确单位：像素(px)、百分比(%)等
- 混合单位：方位名词与精确单位结合
使用规则：
- 两个方位名词：顺序无关，如
left top与top left效果相同 - 一个方位名词：另一个方向默认居中
- 精确单位：第一个值是x坐标，第二个值是y坐标
- 混合单位：第一个值是x坐标，第二个值是y坐标
示例应用：为文字添加小图标
h3 {
width: 118px;
height: 40px;
font-size: 14px;
text-indent: 1.2em;
line-height: 40px;
font-weight: 400;
background-image: url(picture/down.jpeg);
background-repeat: no-repeat;
background-position: left center;
}
4.5 背景图像固定 (background-attachment)
控制背景图片是否随页面滚动而移动，常用于制作视差滚动效果。
body {
background-image: url(https://game.gtimg.***/images/yxzj/web202311/bg-5ada2842.png);
background-repeat: no-repeat;
background-position: center 0px;
background-attachment: fixed; /* 背景图像固定 */
}
-
scroll：默认值，背景图像随内容滚动 -
fixed：背景图像固定不动
4.6 背景属性复合写法
为了简化代码，CSS允许将多个背景属性合并为一个简写属性。
body {
/* 复合写法顺序：颜色 图片 平铺 滚动 位置 */
background: black url(https://game.gtimg.***/images/yxzj/web202311/bg-5ada2842.png) no-repeat fixed center 0px;
}
复合写法没有严格的顺序要求，但建议遵循约定顺序：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
4.7 背景色半透明 (rgba)
通过RGBA颜色值可以实现背景色的半透明效果，而不影响元素内的文本内容。
div {
width: 300px;
height: 300px;
/* 最后一个参数是透明度，0~1之间 | 0.3 也可以写成 .3*/
background-color: rgba(245, 5, 5, 0.3);
}
- 语法：
background: rgba(red, green, blue, alpha); - alpha参数：0表示完全透明，1表示完全不透明（0.3 可以写成 .3，其他同理）
- 特点：仅使背景色半透明，内容不受影响
综合代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS背景</title>
<!-- 通过CSS背景属性，可以给页面添加背景样式 -->
<!-- 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等 -->
<style>
/* 111.--------- 背景颜色 --------
语法：background-color:颜色值
一般情况下,背景颜色默认值是transparent(透明),我们也可以手动指定背景颜色为透明色
*/
div {
width: 200px;
height: 200px;
/* transparent(透明的，清澈的) */
/* background-color: transparent; */
background-color: pink;
}
/* 222.--------- 背景图片 ------------
语法：background-image:none | url(url)
参数：none（无背景图，默认） url(使用绝对或相对地址指定背景图像)
background-image属性描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片或者
是超大的背景图片，优点是非常便于控制位置(因为有background-position控制插入位置)（精灵图也是一种运用场景）
*/
/* 333.-------- 背景平铺 ------------
如果需要在HTML页面上对背景图片进行平铺，可以使用background-repeat属性
语法：background-repeat: repeat | no-repeat | repeat-x | repeat-y
1. repeat 背景图像在纵向和横向上平铺(默认的)
2. no-repeat 背景图像不平铺(不重复，只会显示一次)
3. repeat-x 背景图像在横向上平铺
4. repeat-y 背景图像在纵向平铺
注意：背景图片会覆盖掉背景颜色
*/
#image-test {
width: 200px;
height: 340px;
background-image: url(picture/Q.png);
/* background-repeat: repeat; */
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
background-repeat: no-repeat;
/* background-position: center(y) right(x); 与下面等价,跟顺序没有关系 */
/* background-position: right(x) center(y); */
/* 此时，第一个参数是 x轴，水平(x)一定是靠右侧对齐;第二个参数省略 y 轴，则竖直方向是居中显示的*/
/* background-position: right; */
/* 此时，第一个参数一定是 y轴,顶部对齐;第二个参数省略 x ,则水平方向是居中显示的 */
background-position: top;
}
/* 444.--------- 背景图片位置 ---------
利用background-position属性可以改变图片在背景中的位置
语法：background-position: x y;
参数代表的意思是: x坐标 和 y坐标。 可以使用方位名词或精确单位
参数值：
1.length --》百分数 | 由浮点数字和单位标识符组成的长度值
2.position --》top | center | bottom (这三个是竖直方向(y)上)| left | center | right (这三个是水平方向(x)上)方位名词
注意事项：
11.参数是方位名词：
1.如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top(左上) 和 top left（上左） 效果一样
2.如果只指定了一个方位名词(如果第一个参数是x，则第二个为y,反之同理)，另一个值省略，则第二个值默认居中对齐
22.参数是精确单位：
1.如果参数值是精确坐标，那么第一个肯定是x坐标，第二个肯定是y坐标
2.如果只指定一个竖直，那么该数值一定是x坐标，另外一个默认垂直居中平
33.参数是混合单位：
1.如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
*/
/* 参数是方位名词 */
h3 {
width: 118px;
height: 40px;
/* background-color: skyblue; */
/* 字体大小修正 */
font-size: 14px;
/* 文字开头间隔 */
text-indent: 1.2em;
/* 实现文字水平居中 */
line-height: 40px;
/* 取消文字加粗 */
font-weight: 400;
background-image: url(picture/down.jpeg);
background-repeat: no-repeat;
/* ----方位名词----*/
background-position: left center;
}
/* 超大王者荣耀背景图片(注意下面也有一个用于测试混合单位的body) */
/* body {
background-image: url(picture/nonyao.webp);
background-repeat: no-repeat;
方位名词(取消body注释后，把这个注释掉)
background-position: center top;
} */
/* 参数是精确单位 */
#image-test2 {
width: 200px;
height: 340px;
background-image: url(picture/Q.png);
background-repeat: no-repeat;
/* 50px 20px --> x轴一定是50px y轴一定是20px */
/* background-position: 50px 20px; */
/* 80px 一定是x坐标 ，另外一个默认垂直居中 */
background-position: 80px;
}
/* 参数是混合单位 */
/* 超大王者荣耀背景图片 */
/* body {
background-image: url(https://game.gtimg.***/images/yxzj/web202311/bg-5ada2842.png);
background-repeat: no-repeat;
混合单位 第一个单位一定是x,第二个单位一定是y
background-position: center 0px;
} */
/* 555.------- 背景图像固定(背景附着) ------
background-attachment属性设置图像是否固定或者随着页面的其余部分滚动(后期可以制作视差滚动效果)
语法：background-attachment: scroll | fixed
参数：scroll --》背景图像是随对象内容滚动(默认，正常效果)
fixed --》背景图像固定
*/
/* 666.------- 背景属性复合写法 --------
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
*/
body {
/* background-image: url(https://game.gtimg.***/images/yxzj/web202311/bg-5ada2842.png);
background-repeat: no-repeat;
background-position: center 0px; */
color: white;
/* 测试背景图像固定 */
/* background-attachment: fixed; */
background-color: black;
/* 测试背景属性复合写法 */
background: black url(https://game.gtimg.***/images/yxzj/web202311/bg-5ada2842.png) no-repeat fixed center 0px;
}
/* 777.--------- 背景色半透明 ---------
语法：background: rgba(0,0,0,0.3); (数值仅仅为举例子)
1.最后一个参数是alpha(透明度),取值范围在0~1之间(0为完全透明，1为完全不透明(跟原来一样),从1->0，越来越透明)
2.背景半透明指的是盒子背景色半透明，盒子里面的文本内容不受影响
3.后面必须是4个值
*/
div {
width: 300px;
height: 300px;
/* background-color: black; */
/* 0.3 也可以写成 .3 */
background-color: rgba(245, 5, 5, .3);
}
</style>
</head>
<body>
<!-- <div></div>
<br />
<div id="image-test"></div>
<br />
<h3>成长守护平台</h3>
<div id="image-test2"></div> -->
<!-- 测试背景固定 -->
<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>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<!-- 测试背景透明化 -->
<div>看看文字是否会被透明化</div>
</body>
</html>
显示效果：
五、CSS盒子模型🥝
在网页布局的世界里，CSS盒子模型是一切布局的基础。无论是简单的文本段落还是复杂的页面组件，都可以被看作是一个个矩形的"盒子"。掌握盒子模型的工作原理，是成为前端开发者的必备技能。本文将从基础概念出发，通过实例代码详细解析盒子模型的核心要素及实战技巧。
5.1 什么是CSS盒子模型？
CSS盒子模型是一种将HTML元素视为矩形盒子的布局模型，每个盒子由四个部分组成：
- 内容区（content）：元素实际内容所在的区域
- 内边距（padding）：内容区与边框之间的空间
- 边框（border）：围绕内边距和内容区的线条
- 外边距（margin）：盒子与其他盒子之间的空间
这四个部分共同决定了元素在页面中的大小和位置，是页面布局的三大核心之一（另外两个是浮动和定位）。
5.2 边框（border）🍋🟩
边框是盒子最外层的可见边界，由三个属性共同定义：宽度、样式和颜色。
边框的基本属性
#div1 {
width: 300px;
height: 200px;
border-width: 10px; /* 边框宽度 */
border-style: solid; /* 边框样式 */
border-color: pink; /* 边框颜色 */
}
也可以使用简写形式，顺序可以任意调整：
#div1 {
border: 10px solid pink; /* 宽度 样式 颜色 */
}
边框样式是必须指定的属性，常用值包括：
-
solid：实线边框 -
dashed：虚线边框 -
dotted：点线边框
单边边框设置
我们可以单独设置盒子四个方向的边框，利用CSS的层叠性可以简化代码：
#div2 {
width: 200px;
height: 200px;
border: 5px solid blue; /* 先设置四边为蓝色 */
border-top: 5px solid red; /* 再单独设置上边框为红色 */
}
边框对盒子大小的影响
重要提示：边框会增加盒子的实际大小。例如，一个宽度为100px的盒子，如果设置了5px的边框，其实际宽度将变为110px（100 + 5×2）。
解决方案：
- 测量盒子时不包含边框
- 如果测量包含边框，需从width/height中减去边框宽度的两倍
表格细线边框
表格边框默认会有重叠问题，使用border-collapse: collapse可以合并相邻边框：
table, td, th {
border: 1px solid pink;
border-collapse: collapse; /* 合并相邻边框 */
}
5.3 内边距（padding）：内容与边框的缓冲带🍋🟩
内边距用于控制内容区与边框之间的距离，让内容不会紧贴边框。
内边距的基本用法
内边距有四个方向的属性：
-
padding-top：上内边距 -
padding-right：右内边距 -
padding-bottom：下内边距 -
padding-left：左内边距
也可以使用简写形式，规则如下：
.div3 {
/* 1个值：上下左右都为5px */
/* padding: 5px; */
/* 2个值：上下5px，左右10px */
/* padding: 5px 10px; */
/* 3个值：上5px，左右10px，下20px */
/* padding: 5px 10px 20px; */
/* 4个值：上5px，右10px，下20px，左30px（顺时针方向） */
padding: 5px 10px 20px 30px;
}
内边距对盒子大小的影响
与边框类似，指定了宽高的盒子设置内边距会使盒子变大。例如，一个200×200px的盒子，设置10px内边距后，实际大小会变为220×220px。
解决方案：如果需要保持盒子总大小不变，应从width/height中减去内边距的总和。
内边距的实用技巧
当导航栏中每个菜单项的字数不同时，使用内边距代替固定宽度可以实现更灵活的布局：
#nav {
height: 41px;
line-height: 41px; /* 垂直居中 */
background-color: #fcfcfc;
}
#nav a {
display: inline-block;
padding: 0 20px; /* 左右内边距撑开盒子 */
text-decoration: none;
}
这种方式能保证每个菜单项的内容与边缘距离一致，且能自适应内容长度。
内边距不影响盒子大小的特殊情况
如果盒子没有指定width/height属性，设置内边距不会撑开盒子大小：
.div5 {
width: 300px;
height: 100px;
background-color: pink;
}
.div5 p {
padding: 50px; /* p元素没有指定宽高，不会超出父元素 */
}
5.4 外边距（margin）：盒子之间的距离🍋🟩
外边距控制盒子与其他盒子之间的距离，其语法与内边距类似。
外边距的基本用法
外边距同样有四个方向的属性：
-
margin-top：上外边距 -
margin-right：右外边距 -
margin-bottom：下外边距 -
margin-left：左外边距
简写规则与padding完全一致，这里不再赘述。
外边距的典型应用：水平居中
外边距最常用的技巧之一是 实现块级元素的水平居中，需要满足两个条件：
- 盒子必须指定宽度（width）
- 左右外边距都设置为auto
.header {
width: 500px;
height: 200px;
background-color: skyblue;
margin: 100px auto; /* 上下100px，左右自动居中 */
}
对于行内元素或行内块元素，水平居中需要给其父元素设置text-align: center。
外边距合并问题
使用margin定义垂直方向的外边距时，可能会出现外边距合并的现象 --> 当父元素没有设置 “阻隔”（如边框、内边距、overflow 等）时，父元素的margin-top会与子元素的margin-top合并，表现为：
- 父元素会 “吸收” 子元素的上外边距，两者的外边距合并为一个（取较大值）。
- 视觉上，子元素的上外边距 “转移” 到了父元素身上，导致父元素跟着子元素一起向下移动（看起来像 “塌陷”）。
例如：
#father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
}
#son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px; /* 会导致父元素一起下移 */
}
显示效果【本来子元素按照margin-top:100px 应该从父元素的上顶部分开，但实际并没有，而是父元素跟者子元素一起下来了(塌陷)】：
解决方法：
- 为父元素定义上边框（可设为透明）
border: 1px solid transparent; - 为父元素定义上内边距
padding: 1px; - 为父元素添加
overflow: hidden（推荐，不改变盒子大小）
#father {
/* 其他样式不变 */
overflow: hidden; /* 解决外边距塌陷 */
}
显示效果：
5.5 清除默认内外边距🐦🔥
网页中很多元素（如ul、p等）会自带默认的内外边距，且不同浏览器表现不一致。因此，布局前通常会先清除这些默认样式：
* {
padding: 0; /* 清除内边距 */
margin: 0; /* 清除外边距 */
}
注意：行内元素为了兼容性，建议只设置左右方向的内外边距，上下方向可能不起作用（转换为块级或行内块元素后可正常使用）。
5.6 综合代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<!-- 页面布局三大核心：盒子模型、浮动、定位 -->
<!-- 谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器
CSS盒子模型本质上是一个盒子，封装周围的HTML元素,包括：边框、外边距、内边距和实际内容
-->
<style>
/* 注意，这句话应为我们使用CSS时的第一句话
* {
padding: 0; 清除内边距
margin: 0; 清除外边距
}
*/
/* <!-- 111.border -->
<!-- border可以设置元素的边框，边框由三部分组成：边框宽度(粗细)、边框样式、边框颜色
border: border-width | border-style | border-color;
边框属性简写(复合写法)：border-width border-style border-color;(没有顺序要求)
-->
*/
#div1 {
width: 300px;
height: 200px;
/* 1.border-width 边框的粗细，一般情况下都用 px */
border-width: 10px;
/* 2.border-style 边框的样式 solid(实现边框) dashed(虚线边框) dotted(点线边框) */
border-style: solid;
/* 3.border-color */
border-color: pink;
/* 4.边框的简写 */
/* border: 10px solid pink; */
}
/* 5.边框分开写法： border-top/left/right/bottom: 5px solid red */
/* 注意：11.边框会额外增加盒子的实际大小,比如 width:100px的盒子,若有border: 5px solid red ，则盒子的实际宽度为100+2*5
解决方案：1. 测量盒子的时候不要量边框
2. 如果测量的时候包含了边框,则需要width/height减去边框宽度*2(若两边都有边框)
*/
#div2 {
width: 200px;
height: 200px;
/* 给定一个200*200的盒子,设置上边框为红色,其余边为蓝色 */
/* border-top: 5px solid red;
border-bottom: 5px solid blue;
border-left: 5px solid blue;
border-right: 5px solid blue; */
/* 这种写法更好，合理运用层叠性(就近原则) */
border: 5px solid blue;
border-top: 5px solid red;
}
/* 6.表格细线边框 (边框与边框之间会有像素融合问题,5px+5px=10px)*/
/* 解决：border-collapse: collapse(合并) 相邻边框合并在一起*/
table {
width: 500px;
height: 250px;
text-align: center;
}
table,
td,
th {
border: 1px solid pink;
/* 合并相邻的边框 */
border-collapse: collapse;
}
/* 7.内边距 padding 盒子里面的内容默认适合盒子的边缘紧挨着的，这时就需要padding来进行调节
11.padding 属性用于设置内边距，即边框和内容之间的距离
1.padding-left 左内边距
2.padding-right 右内边距
3.padding-top 上内边距
4.padding-bottom 下内边距
22.padding复合写法(简写)
1.padding: 5px; 1个值，代表上下左右都有5像素内边距
2.padding: 5px 10px; 2个值，代表上下内边是5像素，左右内边距是10像素
3.padding: 5px 10px 20px; 3个值，代表上内边距是5像素，左右内边距是10像素，下内边距是20像素
4.padding: 5px 10px 20px 30px; 4个值，上是5像素，右10像素，下20像素，左30像素 顺时针(上右下左)
33.padding会影响盒子的实际大小，也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子
解决方案：如果要保证盒子跟效果图大小一致，则让width/height减去多出来的内边距大小即可(注意两边的内边距都要考虑进去)
*/
.div3 {
width: 200px;
height: 200px;
background-color: pink;
/* 在浏览器右键点击检查，把鼠标移动到对应的位置，内边距部分会变为跟背景不一样的颜色 */
/* padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px; */
/* 内边距简写 */
/* padding: 5px; */
/* padding: 5px 10px; */
/* padding: 5px 10px 20px; */
padding: 5px 10px 20px 30px;
}
/* 7.1 内边距的应用：当网页中每个导航栏(盒子)里面的字数不一样多时，我们就不要统一给每一个盒子设定宽度了
直接用padding撑开盒子，就可以实现即使内容长度不一样，内容与盒子之间的边距也一样
*/
#nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
/* 运用了继承 a继承来自div的行高 */
line-height: 41px;
}
#nav a {
/* height: 41px; 由于a属于行内元素，这样设置无效，此时必须要转换 行内元素->行内块元素(不能装换成块级元素，因为其无法一行显示多个) */
display: inline-block;
height: 41px;
padding: 0 20px;
font-size: 15px;
color: #4c4c4c;
text-decoration: none;
}
/* 伪类选择器 */
#nav a:hover {
background-color: #eee;
color: #ff8500;
}
/* 7.2 padding不会影响盒子大小的情况
如果盒子本身没有指定width/height属性，则此时padding就不会撑开盒子大小(对应没有设置的属性)
总结：孩子有边框，孩子变大了，但是父亲不受影响，也就是父盒子里面的子盒子会受内边框影响，但是父盒子不会发生变化
*/
.div5 {
width: 300px;
height: 100px;
background-color: pink;
}
.div5 p {
/* p的width不会变成300+30*2=360px，在自身width没有指定的情况下，不会超出父亲的范围 */
/* width: 100%; */
padding:30px;
}
/* 8. 外边距(margin) 控制盒子和盒子之间的距离
属性： 1.margin-left 左外边距
2.margin-right 右外边距
3.margin-top 上外边距
4.margin-bottom 下外边距
注意：margin简写方式代表的意义和padding完全一致
*/
.div6 {
height: 200px;
width: 100px;
background-color: pink;
}
/* #one {
margin-bottom: 20px;
} */
#two {
margin-top: 20px;
margin-left: 20px;
margin-bottom: 50px;
}
/* 8.1 外边距的典型应用
外边距可以让块级盒子水平居中(盒子默认左侧对齐)，但是必须满足两个条件：
1.盒子必须指定了宽度(width),否则它就跟浏览器/父盒子一样宽了
2.盒子左右的外边距都设置为 auto
以下三种写法都可以：
1.margin-left: auto; margin-right: auto;
2.margin: auto; (上下左右都auto了)
3.(常用)margin: 0px auto; (上下外边距为0px 左右auto)
注意：以上方法是让块级元素居中，行内元素或者行内块元素水平居中给其 父元素 添加 text-align: center; 即可
*/
.header {
width: 500px;
height: 200px;
background-color: skyblue;
/* 简写法：上下外边距为100px，左右外边距auto实现块级元素自动水平居中 */
margin: 100px auto;
/* text-align: center 使行内元素和行内块元素(img)都会居中对齐 */
text-align: center;
}
#span1 {
margin: 0 auto;
/* margin: 0 auto; 不起效果，其只对块级元素起作用
给其父元素添加 text-align: center才对
*/
}
/* 8.2 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
嵌套块元素垂直外边距的塌陷(父盒子跟者子盒子一起塌下来了)：
对于两个嵌套关系(父子关系)的块级元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值
解决方案：
1.可以为父元素定义上边框
2.可以为父元素定义上内边框
3.可以为父元素添加 overflow: hidden
*/
#father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
/* 父元素塌陷解决 */
/* 1. transparent(透明)*/
/* border: 1px solid transparent; */
/* 2. */
/* padding: 1px; */
/* 3. 最好，不会改变盒子的大小，上面两种都有影响*/
overflow: hidden;
/* 4.还有其他方法，比如 浮动、固定、绝对定位 这些的盒子不会有塌陷问题 */
}
#son {
width: 200px;
height: 200px;
background-color: pink;
/* 本来子元素按照margin-top:100px 应该从父元素的上顶部分开，但实际并没有，而是父元素跟者子元素一起下来了(塌陷) */
margin-top: 100px;
}
/* 9. 内外边距的清除 */
/* 网页很多元素都会自带默认的内外边距，而且不同浏览器默认的也不一致。
因此我们在布局前，要先清除网页元素的内外边距
*{
padding: 0; 清除内边距
margin: 0; 清除外边距
}
！注意：
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距(即使设置也不起效果)。但是转换为块级元素和行内元素就可以
*/
/* ！ 这句话也是我们CSS的第一行代码 ！*/
* {
padding: 0;
margin: 0;
}
#span2 {
background-color: pink;
margin: 20px;
}
</style>
</head>
<body>
<!-- 测试边框各属性 -->
<div id="div1"></div>
<br />
<!-- 测试边框分开写法 -->
<div id="div2"></div>
<!-- 测试表格细线边框 -->
<table align="center" border="1" cellpadding="0" cellspacing="0">
<thead> <!--注意不要把<thead>和<th>搞混 前一个是表结构标签，使表格层次看着更清晰，而后者是类似加粗版的<td>-->
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="picture/down.jpeg" /></td>
<td>345</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="picture/down.jpeg" /></td>
<td>124</td>
<td>123421</td>
<td><a href="#" target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="picture/up.jpeg" /></td>
<td>212</td>
<td>3213</td>
<td><a href="#" target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>4</td>
<td>甄嬛传</td>
<td><img src="picture/up.jpeg" /></td>
<td>2343</td>
<td>243343</td>
<td><a href="#" target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</tbody>
</table>
<!-- 盒子模型内边距测试 -->
<div class="div3">这是盒子模型的内边距测试 天王盖地虎，宝塔镇河妖妖怪阿斯蒂芬哈喽</div>
<!-- 内边距的应用 -->
<div id="nav">
<a href="">新浪微博</a>
<a href="">手机新浪网</a>
<a href="">移动客户端</a>
<a href="">微博</a>
<a href="">交友网</a>
</div>
<!-- 测试padding不会影响盒子大小的情况 -->
<div class="div5">
<p>
</p>
</div>
换行
<br>
<!-- 测试盒子模型之外边距 -->
<div class="div6" id="one"></div>
<div class="div6" id="two"></div>
<!-- 外边距的应用 -->
<div class="header">
<span id="span1">里面的文字，为行内元素</span>
<img src="picture/up.jpeg" />
</div>
<br>
<!-- 外边距的合并 -->
<div id="father">
<div id="son"></div>
</div>
<br />
<!-- 内外边距的清除 -->
<!-- 网页很多元素都会自带默认的内外边距，而且不同浏览器默认的也不一致。
因此我们在布局前，要先清除网页元素的内外边距
-->
12345
<ul>
<li>
你好
</li>
</ul>
<span id="span2">行内元素尽量只设置左右的内外边距</span>
</body>
</html>
显示效果：
六、CSS美化三剑客：圆角边框、盒子阴影与文字阴影🥝
在网页设计中，细节决定品质。圆角边框、盒子阴影和文字阴影这三个CSS属性，虽然看似简单，却能瞬间提升页面的精致度和立体感。
6.1 圆角边框（border-radius）：告别生硬直角🍋🟩
默认情况下，HTML元素的边框都是直角的，显得生硬刻板。border-radius属性通过设置"圆角半径"，能让元素边缘呈现平滑的弧形效果，是现代UI设计的基础。
核心语法：圆角的本质
圆角效果的原理是在元素的每个角落绘制一个圆形（或椭圆），圆形与边框的交集形成弧形边缘。border-radius的值就是这个圆形的半径，值越大，圆角越明显。
/* 基础语法 */
selector {
border-radius: length; /* 可以是px、%等单位 */
}
实战案例：从矩形到圆形
-
圆形效果
当元素是正方形时，将border-radius设置为宽度的50%，即可得到完美圆形：.yuanxing { width: 300px; height: 300px; /* 宽高相等的正方形 */ background-color: pink; border-radius: 50%; /* 半径=宽高的一半，形成圆形 */ }
-
圆角矩形
对于长方形，将border-radius设置为高度的一半，可得到两侧半圆的胶囊形：.juxing { width: 300px; height: 100px; /* 高度是宽度的1/3 */ background-color: pink; border-radius: 50px; /* 50px = 100px高度的一半 */ }
-
自定义不规则圆角
border-radius支持为四个角分别设置不同半径，顺序为左上角→右上角→右下角→左下角（顺时针）：.radius1 { width: 200px; height: 200px; background-color: pink; /* 单独设置左上角圆角 */ border-top-left-radius: 30px; /* 也可简写：border-radius: 10px 20px 30px 40px; */ }
实用技巧
- 单位选择：px适合固定尺寸的圆角，%适合响应式设计（随元素大小自动调整）
- 兼容处理：现代浏览器均支持，但老旧浏览器（如IE8及以下）不支持，需谨慎使用
- 常见场景：按钮、头像、卡片组件、输入框等需要柔和边缘的元素
6.2 盒子阴影（box-shadow）：给元素添加立体感🍋🟩
现实世界中，物体总会因为光线产生阴影，box-shadow属性正是通过模拟这种光影效果，让平面的元素产生立体感。
语法解析
selector {
box-shadow: h-shadow v-shadow blur spread color inset;
}
各参数含义：
-
h-shadow：必需，水平阴影位置（正值向右，负值向左） -
v-shadow：必需，垂直阴影位置（正值向下，负值向上） -
blur：可选，模糊距离（值越大，阴影越模糊） -
spread：可选，阴影尺寸（正值扩大阴影，负值缩小） -
color：可选，阴影颜色（常用rgba设置半透明） -
inset：可选，将外阴影改为内阴影（默认是外阴影，不可写outset）
实战案例：交互增强效果
-
基础阴影效果
为元素添加轻微阴影，增强层次感：.shadow1 { width: 200px; height: 200px; background-color: pink; /* 水平11px、垂直17px、模糊14px、半透明黑色阴影 */ box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3); } -
hover交互阴影
鼠标悬浮时显示阴影，提升交互体验：.shadow1 { width: 200px; height: 200px; background-color: pink; transition: box-shadow 0.3s; /* 平滑过渡 */ } .shadow1:hover { /* 鼠标经过时显示阴影 */ box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3); }
注意事项
- 阴影不占用空间：不会影响其他元素的布局，也不会撑开父容器
- 多重阴影：用逗号分隔可添加多个阴影，实现复杂效果
- 性能考量：过多或过大的阴影可能影响页面渲染性能，需适度使用
6.3 文字阴影（text-shadow）：让文字更有质感🍋🟩
文字作为页面的核心内容，适当的阴影能增强可读性和视觉冲击力。text-shadow的用法与box-shadow类似，但作用对象是文字。
语法解析
selector {
text-shadow: h-shadow v-shadow blur color;
}
参数与盒子阴影基本一致，只是没有spread（阴影尺寸）和inset（内阴影）属性。
实战案例：突出标题文字
#character {
font-size: 50px;
color: orange;
font-weight: 700;
/* 水平5px、垂直5px、模糊6px、半透明黑色阴影 */
text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}
这段代码会让文字产生轻微的立体感，同时与背景形成更好的区分度。
创意用法
- 发光效果：使用与文字同色的阴影，设置较大的模糊值
.glow-text { color: white; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff00de; } - 立体字效果：叠加多个方向的阴影，模拟光照层次感
6.4 综合实战：打造精致卡片组件👏
将三个属性结合使用，能快速提升组件质感。例如一个产品卡片：
.product-card {
width: 300px;
padding: 20px;
background: orange;
border-radius: 10px; /* 圆角边框 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* 轻微外阴影 */
}
.product-card h3 {
font-size: 20px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* 文字阴影 */
}
这样的卡片会显得精致且有层次，远胜于生硬的直角和扁平效果。
6.5 综合代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角边框+盒子阴影+文字阴影</title>
<style>
/* 111.圆角边框 */
/* border-radius: length; 设置元素的外边框圆角 radius(圆的半径)，圆与边框的交集形成的圆角效果
参数值可以为 数值 或 百分比 的形式
1.如果盒子是个正方形，想要设置为一个圆，把数值修改为高度或宽度的一半即可，或者直接写为50%
2.如果盒子是个矩形，设置为高度的一半就可以
3.该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
4.每个角分开写：border-top-left-radius、border-top-right-radius(top必须在前面)、
border-bottom-right-radius、border-bottom-lef-radius(bottom也要在前面)
*/
/* 圆形 radiu设置为盒子宽度的一半即可*/
.yuanxing {
width: 300px;
height: 300px;
background-color: pink;
/* border-radius: 150px; */
/* 50% 就是宽度和高度的一半 */
border-radius: 50%;
}
/* 圆角矩形 radius设置为盒子高度的一半*/
.juxing {
width: 300px;
height: 100px;
background-color: pink;
border-radius: 50px;
}
/* 每个角设置不同的radius */
.radius1 {
width: 200px;
height: 200px;
background-color: pink;
/* border-radius: 10px 20px 30px 40px; */
/* border-radius: 10px 40px; */
border-top-left-radius: 30px;
}
/* 222.盒子阴影 */
/* 语法：box-shadow: h-shadow v-shadow blur spread color inset
h-shadow 必需。水平阴影的位置，允许负值(数值越大，影子越往右边偏移)
v-shadow 必需。垂直阴影的位置，允许负值(数值越大，影子越往下偏移)
blur 可选。模糊距离(影子是虚的还是实的,数值越大，影子越模糊)
spread 可选。阴影的尺寸
color 可选。阴影的颜色
inset 可选。将外部阴影(outset)改为内部阴影
注意；
1.默认是外阴影(outset),但是不可以书写这个单词，否则将导致阴影无效
2.盒子阴影不占空间，不会影响其他盒子的排列位置
*/
.shadow1 {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* rgba半透明化 */
/* box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3); */
}
.shadow1:hover {
/* 原先盒子没有影子，当鼠标经过盒子时就添加阴影效果 */
box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3);
}
/* 文字阴影 */
/* 语法: text-shadow: h-shadow v-shadow blur color;
h-shadow 必需。水平阴影的位置，允许负值
v-shadow 必需。竖直阴影的位置，允许负值
blur 可选。模糊的距离)
color 可选。模糊的颜(数值越大阴影越虚)
*/
#character {
font-size: 50px;
color: orange;
font-weight: 700;
text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}
.glow-text {
color: aqua;
font-size: 100px;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px aqua;
}
.product-card {
width: 300px;
padding: 20px;
background: orange;
border-radius: 10px; /* 圆角边框 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* 轻微外阴影 */
}
.product-card h3 {
font-size: 20px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* 文字阴影 */
}
</style>
</head>
<body>
<!-- 圆形的做法 -->
圆形
<div class="yuanxing"></div>
<p>分隔</p>
<!-- 圆角矩形 -->
圆角矩形
<div class="juxing"></div>
<p>分隔</p>
<div class="radius1"></div>
<p>分隔</p>
<!-- 盒子阴影测试 -->
<div class="shadow1"></div>
<!-- 文字阴影测试 -->
<div id="character">你是阴影，我是火影</div>
<div class="glow-text">glow测试</div>
<div class="product-card">
<h3>大夏境内,诸神禁行</h3>
</div>
</body>
</html>
显示效果：
七、CSS布局🥝
布局是CSS核心应用，从传统布局到现代布局，覆盖所有页面结构需求。
7.1 普通流（Normal Flow）
默认布局方式，元素按“块级/行内”特性排列：
-
块级元素（
div/p/h1）：独占一行，宽度默认100%，可设置宽高。 -
行内元素（
span/a/img）：横向排列，宽高由内容决定，不可设置width/height（img特殊，可设置）。 -
行内块元素（
display: inline-block）：横向排列，可设置宽高（如按钮、图标）。
7.2 浮动（Float）
使元素脱离普通流，向左右浮动，早期用于图文混排和多列布局：
/* 左浮动 */
.float-left {
float: left;
width: 50%; /* 两列布局 */
height: 200px;
background: #f8f9fa;
margin-right: 20px;
}
/* 清除浮动（解决父元素高度塌陷） */
.clearfix::after {
content: "";
display: block;
clear: both; /* 清除左右浮动 */
}
问题：浮动元素会脱离普通流，导致父元素高度塌陷（无法包裹浮动子元素），需清除浮动。
7.3 定位（Position）
通过position控制元素位置，脱离普通流（除static外），包含5种定位方式：
| 定位方式 | 语法 | 参考基准 | 特点 | 适用场景 |
|---|---|---|---|---|
| static | position: static |
无（遵循普通流） | 无法通过top/left调整位置 |
默认值，无定位需求 |
| relative | position: relative |
自身原位置 | 保留原位置，可通过top/left偏移 |
微调元素位置、作为absolute的容器 |
| absolute | position: absolute |
最近的非static定位祖先元素 | 完全脱离普通流，不保留原位置 | 弹窗、下拉菜单、精准定位元素 |
| fixed | position: fixed |
浏览器视口 | 脱离普通流，固定在视口某个位置（滚动不移动） | 导航栏、回到顶部按钮、悬浮广告 |
| sticky | position: sticky |
滚动容器（或视口） | 滚动到指定位置前遵循普通流，之后固定 | 列表标题吸顶、表格表头固定 |
实战案例：绝对定位实现弹窗居中
/* 弹窗容器（fixed定位，覆盖全屏） */
.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5); /* 半透明遮罩 */
display: flex;
align-items: center;
justify-content: center;
}
/* 弹窗内容（absolute定位，相对容器居中） */
.modal-content {
position: absolute;
width: 500px;
height: 300px;
background: #fff;
border-radius: 8px;
padding: 20px;
/* 居中关键：top/left 50% + 负margin（基于自身尺寸） */
top: 50%;
left: 50%;
margin-top: -150px; /* 自身高度的一半 */
margin-left: -250px; /* 自身宽度的一半 */
}
7.4 Flex布局（弹性布局）
现代布局首选方案，通过给父容器设置display: flex，子元素成为“弹性项”，灵活控制排列、对齐和尺寸分配，适用于一维布局（行或列）。
1. 父容器核心属性
| 属性名 | 取值 | 功能描述 | 代码示例 |
|---|---|---|---|
display |
flex |
开启Flex布局，子元素成为弹性项 | .flex-container { display: flex; } |
flex-direction |
row（默认）/column/row-reverse/column-reverse
|
定义主轴方向（row=水平，column=垂直） | .flex-container { flex-direction: column; } |
justify-content |
flex-start/center/flex-end/space-between/space-around
|
主轴对齐方式（控制弹性项在主轴上的分布） | .flex-container { justify-content: space-between; } |
align-items |
stretch（默认）/center/flex-start/flex-end
|
交叉轴对齐方式（控制弹性项在交叉轴上的对齐） | .flex-container { align-items: center; } |
flex-wrap |
nowrap（默认）/wrap/wrap-reverse
|
弹性项是否换行（nowrap=不换行，会压缩子元素） | .flex-container { flex-wrap: wrap; } |
align-content |
stretch/center/flex-start/space-between
|
多线交叉轴对齐（仅当弹性项换行时生效） | .flex-container { align-content: center; } |
gap |
数值+单位（如10px） |
弹性项之间的间距（替代margin，更简洁） | .flex-container { gap: 15px; } |
2. 子元素核心属性
| 属性名 | 取值 | 功能描述 | 代码示例 |
|---|---|---|---|
flex-grow |
数字（默认0） | 弹性项的“扩张比例”，分配剩余空间 |
.flex-item { flex-grow: 1; }（所有子元素均分剩余空间） |
flex-shrink |
数字（默认1） | 弹性项的“收缩比例”，空间不足时是否缩小 |
.flex-item { flex-shrink: 0; }（不收缩，保持原尺寸） |
flex-basis |
auto（默认）/数值+单位
|
弹性项在主轴上的初始尺寸（优先级高于width/height） | .flex-item { flex-basis: 200px; } |
flex |
flex-grow flex-shrink flex-basis 缩写 |
复合属性（常用flex: 1等价1 1 auto） |
.flex-item { flex: 2; }（扩张比例2，其他默认） |
align-self |
auto（默认）/center/flex-start
|
单个弹性项的交叉轴对齐方式（覆盖父容器align-items） |
.flex-item { align-self: flex-end; } |
实战案例：Flex实现导航栏（水平居中+两端对齐）
/* 导航栏容器（Flex布局） */
.nav {
display: flex;
justify-content: space-between; /* 主轴（水平）两端对齐 */
align-items: center; /* 交叉轴（垂直）居中 */
height: 80px;
background: #fff;
padding: 0 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 导航菜单（Flex布局，子项水平排列） */
.nav-menu {
display: flex;
gap: 30px; /* 菜单项之间间距30px */
}
/* 菜单项（弹性项，不收缩） */
.nav-item {
flex-shrink: 0;
color: #333;
text-decoration: none;
font-size: 16px;
}
7.5 Grid布局（网格布局）
二维布局系统（同时控制行和列），通过给父容器设置display: grid，将页面划分为“网格区域”，适用于复杂页面结构（如仪表盘、卡片布局）。
1. 父容器核心属性
| 属性名 | 取值 | 功能描述 | 代码示例 |
|---|---|---|---|
display |
grid |
开启Grid布局，子元素成为网格项 | .grid-container { display: grid; } |
grid-template-columns |
数值+单位/fr/repeat()
|
定义网格列数和每列宽度（fr=剩余空间比例） |
.grid-container { grid-template-columns: 200px 1fr 1fr; }（3列：200px、1fr、1fr） |
grid-template-rows |
数值+单位/fr/repeat()
|
定义网格行数和每行高度 |
.grid-container { grid-template-rows: 80px 1fr 60px; }（3行：80px、1fr、60px） |
grid-template-areas |
字符串（如"header header"） |
定义网格区域名称，方便子元素定位 | .grid-container { grid-template-areas: "header header" "sidebar main" "footer footer"; } |
gap |
数值+单位（如10px） |
网格项之间的间距（行列间距，可分别设置row-gap/column-gap） |
.grid-container { gap: 20px; } |
justify-items |
stretch/center/flex-start
|
网格项在单元格内的水平对齐方式 | .grid-container { justify-items: center; } |
align-items |
stretch/center/flex-start
|
网格项在单元格内的垂直对齐方式 | .grid-container { align-items: center; } |
2. 子元素核心属性
| 属性名 | 取值 | 功能描述 | 代码示例 |
|---|---|---|---|
grid-column |
start / end（如1 / 3） |
定义网格项占据的列范围（从第1列到第3列，含1不含3） | .header { grid-column: 1 / 3; } |
grid-row |
start / end（如1 / 2） |
定义网格项占据的行范围 | .sidebar { grid-row: 2 / 3; } |
grid-area |
区域名（如header） |
将网格项关联到父容器定义的grid-template-areas
|
.header { grid-area: header; } |
实战案例：Grid实现经典页面布局（头部+侧边栏+主体+底部）
/* 页面容器（Grid布局，占满视口高度） */
.page-container {
display: grid;
grid-template-columns: 250px 1fr; /* 2列：侧边栏250px，主体占剩余空间 */
grid-template-rows: 80px 1fr 60px; /* 3行：头部80px，主体占剩余空间，底部60px */
grid-template-areas:
"header header" /* 头部占第1行，跨2列 */
"sidebar main" /* 侧边栏占第2行第1列，主体占第2行第2列 */
"footer footer"; /* 底部占第3行，跨2列 */
height: 100vh; /* 占满视口高度 */
gap: 20px; /* 网格项之间间距20px */
padding: 20px;
box-sizing: border-box;
}
/* 各区域关联网格 */
.header {
grid-area: header;
background: #007bff;
color: #fff;
display: flex;
align-items: center;
padding: 0 20px;
}
.sidebar {
grid-area: sidebar;
background: #f8f9fa;
padding: 20px;
}
.main {
grid-area: main;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.footer {
grid-area: footer;
background: #343a40;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
7.6 表格布局（Table Layout）
早期用于表单或数据展示，通过display: table系列属性模拟表格结构，适用于需严格对齐的场景（如数据表格），但灵活性较低，现代开发中逐渐被Flex/Grid替代。
核心属性
- 父容器：
display: table（模拟<table>）、table-layout: fixed（固定列宽，提升性能）。 - 行容器：
display: table-row（模拟<tr>）。 - 单元格：
display: table-cell（模拟<td>）、vertical-align: middle（单元格垂直居中）。
实战案例：表格布局实现垂直居中
/* 父容器（模拟表格） */
.table-container {
display: table;
width: 100%;
height: 300px; /* 固定高度，方便子元素垂直居中 */
background: #f8f9fa;
}
/* 行容器（模拟表格行） */
.table-row {
display: table-row;
}
/* 单元格（模拟表格单元格，垂直居中） */
.table-cell {
display: table-cell;
vertical-align: middle; /* 垂直居中关键属性 */
text-align: center; /* 水平居中 */
padding: 20px;
}
7.7 多列布局（Multi-column Layout）
用于实现类似报纸的多列文本排版，通过column系列属性控制列数、列间距和列边框，适用于长文本分栏展示。
核心属性
-
column-count：定义列数（如column-count: 3表示3列）。 -
column-width：定义每列宽度（如column-width: 200px，浏览器自动计算列数）。 -
column-gap：定义列之间的间距（如column-gap: 20px）。 -
column-rule：定义列之间的分隔线（如column-rule: 1px solid #ddd）。
实战案例：多列布局实现文本分栏
/* 多列容器 */
.multi-column {
column-count: 3; /* 3列布局 */
column-gap: 30px; /* 列间距30px */
column-rule: 1px solid #eee; /* 列分隔线：1px实线，灰色 */
padding: 20px;
font-size: 16px;
line-height: 1.8;
}
/* 标题跨列显示 */
.multi-column h3 {
column-span: all; /* 标题跨所有列 */
text-align: center;
margin-bottom: 20px;
font-size: 24px;
}
八、CSS动画与过渡🥝
通过transition（过渡）和animation（动画）实现元素动态效果，提升页面交互体验，无需依赖JavaScript。
8.1 过渡（Transition）
实现元素“状态变化”的平滑过渡（如hover时颜色、尺寸、位置变化），仅需定义“过渡属性”和“过渡时长”，适用于简单的状态切换。
核心属性
| 属性名 | 取值 | 功能描述 | 代码示例 |
|---|---|---|---|
transition-property |
all（默认）/ 具体属性（如background） |
定义需要过渡的属性（all表示所有可过渡属性） |
.btn { transition-property: background, transform; } |
transition-duration |
时间值（如0.3s） |
过渡时长（必须设置，否则无效果） | .btn { transition-duration: 0.3s; } |
transition-timing-function |
ease（默认）/linear/ease-in/ease-out
|
过渡缓动函数（控制过渡速度变化） | .btn { transition-timing-function: ease-in-out; } |
transition-delay |
时间值（如0.2s） |
过渡延迟开始时间 | .btn { transition-delay: 0.2s; } |
transition |
复合属性（property duration timing-function delay） |
简化写法（常用） | .btn { transition: all 0.3s ease; } |
实战案例：按钮hover过渡效果
/* 按钮默认样式 */
.btn {
padding: 10px 20px;
background: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
/* 过渡：所有可过渡属性，时长0.3s，缓动效果ease */
transition: all 0.3s ease;
}
/* 按钮hover状态 */
.btn:hover {
background: #0056b3; /* 背景色加深 */
transform: scale(1.05);
transform: scale(1.05); /* 轻微放大 1.05 倍 */
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); /* 增加阴影，增强层次感 */
}
过渡属性的可过渡性说明
并非所有CSS属性都支持过渡，仅“具有中间状态”的属性可过渡（如color、width、transform），不可过渡属性包括display（无中间状态，直接从none到block）、background-image（无法平滑切换图片）等。
过渡属性的可过渡性说明
并非所有CSS属性都支持过渡，仅“具有中间状态”的属性可过渡（如color、width、transform），不可过渡属性包括display（无中间状态，直接从none到block）、background-image（无法平滑切换图片）等。
8.2 动画（Animation）
通过@keyframes定义“关键帧”，实现更复杂的动态效果（如旋转、移动、循环动画），支持多阶段状态控制，适用于需自定义时序的复杂动画。
1. 核心属性（动画控制）
| 属性名 | 取值 | 功能描述 | 代码示例 |
|---|---|---|---|
animation-name |
关键帧名称（如rotate） |
关联定义好的@keyframes动画 |
.loading { animation-name: rotate; } |
animation-duration |
时间值（如1s） |
动画完成一次循环的时长（必须设置） | .loading { animation-duration: 1s; } |
animation-timing-function |
linear/ease/steps() 等 |
动画缓动函数（steps()支持逐帧动画） |
.loading { animation-timing-function: linear; } |
animation-delay |
时间值（如0.5s） |
动画延迟开始时间 | .loading { animation-delay: 0.5s; } |
animation-iteration-count |
infinite/数字（如3） |
动画循环次数（infinite表示无限循环） |
.loading { animation-iteration-count: infinite; } |
animation-direction |
normal/reverse/alternate
|
动画循环方向（alternate表示来回循环） |
.loading { animation-direction: alternate; } |
animation-fill-mode |
none/forwards/backwards
|
动画结束后元素状态（forwards保留最后一帧） |
.box { animation-fill-mode: forwards; } |
animation-play-state |
running/paused
|
动画播放状态（可通过JS控制暂停/播放） | .box { animation-play-state: paused; } |
animation |
复合属性（顺序：name duration timing-function delay iteration-count direction fill-mode play-state） | 简化写法（常用） | .loading { animation: rotate 1s linear infinite; } |
2. 关键帧定义（@keyframes）
通过0%（或from）和100%（或to）定义动画起点和终点，可插入中间关键帧（如50%）控制多阶段状态：
/* 定义旋转动画关键帧 */
@keyframes rotate {
0% {
transform: rotate(0deg); /* 起点：旋转0度 */
border-top-color: #007bff;
}
50% {
transform: rotate(180deg); /* 中间帧：旋转180度 */
border-top-color: #6610f2;
}
100% {
transform: rotate(360deg); /* 终点：旋转360度 */
border-top-color: #007bff;
}
}
实战案例1：加载动画（无限旋转）
/* 加载动画容器 */
.loading {
width: 50px;
height: 50px;
margin: 50px auto;
border: 5px solid #f3f3f3; /* 浅色边框 */
border-top: 5px solid #007bff; /* 深色顶部边框（旋转时形成动态效果） */
border-radius: 50%; /* 圆形 */
/* 动画：关联rotate关键帧，1秒完成，匀速，无限循环 */
animation: rotate 1s linear infinite;
}
/* 定义旋转关键帧 */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
实战案例2：元素入场动画（从下到上淡入）
/* 入场动画元素 */
.enter-animation {
opacity: 0; /* 初始状态：透明 */
transform: translateY(30px); /* 初始状态：向下偏移30px */
/* 动画：关联fadeInUp关键帧，0.8秒完成，缓入，保留最后一帧 */
animation: fadeInUp 0.8s ease forwards;
}
/* 定义淡入上移动画关键帧 */
@keyframes fadeInUp {
to {
opacity: 1; /* 终点：不透明 */
transform: translateY(0); /* 终点：回到原位置 */
}
}
九、CSS响应式设计🥝
通过技术手段让页面在不同屏幕尺寸（手机、平板、电脑）上自适应显示，核心是“根据设备特性调整样式”。
9.1 核心技术：媒体查询（Media Query）
根据设备的屏幕宽度、分辨率、方向等特性，应用不同的CSS样式，语法为@media 媒体类型 and (媒体特性) { 样式 }。
1. 媒体类型（可选，现代开发常用all）
-
all：所有设备（默认）。 -
screen：屏幕设备（电脑、手机、平板）。 -
print：打印设备（打印机）。
2. 常用媒体特性
| 媒体特性 | 语法示例 | 功能描述 |
|---|---|---|
width/max-width/min-width
|
(max-width: 768px) |
屏幕宽度（max-width:768px表示≤768px） |
height/max-height/min-height
|
(min-height: 600px) |
屏幕高度 |
orientation |
(orientation: portrait) |
屏幕方向（portrait竖屏，landscape横屏） |
device-pixel-ratio |
(device-pixel-ratio: 2) |
设备像素比（2表示Retina屏） |
3. 实战案例：响应式导航栏
/* 桌面端导航栏（默认样式，屏幕>768px） */
.nav {
display: flex;
justify-content: space-between;
padding: 0 20px;
height: 80px;
}
/* 桌面端菜单（显示） */
.nav-menu {
display: flex;
gap: 30px;
}
/* 移动端菜单按钮（隐藏） */
.nav-toggle {
display: none;
font-size: 24px;
cursor: pointer;
}
/* 移动端样式（屏幕≤768px） */
@media (max-width: 768px) {
.nav {
padding: 0 15px;
}
/* 隐藏桌面端菜单 */
.nav-menu {
display: none;
/* 移动端菜单展开样式（可通过JS控制显示） */
flex-direction: column;
position: absolute;
top: 80px;
left: 0;
width: 100%;
background: #fff;
padding: 15px 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 显示移动端菜单按钮 */
.nav-toggle {
display: block;
}
}
9.2 视口设置（Viewport）
必须在HTML头部添加<meta name="viewport">标签，确保移动端浏览器正确识别屏幕尺寸，避免页面缩放异常：
<!-- 标准视口设置（必加） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
device-width：视口宽度等于设备屏幕宽度。 -
initial-scale=1.0：初始缩放比例为1（无缩放）。 -
maximum-scale=1.0：禁止用户放大页面。 -
user-scalable=no：禁止用户缩放页面（可选，根据需求决定）。
9.3 响应式图片
通过srcset和sizes属性，让浏览器根据屏幕尺寸自动选择合适分辨率的图片，减少带宽消耗：
<img
srcset="image-small.jpg 400w, image-medium.jpg 800w, image-large.jpg 1200w"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 800px, 1200px"
src="image-fallback.jpg"
alt="响应式图片"
>
-
srcset：提供不同分辨率的图片及宽度（400w表示图片实际宽度400px）。 -
sizes：定义不同屏幕宽度下图片的显示尺寸（100vw表示占满屏幕宽度）。 -
src：降级方案，当浏览器不支持srcset时加载该图片。
十、CSS高级特性🥝
10.1 CSS变量（Custom Properties）
定义可复用的变量，实现“一处修改，全局生效”，支持动态修改（通过JS），语法为--变量名: 值，使用时通过var(--变量名)调用。
1. 变量定义与使用
/* 根元素（:root）定义全局变量（所有元素可访问） */
:root {
--primary-color: #007bff; /* 主色调 */
--secondary-color: #6c757d; /* 辅助色 */
--font-size-base: 16px; /* 基础字体大小 */
--spacing-sm: 8px; /* 小间距 */
--spacing-md: 16px; /* 中间距 */
}
/* 使用变量 */
.btn {
background: var(--primary-color);
color: #fff;
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-size-base);
border-radius: 4px;
}
/* 变量 fallback（当变量未定义时使用备用值） */
.card {
border: 1px solid var(--border-color, #ddd); /* 若--border-color未定义，使用#ddd */
}
2. 变量作用域与动态修改
-
作用域：变量定义在某个元素内，仅该元素及其子元素可访问（根元素
:root定义的变量全局可访问）。 -
动态修改：通过JS修改CSS变量，实现样式动态切换：
// 修改根元素的--primary-color变量 document.documentElement.style.setProperty('--primary-color', '#dc3545');
10.2 渐变（Gradient）
生成平滑的颜色过渡效果，无需使用图片，分为线性渐变、径向渐变、重复渐变等。
1. 线性渐变（Linear Gradient）
沿直线方向渐变，语法为linear-gradient(方向, 颜色1, 颜色2, ...)：
/* 从左到右，从蓝色到紫色渐变 */
.linear-gradient-bg {
background: linear-gradient(to right, #007bff, #6610f2);
}
/* 从右上到左下，从透明到黑色渐变（常用于遮罩） */
.mask-gradient {
background: linear-gradient(to bottom left, transparent, rgba(0,0,0,0.7));
}
/* 带颜色位置的渐变（50%处为蓝色，100%处为紫色） */
.positioned-gradient {
background: linear-gradient(to right, #007bff 50%, #6610f2 100%);
}
2. 径向渐变（Radial Gradient）
从中心点向外渐变，语法为radial-gradient(形状 大小, 颜色1, 颜色2, ...)：
/* 圆形渐变，从白色到蓝色 */
.radial-gradient-bg {
background: radial-gradient(circle, #fff, #007bff);
}
/* 椭圆形渐变，从中心向外扩散（限定尺寸） */
.ellipse-gradient {
background: radial-gradient(ellipse 100px 80px, #6610f2, transparent);
}
3. 重复渐变（Repeating Gradient）
重复生成渐变效果，语法为repeating-linear-gradient()/repeating-radial-gradient()：
/* 重复线性渐变（条纹背景） */
.striped-bg {
background: repeating-linear-gradient(
45deg,
#f8f9fa,
#f8f9fa 10px,
#e9ecef 10px,
#e9ecef 20px
);
}
10.3 阴影（Box Shadow & Text Shadow）
添加阴影效果，增强元素层次感，支持多阴影叠加。
1. 盒子阴影（Box Shadow）
给元素添加外部或内部阴影，语法为box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色 inset：
/* 基础外部阴影（水平2px，垂直2px，模糊8px，颜色半透明） */
.card {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 带扩散半径的阴影（扩散2px，阴影范围更大） */
.btn-hover {
transition: all 0.3s ease;
}
.btn-hover:hover {
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
/* 内部阴影（inset关键字，阴影在元素内部） */
.input-inner-shadow {
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
/* 多阴影叠加（外部阴影+内部阴影） */
.multi-shadow {
box-shadow: 0 2px 8px rgba(0,0,0,0.1), inset 0 1px 3px rgba(0,0,0,0.1);
}
2. 文字阴影（Text Shadow）
给文字添加阴影，语法为text-shadow: 水平偏移 垂直偏移 模糊半径 颜色：
/* 基础文字阴影（增强文字立体感） */
.title {
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
/* 多文字阴影叠加（实现发光效果） */
.glow-text {
color: #fff;
text-shadow: 0 0 8px rgba(0, 123, 255, 0.8), 0 0 12px rgba(0, 123, 255, 0.5);
}
学习资源推荐🐦🔥
- MDN Web Docs - 最权威的CSS参考文档
- W3Schools - 包含丰富的示例和在线编辑器
- 菜鸟编程 - 讲解详细的宝藏网站
如果我的内容对你有帮助，请 点赞 ， 评论 ， 收藏 。创作不易，大家的支持就是我坚持下去的动力！
