css笔记
一、CSS基础
1、CSS简介
CSS也是一种标记语言，用于给html标签设置各种样式
2、CSS编写位置
1、行内样式
编写在标签的style属性中
<a style="coler: red">行内样式</a>
2、内部样式
写在html页面内部，抽取出一个style标签，供页面内所有标签使用，可以放在html的任何位置，但是一般放在head标签中
<style>
/* 设置h1标签的样式 */
h1{
coler:red;
font-size:60px;
}
</style>
3、外部样式
写在单独的.css文件中，可以供所有的html页面使用，需要在html页面引入
-
创建一个.css为后缀的文件，将CSS样式写在其中
h1{ color:red; } -
在html页面中引入，注意link标签需要写在head中
<link rel="stylesheet" href="./xxx.css">- rel：（relation：关系）说明引入的文档与当前文档的关系
- href：引入的文档来自哪里
3、CS样式优先级
行内样式 > 内部样式 > 外部样式
- 行内样式：一般不使用
- 缺点
- 代码复用性小
- 结构与样式不分离
- 代码结构混乱
- 缺点
- 内部样式：使用较少
- 缺点：
- 结构与样式未彻底分离
- 样式不能多页面复用
- 缺点：
- 外部样式：最多使用
- 缺点：需要引入
4、CSS语法规范
- 选择器：找到需要添加样式的标签
- 声明块：设置具体的样式，设置格式为 属性名：属性值
5、注释写法
/* 注释内容 */
6、代码风格
-
展开风格：开发时使用，便于维护和测试
h1 { color: red; font-size: 40px; } -
紧凑风格：不含多余的空格，项目上线时使用，节省文件占用空间
h1{color:red;font-size:40px;}
二、CSS选择器
1、基本选择器
通配选择器
- 作用：可以选中所有的HTML标签
/* 选中所有元素 */
* {
color: orange;
font-size: 40px;
}
元素选择器
- 作用：可以选中同种标签
/* 选中所有h1元素 */
h1 {
color: orange;
font-size: 40px;
}
/* 选中所有p元素 */
p {
color: blue;
font-size: 60px;
}
id选择器
- 作用：根据id选中标签
/* 选中id值为earthy的那个元素 */
#earthy {
color: red;
font-size: 60px;
}
类选择器
- 作用：选中类名一样的标签
/* 选中所有class值为speak的元素 */
.speak {
color: red;
}
2、复合选择器
交集选择器
- 作用：选中同时满足多个条件的标签
- 语法：选择器1选择器2选择器3
/* 选中：类名为beauty的p元素，为此种写法用的非常多！！！！ */
p.beauty {
color: blue;
}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
color: green;
}
- 注意：交集选择器不能同时指定两个标签，因为元素不可能同时是两种标签
并集选择器
-
作用：选中满足一个其中一个条件的元素，又称：分组选择器
-
语法：选择器1，选择器2，选择器3
/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */ #peiqi, .rich, .beauty { font-size: 40px; background-color: skyblue; width: 200px; } -
注意：
- 代码规范：一般竖着写，便于阅读
- 任何形式的选择器，都可以作为并集选择器的一部分 。
- 并集选择器，通常用于集体声明，可以缩小样式表体积。
后代选择器
-
作用：选中符合要求的后代元素
-
语法：选择器1 选择器2 选择器3
/* 选中ul中的所有li */ ul li { color: red; } /* 选中ul中所有li中的a */ ul li a { color: orange; } /* 选中类名为subject元素中的所有li */ .subject li { color: blue; } /* 选中类名为subject元素中的所有类名为front-end的li */ .subject li.front-end { color: blue; } -
注意：
- 后代选择器选中的是后代，不是选中祖先
- 孙子，儿子，重孙子都算是后代
子代选择器
-
作用：选中指定元素中，符合条件的子元素
-
语法：选择器1>选择器2>选择器3
/* div中的子代a元素 */ div>a { color: red; } /* 类名为persons的元素中的子代a元素 */ .persons>a{ color: red; } -
注意：
- 选中的是子代，不是父代
- 单纯指儿子，不包含孙子等其他后代
兄弟选择器
相邻兄弟选择器
-
作用：选中符合条件的兄弟元素
-
语法：选择器1+选择器2
/* 选中div后紧紧相邻的兄弟p元素，即div和p之间不能有任何器它元素 */ div+p { color:red; }
通用兄弟选择器
-
作用：选中符合条件的所有兄弟元素
-
语法：选择器1~选择器2
/* 选中div后的所有的兄弟p元素 */ div~p { color:red; } -
注意：两种兄弟选择器，选择的是下面的兄弟。
属性选择器
- 作用：选中属性值符合一定要求的元素。
- 语法：选中属性值符合一定条件的元素
- [属性值]：选中具有某个属性的元素
- [属性值=“值”]：选中具有某个属性值并且该属性值等于某个值
- [属性值^=“值”]：选中具有某个属性值并且属性值以指定值开头的元素
- [属性值$=“值”]：选中具有某个属性值并且属性值以指定值结尾的元素
- [属性值*=“值”]：选中具有某个属性并且属性值包含指定值的元素
- [属性值|=“值”]：选中具有某个属性并且属性值为"值"或者以"值-"为前缀的元素
- [属性值~=“值”]：选中具有某个属性并且属性值是以空格作为分隔符，并且其中至少一个值为"值"
伪类选择器
- 作用：选中具有特殊状态的元素
动态伪类
- :link：超链接未被访问过的元素
- :visited：超链接访问过的状态
- :hover：鼠标悬停在元素上的状态
- :active：元素激活的状态
/* 表示未曾被访问过的a元素 */
a:link{
font-size: large;
color: red;
}
/* 表示已经被访问过的a元素 */
a:visited{
font-size: large;
color: green;
}
/* 表示选中鼠标悬停在标签上的a元素 */
a:hover{
font-size: large;
color: black;
}
/* 表示处于激活状态的a元素 */
a:active{
font-size: large;
color: grey;
}
<a href="http://www.taobao.com">超链接1</a><br>
<a href="http://www.jd.com">超链接2</a>
- 注意：css按照后来居上的规则，需要按照lvha的顺序编写代码
-
:focus：选中获取焦点的元素
input:focus{ width: auto; background-color: skyblue; }
结构伪类
- p:first-child：选中p，并且该p必须是其父类的第一个子元素
- :last-child：选中所有兄弟的最后一个
- :nth-child（）：选中所有所有兄弟的第n个
- :first-of-type：选中所有同类型的兄弟的第一个
- last-of-type（）：选中所有同类型的兄弟的最后一个
- :nth-of-type(n) ：所有同类型兄弟元素中的 第n个 。
- :nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
- :nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第n个
- :only-child 选择没有兄弟的元素（独生子女）。
- :only-of-type 选择没有同类型兄弟的元素。
- :root 根元素。
- :empty 内容为空元素（空格也算内容）。
- 注意n的值
- 0 或 不写 ：什么都选不中 —— 几乎不用。
- n ：选中所有子元素 —— 几乎不用。
- 1~正无穷的整数 ：选中对应序号的子元素。
- 2n 或 even ：选中序号为偶数的子元素。
- 2n+1 或 odd ：选中序号为奇数的子元
- -n+3 ：选中的是前 3 个。
否定伪类
:not(选择器) ：排除满足括号中条件的元素
UI伪类
- :checked：被选中的复选框
- :enable：可用的表单元素
- disabled：不可用的表单元素
目标伪类
:target ： 选中锚点指向的元素
语言伪类
:lang() ： 根据指定的语言选择元素（本质上是根据lang属性的值选中元素）
伪元素选择器
- 作用：选中元素中的一些特殊位置
- 常用伪元素：
- ::first-letter：选中元素中的第一个文字
- ::first-line：选中元素中的第一行文字
- ::selection：选中被鼠标选中的文字
- ::placeholder：选中输入框的提示文字
- ::before：在元素开始的位置创建一个子元素(必须用content指定内容)
- ::after：同before
3、选择器的优先级
不同的选择器选中同样的元素，并且为相同的样式名设置不同的值，这就产生了样式冲突，需要根据选择器的优先级进行判断
- 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器
- 复杂的选择器按照权重来比较
- 行内样式大于所有的选择器
三、CSS三大特性
1、层叠性
如果发生了样式冲突，就按照一定的规则进行样式层叠
2、继承性
元素会继承祖先元素的某些已经设置的样式
规则：优先继承离得近的
3、优先级
如上
四、常用属性
1、像素
概念：屏幕是由一个一个的像素点组成的，每一个小点就是一个像素
规则：像素点越小越清晰
2、颜色
1、 表示方式一 ：颜色名
- red ：红色
- green：绿色
- 等等
2、 表示方式二：rgb或则rgba
使用红黄蓝三原色进行组合
- 例如：rgb(0,0,0)
3、表示方式三：HEX
使用六位十六进制数字表示颜色，还是和RGB一样，分三组表式红黄蓝
color: #ff0000;/* 红色 */
color: #00ff00;/* 绿色 */
color: #0000ff;/* 蓝色 */
color: #000000;/* 黑色 */
color: #ffffff;/* 白色 */
4、表示方式四：HSL
-
HSL 是通过：色相、饱和度、亮度，来表示一个颜色的，格式为： hsl(色相,饱和度,亮度)
- 色相：取值范围是 0~360 度，具体度数对应的颜色如下图：
-
饱和度：取值范围是 0%~100% 。（向色相中对应颜色中添加灰色， 0% 全灰， 100% 没有 灰）
-
亮度：取值范围是 0%~100% 。（ 0% 亮度没了，所以就是黑色。 100% 亮度太强，所以就是 白色了）
3、字体属性
1、字体大小
- 属性名：font-size
- 作用：控制字体大小
- 语法：
- font-size：30px
- 注意：
- 不同的浏览器的默认字体大小可能不一样，最好给定一个具体的字体大小
- 浏览器有最小字体限制
- 具有继承性，所以可以给body元素加上字体属性，这样body中的字体就都保持一样的大小（除非重新设置）
2、字体族
- 属性名：font-family
- 作用：控制字体类型
- 用法：
- font-family：“STCaiyun” , “Microsoft YaHei” ,sans-serif
- 优先选择前面的字体族，如果前面的出错了则依次往后选择字体族
- 一般在最后加上serif （衬线字体）或 sans-serif （非衬线字体）
3、字体风格
- 属性名：font-style
- 作用：控制字体风格
- 用法：
- font-style：normal
- 常用值：normal（默认），italic（使用字体自带的斜体效果），oblique（强制斜体）
4、字体粗细
- 属性名：font-weight
- 作用：控制字体粗细程度
- 用法：
- font-weight：normal
- 常用值：lighter（细），normal（正常），bold（粗），bolder（很粗，有的不支持）
- 或者可以使用数值：100~1000，数值越大越粗，但是得看字体设计的精确程度
5、字体复合写法
- 属性名：font
- 作用：控制字体各个样式
- 用法：
- 字体大小，字体族都必须写上
- 字体族必须写在最后一位，字体大小必须写在倒数第二位
- 各个属性用空格隔开
4、常用文本属性
1、文本颜色
- 属性名：color
- 作用：控制字体颜色
- 用法： 参考前面的颜色设置
2、文本间距
-
属性名：
- letter-spacing：字母间距
- word-spacing：单词间距
-
单位：px
-
用法：
.dic{ letter-spcaing:20px } .div{ word-spacing:20px }
3、文本修饰
- 属性名：text-decoration
- 作用：控制文本的各种装饰线
- 用法：
- text-decoration：none
- 可选值：
- none（没有装饰线）
- underline（下划线）
- overline（上划线）
- line-through（删除线，线在中间穿过）
- 可以搭配下面的值使用
- dotted（虚线）
- wavy（波浪线）
- 可以指定颜色
4、 文本缩进
- 属性名：text-indent
- 作用：控制文本首字母的缩进
- 用法：text-indent：10px
5、文本对齐-水平
- 属性名：text-align
- 作用：控制文本水平的对齐方式
- 常用值：
- left：左对齐
- right：右对齐
- center：居中
6、行高
- 属性名：line-height
- 作用：控制一行文字的高度
- 可选值：
- 数值：1.5（表示为字体大小的1.5倍）
- 像素值：100px
- 百分比：150%（表示自身 font-size 的1.5倍）
- normal：由浏览器自动选择合适的行高
- 注意事项：
- line-height过小会导致文字重叠，设置为0是，文字变成一行
- line-height可以继承，最好写数值
- line-height和height的关系：
- 设置了height，那么height就是固定的
- 不设置height时，height会根据line-height自动计算，如果为两行则height为line-height的两倍
9、vertical-align
- 属性名：verticall-align
- 作用：用于指定同一行元素之间，或 表格单元格 内文字的 垂直对齐方式。
- 常用值：
- baseline：默认值，使元素的基线和父元素的基线对齐
- top：使元素的顶部与其所在行的顶部对齐
- buttom：底部对齐
- middle：使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。
5、列表属性
列表相关的属性，可以作用在ul，ol，li元素上
| 属性名 | 功能 | 属性值 |
|---|---|---|
| list-style-type | 设置列表符号 | 常用值： none：不显示前面的标识 square：实心方块 disc：圆形 decimal：数字 等等 |
| list-style-position | 设置列表符号位置 | inside：在li里面 outside：在li外面 |
| list-style-image | 自定义列表符号 | url（图片地址） |
| list-style | 复合属性 | 上面的都可以用，没有要求 |
6、表格属性
1、边框相关属性
| 属性名 | 功能 | 属性值 |
|---|---|---|
| border-width | 边框高度 | 像素 |
| border-color | 边框颜色 | 颜色值 |
| border-style | 边框风格 | none：默认值 solid：实线 dashed：虚线 dotted：点线 double：双实线 |
| border | 复合属性 | 上面的都可用，没有要求 |
注意：其他属性页可以用，并不是说只能用在表格中
2、table标签独有的CSS属性
| 属性名 | 作用 | 属性值 |
|---|---|---|
| table-layout | 设置列宽 | atuo：根据单元格中元素长度自动选择 fixed：固定列宽，平均分 |
| border-spacing | 单元格间距 | 像素 |
| border-collapse | 合并单元格边框 | collapse：合并 separate：不合并 |
| empty-cells | 是否隐藏空的单元格 | show：展示 hide：隐藏 |
| caption-side | 设置标题位置 | top：上面 bottom：下面 |
7、背景属性
| 属性名 | 作用 | 属性值 |
|---|---|---|
| background-color | 设置背景颜色 | 颜色 |
| background-image | 设置背景图片 | url（图片地址） |
| background-repeat | 设置背景重复方式 | repeat：重复，铺满整个元素 repeat-x：只在水平方向重复 repeat-y：只在垂直方向重复 no-repeat：不重复 |
| background-position | 设置背景图位置 | 水平方向：left，center，right 垂直方向：top、center、bottom 建议写一个水平一个垂直 |
| background | 复合属性 | 上面的都可用 |
8、鼠标属性
| 属性名 | 作用 | 属性值 |
|---|---|---|
| cursor | 设置鼠标光标样式 | pointer：小手 move：移动图标 text：文字选择器 crosshair：十字架 wait：等待 help：帮助 |
五、盒子模型
1、长度单位
- px：像素
- em：相对元素font-size的倍数
- rem：相对于根字体大小，html标签就是根
- %：相对父元素计算
- 注意：css中长度必须加单位，不然会失效
2、元素的显示模式
- 块元素（block）
- 块级元素
- 特点：
- 在页面中独占一行，不会于任何元素公用一行
- 默认宽度：撑满父元素
- 默认高度：由内容撑开
- 可以通过CSS设置宽高
- 行内元素
- 内联元素
- 特点
- 不独占一行
- 不能由CSS设置宽高
- 行内块元素
- 内联块元素
- 特点
- 不独占一行
- 可以通过CSS设置宽高
3、各元素的显示模式
- 块元素
- 主体结构标签：<html>,<body>
- 排版标签：<h1>~>h6>,<hr>,<p>,<pre>,<div>
- 列表标签：<ul>,<ol>,<li>,<dl>,<dt>,<dd>
- 表格相关标签：<table>,<tbody>,<thead>,<tfoot>,<tr>,<caption>
- <form>与<option>
- 行内元素
- 文本标签：<br>,<em>,<strong>,<sup>,<sub>,<del>,<ins>
- <a>,<label>
- 行内块元素
- 图片：<img>
- 单元格：<td>,<th>
- 表单控件：<input>,<textarea>,<select>,<button>
- 框架标签：<iframe>
4、修改元素的显示模式
通过 CSS 中的 display 属性可以修改元素的默认显示模式，常用值如下
| 值 | 描述 |
|---|---|
| none | 隐藏元素 |
| block | 该元素会被作为块级元素显示 |
| inline | 该元素会被作为行内元素显示 |
| inline-block | 该元素会被作为行内块元素显示 |
5、盒子模型的组成
CSS会把所有HTML元素看成一个盒子，所有的样式也都是基于1这个盒子
- margin（外边距）： 盒子与外界的距离。
- border（边框）： 盒子的边框。
- padding（内边距）： 紧贴内容的补白区域。
- content（内容）：元素中的文本或后代元素都是它的内容。
1、盒子内容区（content）
| 属性名 | 作用 | 属性值 |
|---|---|---|
| width | 设置内容区宽度 | 长度单位 |
| max-width | 设置内容区的最大宽度 | 长度 |
| min-width | 设置内容区的最小宽度 | 长度 |
| height | 设置内容区的高度 | 长度 |
| max-height | 设置内容区的最大高度 | 长度 |
| min-height | 设置内容区的最小宽度 | 长度 |
- 注意：所谓的默认宽度，就是不设置 width 属性时，元素所呈现出来的宽度。
- 总宽度 = 父的 content — 自身的左右 margin 。
- 内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右 padding 。
2、盒子内边距（padding）
| 属性名 | 作用 |
|---|---|
| padding-top | 设置上内边距 |
| padding-bottom | 设置下内边距 |
| padding-left | 设置左内边距 |
| padding-right | 设置右内边距 |
| padding | 复合属性 |
padding复合属性规则
- padding: 10px; 四个方向内边距都是 10px 。
- padding: 10px 20px; 上 10px ，左右 20px 。（上下、左右）
- padding: 10px 20px 30px; 上 10px ，左右 20px ，下 30px 。（上、左右、下）
- padding: 10px 20px 30px 40px; 上 10px ，右 20px ，下 30px ，左 40px 。（上、右、 下、左）
- 注意
- 行内元素的左右内边距是没问题的，但是上下内边距可能不能很好的设置，有可能不占位
3、盒子边框（border）
| 属性名 | 作用 | 属性值 |
|---|---|---|
| border-style | 边框线风格，复合了四个方向的边框风格 | none：默认 solid：实线 dashed：虚线 dotted：点线 double：双实线 |
| border-width | 边框线宽度，复合了四个方向的边框 | 默认为3px |
| border-color | 边框线颜色 | 颜色 |
| border | 复合属性 | 没有顺序和数量要求 |
| border-left border-left-style border-left-width border-left-color border-right border-right-style border-right-width border-right-color border-top border-top-style border-top-width border-top-color border-bottom border-bottom-style border-bottom-width border-bottom-color | 分别设置各个方向的边框样式 | 同上 |
4、盒子外边距（margin）
| 属性名 | 作用 | 属性值 |
|---|---|---|
| margin-left | 左外边距 | 长度 |
| margin-right | 右外边距 | 长度 |
| margin-top | 上外边距 | 长度 |
| margin-bottom | 下外边距 | 长度 |
| margin | 复合属性 | 长度 |
1、margin注意事项
- 子元素的margin是参考父元素的content计算的
- 块级元素和行内块元素可以完美的设置四个方向的margin，但是行内元素不能设置上下的
- margin也可以是auto，如果给一个块元素设置左右margin为auto，则元素处于父元素的水平中间
- margin也可以是负值
2、margin塌陷问题
- 什么事margin塌陷问题？
- 第一个子元素的上margin会被父元素抢走（作用在父元素上），最后一个子元素的下margin也会被父元素抢走。
- 如何解决：
- 给父元素设置不为零的padding
- 给父元素设置不为零的border
- 给父元素设置overflow：hidden
3、margin合并问题
-
什么是 margin 合并？
- 上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。
-
如何解决
- 无需解决
5、处理内容溢出
| 属性名 | 作用 | 属性值 |
|---|---|---|
| overflow | 溢出内容的处理方式 | visible：显示 hidden：隐藏 scroll：显示滚动条，无论是否溢出 auto：自动显示滚动条，由是否溢出决定 |
| overflow-x | 水平溢出内容的处理方式 | 同上 |
| overflow-y | 垂直方向 | 同上 |
- 注意：
- overflow-x 、 overflow-y 不能一个是 hidden ，一个是 visible ，是实验性属性，不 建议使用。
- overflow 常用的值是 hidden 和 auto ，除了能处理溢出的显示方式，还可以解决很多 疑难杂症。
6、隐藏元素的方式
1、visibility属性
visibility属性默认是show，可以设置为hidden，元素会被隐藏，元素看不见，但是会占用位置
2、display属性
display设置为none，就可以隐藏元素，也不占用位置
7、样式的继承
- 会继承的CSS属性：字体属性、文本属性（除了vertical-align）、文字颜色 等。
- 不会继承：边框、背景、内边距、外边距、宽高、溢出方式 等。
- 规律：会继承的都是不会影响布局的属性，也就是和盒子模型无关的属性
8、默认样式
元素默认带的样式，比如<a>标签：下划线，颜色，鼠标
元素的默认样式优先级>继承的样式
9、布局小技巧
- 行内元素和行内块元素可以被父元素当做文本内容处理
- 即可以使用text-align，line-height，text-indent等属性去对齐
- 如何让子元素在父元素中水平居中
- 快元素：给父元素加上margin：0 auto
- 行内元素、行内块元素：给父元素加上text-align：center
- 如何让子元素在父元素中垂直居中
- 块元素：给子元素加上margin-top ：（父元素content - 子元素盒子总高） / 2
- 行内元素、行内块元素：让父元素的line-height = height，并且给每个子元素加上vertical-align：middle，若想让子元素绝对垂直居中，设置font-size：0
10、元素之间的空格问题
为什么会出现空格？
行内元素、行内块元素之间的换行会被解析成为一个空格
如何去掉空格？
- 直接去掉代码中的换行和空格
- 给父元素设置font-size：0， 再给需要显示的字体设置单独的font-size
11、行内块的幽灵空白问题
产生原因：
行内块元素与文本的基线对齐，所以下面会留一点空白
如何解决
- 给元素设置vertical-align属性，使其不是与基线对准
- 可以给父元素设置font-size：0
- 如果父元素中只有一张图片，没有其他东西，则可以设置display：block吗，使其变为块元素
六、浮动
1、浮动简介
在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。
2、浮动的特点
- 脱离文档流
- 不管浮动前是什么元素，浮动后默认的宽高都是被内容撑开（尽可能的小），而且可以设置宽高
- 不会独占一行，可以与其他元素共用一行
- 不会margin合并，也不会margin塌陷，能够完美的设置四个方向的margin
- 不会像行内块一样被当做文本处理
3、浮动带来的影响
对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟 无影响。 对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。
4、解决浮动带来的影响
解决方案：
-
给父元素指定高度
-
给父元素也指定浮动，带来其他影响
-
给父元素指定overflow：hidden
-
在所有浮动元素的后面添加一个块级元素，并设置clear：both
-
给浮动元素的父元素设置伪元素，通过伪元素消除浮动
.parent::after { content: ""; display: block; clear:both; }
布局中的一个原则，设置浮动的时候，要么全都浮动，要么全都不浮动
5、浮动相关属性
| CSS属性 | 功能 | 属性值 |
|---|---|---|
| float | 设置浮动 | left：设置左浮动 right：右浮动 none：不浮动 |
| clear | 清除浮动 清除前面浮动兄弟的影响 | left：清除前面左浮动的影响 right：清除右浮动的影响 both：清除左右浮动的影响 |
七、定位
1、相对定位
如何设置相对定位
- 给元素设置position：relative即可实现相对定位
- 可以设置left、right、top、bottom四个属性调整位置
相对定位的参考点在哪
- 相对自己原来的位置
相对定位的特点
- 不会脱离文档流，元素位置的变化，只是在视觉上变化，不会对其他元素产生影响
- 定位元素的显示层级比其他普通元素高，无论什么定位，显示层级都是一样的，定位元素会覆盖普通元素，后来的元素覆盖前面的元素
- left不能和right一起设置，top和bottom不
- 能一起设置
- 相对定位的元素也能浮动，但不推荐这么做
- 相对定位的元素也能设置magin，也不推荐这么做
绝大多数情况下，相对定位会和绝对定位配合使用
2、绝对定位
如何设置绝对定位
- 给元素设置position：absolute
- 可以使用left、right、top、bottom
绝对定位的参考点是哪
- 参考它的包含块
什么是包含块
- 对于没有脱离文档流的元素：包含块就是父元素
- 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果其祖先元素都没定位，你们包含块就是整个页面）
绝对定位元素的特点
- 脱离文档流，会对后面的兄弟元素、父元素有影响
- left和right不能同时设置，bottom和top也不能同时设置
- 绝对定位、浮动不能同时设置，如果同时设置，浮动会失效，以定位为主
- 绝对定位的元素，也能通过margin调整位置，但不推荐这样做
- 无论是什么元素，设置定位后，都变成了定位元素
什么是定位元素：默认宽高都能被内容撑开，也可以自由设置宽高
3、固定定位
如何设置固定定位
- 给元素设置position：fixed
- 可以使用四个方向的属性值
固定定位的参考点是视口
- 什么是视口：对于PC浏览器来说，视口就是我们看网页那扇窗户
固定定位的特点
- 脱离文档流，会对后面的兄弟元素、父元素有影响。
- left不能和right一起设置，bottom不能和top一起设置
- 固定定位和浮动不能同时设置，同时设置以定位为主
- 固定定位的元素，也能通过margin调整位置
- 也会变成定位元素
4、粘性定位
如何设置粘性定位
- 给元素设置position：sticky
- 可以使用四个方向调整位置，最常用的是top
参考点在哪
离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。
粘性定位元素特点
- 不会脱离文档流
- 粘性定位和浮动可以同时设置，不推荐
- 也可以使用margin调整位置，不推荐
粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。
5、定位层级
- 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的
- 如果发生重叠，后面的元素会覆盖前面的元素
- 可以通过x-index调整元素的显示层级
- z-index 的属性值是数字，没有单位，值越大显示层级越高。
- 只有定位的元素z-index才有效
- 如果z-index大的元素没有覆盖z-index小的元素，那么请检查其包含块的层级
6、定位元素的特殊应用
注意：
- 发生固定定位和绝对定位后，元素的显示模式都变成了定位模式，即内容可以被撑开，也可以设置宽高
- 发生相对定位后，元素依然是之前的显示模式
- 下面只针对绝对定位和固定定位
让定位元素的宽充满包含块
- 块宽想和包含块一直，可以给定位元素同时设置left和right为0
- 高度想和包含块一直，top和bottom设置为0
让定位元素在包含块中居中
-
第一种
left:0; right:0; top:0; bottom:0; margin:auto; -
第二种
left: 50%; top: 50%; margin-left: 负的宽度一半; margin-top: 负的高度一半;
八、布局
1、版心
- 在PC端网页中，一般会有一个固定宽度且水平居中的盒子，来显示页面的主要内容，这就是网页的版心
- 版心的宽度一般是960~1200像素之间
- 版心可以是一个也可以是多个
2、常用布局名词
| 位置 | |
|---|---|
| 顶部导航条 | topbar |
| 页头 | header、page-header |
| 导航 | nav、navigator、navbar |
| 搜索框 | search、search-box |
| 横幅、广告、宣传图 | banner |
| 主要内容 | content、main |
| 侧边栏 | aside、sidebar |
| 页脚 | page-footer、footer |
3、默认重置样式
有的时候我们不需要一些元素的默认样式，所以需要重置
方式一：可以使用全局选择器
*{
margin:0;
padding:0;
...
}
方式二：reset.css
选择到具有默认样式的元素，清空其默认的样式。
经过 reset 后的网页，好似“一张白纸”，开发人员可根据设计稿，精细的去添加具体的样式。
方式三：Normalize.css
Normalize.css是一种最新方案，它在清除默认样式的基础，保留了一部分比较有价值的默认样式
官网地址：http://necolas.github.io/normalize.css/
相对于 reset.css ， Normalize.css 有如下优点：
- 保护了有价值的默认样式
- 为大部分HTML元素提供一般化的样式
- 新增对HTML5元素的设置
- 对并集选择器的使用比较谨慎，有效避免调试工具杂乱
九、CSS3
一、CSS3私有前缀
1、什么是私有前缀
如下代码中的 -webkit- 就是私有前缀
div {
width:400px;
height:400px;
-webkit-border-radius: 20px;
}
2、为什么会 出现私有前缀
- W3C 标准所提出的某个 CSS 特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核， 使用私有前缀来测试该 CSS 特性，在浏览器正式支持该 CSS 特性后，就不需要私有前缀了。
3、常见的私有前缀
-
Chrome：-webkit-
-
Safari：-webkit-
-
Firefox：-moz-
-
Edge 浏览器： -webkit-
-
注意：我们在编码时不用太在意私有前缀，即使我们在照顾老旧浏览器的时候，我们也可以使用构建工具去自动的添加前缀
二、CSS3基本语法
1、新增长度单位
- rem根元素字体大小的倍数
- vw：视口宽度的倍数，10vw就是视口宽度的10%
- vh：视口高度的倍数
- vmax：选择视口宽度和高度中的较大值，也是倍数
- vmin：选择较小值
2、新增颜色设置方式
之前的颜色介绍过
3、新增选择器
CSS3 新增的选择器有：动态伪类、目标伪类、语言伪类、 UI 伪类、结构伪类、否定伪类、伪元素；
4、新增盒模型相关属性
1、box-sizing
可选值：
- content-box：默认值，表示设置的height和width属性是盒子内容区的大小
- border-box：表示设置的height和width属性是盒子的总大小（被称为怪异盒模型）
2、resize调整盒子大小
| 值 | 功能 |
|---|---|
| none | 用户不可以手动调整元素宽高 |
| both | 用户可以调节宽高 |
| horizontal | 用户可以调节元素宽度 |
| vertical | 用户可以调节元素高度 |
3、box-shadow 盒子阴影
-
描述：设置盒子的阴影
-
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
| 可选值 | 功能 |
|---|---|
| h-shadow | 阴影相对元素的水平位置 |
| v-shadow | 阴影相对元素的垂直位置 |
| blur | 模糊程度 |
| spread | 阴影的外延值 |
| color | 阴影颜色 |
| inset | 将默认的外部阴影改为内部阴影 |
-
示例：
/* 写两个值，含义：水平位置、垂直位置 */ box-shadow: 10px 10px; /* 写三个值，含义：水平位置、垂直位置、颜色 */ box-shadow: 10px 10px red; /* 写三个值，含义：水平位置、垂直位置、模糊值 */ box-shadow: 10px 10px 10px; /* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */ box-shadow: 10px 10px 10px red; /* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */ box-shadow: 10px 10px 10px 10px blue; /* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */ box-shadow: 10px 10px 20px 3px blue inset;
4、opacity 不透明度
- 作用：设置元素的不透明度
- 可选值：0~1之间，1表示完全不透明，0表示完全透明
5、新增背景属性
1、 background-origin
- 作用：设置背景的原点
- 可选值：
- padding-box：从padding区域开始 显示图像
- border-box：从border区域开始显示图像
- content-box：从content区域开始显示图像
2、 background-clip
- 作用：设置背景图向外裁剪的区域
- 可选值：
- border-box：从border区域开始向外裁剪
- padding-box：padding区域开始裁剪
- content-box：从content区域开始裁剪
- text：只在元素上显示背景，注意要加上-webkit-
3、background-size
- 作用：设置背景图的尺寸
- 用法：
- 使用px指定宽高
- 使用百分比指定宽高
- auto：背景的真实大小（默认值）
- contain：将整张图片包含在元素中，与原始图片大小的比例一致
- cover：尽可能的显示较多的图片，也是按照等比例缩放，直到完全覆盖元素
4、background复合属性
- 用法：
background: color url repeat position / size origin clip
5、多背景图
-
示例：
/* 添加多个背景图 */ background: url(../images/bg-lt.png) no-repeat, url(../images/bg-rt.png) no-repeat right top, url(../images/bg-lb.png) no-repeat left bottom, url(../images/bg-rb.png) no-repeat right bottom
6、新增边框属性
1、边框圆角
-
使用border-radius属性可以将元素变为圆角
-
用法：
- 设置四个方向
border-radius:10px;- 设置单个方向：
- border-top-left-radius：
- 单个值表示圆的半径
- 两个值分别是椭圆的 x 半径、 y 半径。
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- border-top-left-radius：
2、边框外轮廓
- outline-width：外轮廓宽度
- outline-color
- outline-style：
- none：无轮廓
- dotted：点
- dashed：虚线
- solid：实线
- double：双线
- outline-offset：设置外轮廓和边框的距离，可以是负值
- outline：复合属性
7、新增文本属性
1、文本阴影
- 使用text-shadow属性给文本添加阴影
- 用法：
text-shadow: h-shadow v-shadow blur color;可参考前面的box-shadow
2、文本换行
- white-space属性设置换行方式
- 可选值：
- normal：超储边界自动换行，默认值
- pre：原样输出，不管是否超出边界
- pre-wrap：原样输出，超出边界自动换行
- pre-line：原样输出，超出元素边界自动换行，且只识别文本中的换行，空格 会忽略
- nowrap：强制不换行
3、文本溢出
- text-overflow 属性设置文本内容溢出时的呈现模式。
- 可选值：
- clip：当内联内容溢出时，将溢出部分裁切掉。 （默认值）
- ellipsis：当内联内容溢出块容器时，将溢出部分替换为 … 。
4、文本修饰
- text-decoration属性为复合属性
text-decoration: text-decoration-line || text-decoration-style || text-decoration-color
- 子属性
- text-decoration-line：设置文本装饰线
- none：无装饰，默认值
- underline
- overline
- line-through
- text-decoration-style
- solid
- double
- dotted
- dashed
- wavy
- text-decoration-color
- text-decoration-line：设置文本装饰线
5、文本描边
- -webkit-text-stroke-width：设置宽度
- -webkit-text-stroke-color ：设置文字描边的颜色，写颜色值。
- -webkit-text-stroke ：复合属性，设置文字描边宽度和颜色。
7、新增颜色渐变
1、线性渐变
- 多个颜色之间的渐变， 默认从上到下渐变。
- 使用关键词控制渐变方向
- 调整开始渐变的位置。
2、径向渐变
- 多个颜色之间的渐变， 默认从圆心四散。（注意：不一定是正圆，要看容器本身宽高比）
- 使用关键词调整渐变圆的圆心位置。
- 使用像素值调整渐变圆的圆心位置。
- 调整渐变形状为正圆 。
- 调整形状的半径 。
- 调整开始渐变的位置。
3、重复渐变
无论线性渐变，还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变。
- 使用 repeating-linear-gradient 进行重复线性渐变，具体参数同 linear-gradient 。
- 使用 repeating-radial-gradient 进行重复径向渐变，具体参数同 radial-gradient 。
8、web字体
1、基本用法
可以通过 @font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字 体了。
-
用法：
@font-face { font-family: "情书字体"; src: url('./方正手迹.ttf'); } -
语法（高兼容性写法）
@font-face { font-family: "atguigu"; font-display: swap; src: url('webfont.eot'); /* IE9 */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), url('webfont.woff') format('woff'), /* chrome、firefox */ url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android*/ url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */ }
2、定制字体
- 中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。
- 可使用阿里 Web 字体定制工具：https://www.iconfont.cn/webfont
3、字体图标
- 相比图片更加清晰。
- 灵活性高，更方便改变大小、颜色、风格等。
- 兼容性好， IE 也能支持。
字体图标的具体使用方式，每个平台不尽相同，最好参考平台使用指南，视频中我们是以使用最多 的阿里图标库作为演示。
阿里图标官网地址：https://www.iconfont.cn/
9、2D变换
所有的变换操作都必须先给元素添加转换属性 transform
1、2D位移
2D 位移可以改变元素的位置，具体使用方式如下：
-
transform值：
- translateX：设置水平方向位移，需指定长度值；若指定的是百分比，是参考自身宽度 的百分比。
- translateY：设置垂直方向位移，需指定长度值；若指定的是百分比，是参考自身高度 的百分比。
- translate：一个值代表水平方向，两个值代表：水平和垂直方向。
-
注意：
- 位移和定位非常相似，都不脱离文档流，不会影响到其他元素
- 与相对定位相比，相对定位的百分比值是参考父元素的，定位的百分比是参考自身的
- 浏览器对位移有优化，
- transform可以链式编写
- 位移对行内元素无效
- 位移配合定位，可以使元素水平垂直居中
2、2D缩放
-
让元素放大或缩小，具体使用方式如下：
-
可选值：
- scaleX；设置水平方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小 于 1 缩小。
- scaleY
- scale：同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩 放；两个值分别代表：水平缩放、垂直缩放。
-
可以使用负值
3、2D旋转
- 让元素在二维平面内，顺时针旋转或逆时针旋转
- 值：
- rotate：设置旋转角度
4、2D扭曲
- 值：
- skewX：水平方向
- skewY：垂直方向
- skew：一个值表示水平方向，两个值表示水平和垂直方向
5、变换原点
- =默认的原点是元素的中心
- 修改原点的位置对移动没有影响，对旋转和缩放会产生影响
- 如果提供两个值，表示水平和垂直方向
- 如果只提供一个，若是像素值，表示横坐标，纵坐标取 50% ；若是关键词，则另一个坐标取 50%
transform-origin: 50% 50% ， 变换原点在元素的中心位置，百分比是相对于自 身。—— 默认值
transform-origin: left top ，变换原点在元素的左上角 。
transform-origin: 50px 50px ， 变换原点距离元素左上角 50px 50px 的位置。
transform-origin: 0 ，只写一个值的时候，第二个值默认为 50% 。
10、3D变换
1、开启3D空间
要进行3D变换操作，必须在元素的父元素开启3D空间
- 使用transform-style
- 可选值：
- flat：让子元素位于此元素的二维平面（默认值
- preserve-3d：让子元素位于此元素的三维平面
2、设置景深
- 什么是景深：就是观察者和z=0平面的距离，能让产生3D变换的元素产生透视效果，更加立体
- perspective：
- none：不指定透视距离
- 长度：指定距离，不允许为负值
3、设置透视点位置
观察者的位置，默认的透视点在元素的中间
- perspective-origin：400px 300px
4、3D位移
在2D位移的基础上，添加了z轴方向的移动
- transform可选值：
- translateZ：设置长度，不能为百分比
- translate3d：三个值，不能省略
5、3D旋转
在2D旋转的基础上，添加了以X轴和Y轴作为旋转轴的旋转
- transform可选值：
- rotateX：以X轴作为旋转轴旋转
- rotateY：以Y轴
- rotate3d：设置3个角度，分别是X轴，Y轴，Z轴的旋转度数
6、3D缩放
添加了沿Z轴方向的缩放
- transform值：
- scaleZ：沿Z轴的缩放比例，1表示不缩放
- scale3d：不允许省略
7、多重变换
transform设置多个值
8、背部可见性
- backface-visibility：当旋转到元素背部的时候，是隐藏还是可见
- visible：表示可见
- hidden
11、过渡
1、transition-property
- 作用：设置哪些属性需要过渡
- 常用值：
- none：不过度任何属性
- all：过渡所有可以过渡的属性
- 具体某个属性名
- 注意：只有属性是数值的属性才能产生过渡效果
- 常见的支持过渡的属性有：颜色、长度值、百分比、 z-index 、 opacity 、 2D 变换属 性、 3D 变换属性、阴影。
2、transition-duration
- 作用：指定过渡的持续时间
- 值：s或ms
3、transition-delay
- 作用：指定延迟时间
4、transition-timing-function
- 作用：指定过渡类型
- 值：
- ease：平滑过渡（慢快慢）
- linear：线性过渡
- ease-in：慢快
- east-out：快慢
- ease-in-out：慢快慢
- step-start：直接跳到终点
- step-end：等到到达需要的持续时间时，直接跳到终点
- steps( integer,?) ： 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的 步数。第二个参数取值可以是 start 或 end ，指定每一步的值发生变化的时间点。第二个 参数默认值为 end 。
- cubic-bezie ( number, number, number, number)： 特定的贝塞尔曲线类型
- 在线制作贝赛尔曲线：https://cubic-bezier.com
5、transition复合属性
第一个值表示持续时间，第二个表示延迟时间
12、动画
1、动画的基本使用
简单定义方式
/*写法一*/
@keyframes 动画名 {
from {
/*property1:value1*/
/*property2:value2*/
}
to {
/*property1:value1*/
}
}
完整定义方式
@keyframes 动画名 {
0% {
/*property1:value1*/
}
20% {
/*property1:value1*/
}
40% {
/*property1:value1*/
}
60% {
/*property1:value1*/
}
80% {
/*property1:value1*/
}
100% {
/*property1:value1*/
}
}
2、动画的属性
- animation-name：给元素定义具体的动画
- animation-duration ：设置动画所需时间
- animation-delay ：设置动画延迟
- animation-timing-function ，设置动画的类型，常用值与过渡的一致
- animation-iteration-count ，指定动画的播放次数
- 数字：指定具体次数
- infinite：无限次
- animation-direction ，指定动画方向
- normal：正常
- reverse：反过来
- alternate：先正常再反过来，交替进行
- alternate-reverse：先反过来再正常，交替进行
- animation-play-state：动画播放状态
- running
- pause：暂停
- animation：复合属性，只设置一个时间表示 duration ，设置两个时间分别是： duration 和 delay ，其他属性没有数量和 顺序要求
13、多列布局
- 作用：专门用于实现类似于报纸的布局
- 属性：
- column-count：列数，数字
- column-width：列宽，长度
- columns：复合属性，列数和宽，取较小值
- column-gap：列边距，长度
- column-rule-style：设置列与列之间的边框样式
- column-rule-width：边框宽度
- column-rule-color：颜色
- column-rule：复合属性
- column-span：指定是否跨列，none或all
14、伸缩盒模型
1、伸缩容器、伸缩项目
- 伸缩容器：设置了flex的元素，就是伸缩容器
- display：flex或者display：inner-flex
- 伸缩项目：伸缩容器中的子元素自动成为了伸缩项目，注意只有子元素
- 一旦成为了伸缩项目，元素就会块状化
2、主轴和侧轴
- 主轴：伸缩项目沿着主轴的方向排列，默认水平，自左而右
- 侧轴：与主轴垂直的是侧轴，默认垂直，自上而下
3、主轴方向
- 属性：fle-direction
- 值：
- row：水平方向自左向右，默认值
- row-reverse：水平方向自右向左
- column：垂直方向自上而下
- column-reverse：垂直方向自下而上
- 改变了主轴的方向，侧轴的方向也随着变化
4、主轴换行方式
- 属性：flex-wrap
- 值：
- nowrap：不换行（默认值）
- wrap：自动换行，伸缩容器不够就换行
- wrap-reverse：反向换行
5、 flex-flow复合属性
上面两者的复合属性，没有顺序要求
6、主轴对齐方式
- 属性：justify-content
- 值：
- flex-start：主轴起点对齐（默认值
- flex-end：主轴终点对齐
- center：居中
- space-between：均匀分布，两端对齐（最常用）。
- space-around：均匀分布，两端距离是中间距离的一半。
- space-evenly：均匀分布，两端距离与中间距离一致。
7、侧轴对齐方式
1、一行的情况
- 属性：align-items
- 值：
- flex-start：侧轴起点对齐
- flex-end：侧轴终点对齐
- center：侧轴居中
- baseline：伸缩项目的第一行文字的基线对齐
- strench：如果伸缩项目未设置高度，则伸缩项目的高度占据整个容器（默认值
2、多行情况
- 属性：align-content
- 值：
- flex-start：侧轴的起点对齐
- flex-end ：与侧轴的终点对齐。
- center ：与侧轴的中点对齐。
- center ：与侧轴的中点对齐。
- space-around ：伸缩项目间的距离相等，比距边缘大一倍。
- space-evenly : 在侧轴上完全平分。
- stretch ：占满整个侧轴。—— 默认值
8、flex实现水平垂直居中
方式一：在父元素中开启flex，随后使用justify-content和align-items实现水平垂直居中
方式二：父容器开启 flex 布局，随后子元素 margin: auto
9、伸缩性
1、flex-basis
设置主轴的基准长度，会使设置的高度或者宽度失效
2、flex-grow
- 用法：
- 默认为0，即伸缩容器即使有富余也不分配
- 如果所有伸缩项目的flex-grow值都是1，则剩余的空间均匀分配给所有的伸缩项目
- 如果值不一样，则按照flex-grow的比例分配
3、flex-shrink
- 用法
- 默认值为1
- 按照自身的宽或者高度和flex-shirink综合考虑得出自身应该缩小多少
10、flex复合属性
- 属性：flex
- 作用：复合了flex-grow、flex-shrink、flex-basis三个属性
- 用法：设置三个值
11、项目排序
order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0 。
12、单独对齐
- 通过 align-self 属性，可以单独调整某个伸缩项目的对齐方式
- 默认值为auto，表示继承父元素的align-items属性
15、响应式布局
媒体查询
@media all{
/*CSS-Code;*/
}
媒体类型
- 值：
- all：检测所有设备
- screen：检测电子屏幕，包括电脑屏幕、手机等等
- print：打印机
- 完整列表请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media
媒体特征
- 值：
- width：检测视口宽度
- max-width：检测视口最大宽度
- min-width：检测视口最小宽度
- height：检测视口高度
- min-height：最小高度
- max-height：最大高度
- device-height：设备屏幕的高度
- min-device-height：设备最小高度
- max-device-height：设备最大高度
- device-width：设备最大宽度
- min-device-width：设备最小宽度
- max-device-width：设备最大宽度
运算符
- 值
- and
- ，或or
- not
- only
- 示例
@media screen and (min-width:200px) and (max-width:1000px) {
/*CSS-Code;*/
}
结合外部样式
<link rel="stylesheet" media="具体的媒体查询" href="mystylesheet.css">
16、BFC
开启了BFC能解决什么问题
- 元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。
- 元素开启 BFC 后，自己不会被其他浮动元素所覆盖。
- 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。
如何开启BFC
- 根元素
- 浮动元素
- 绝对定位、固定定位的元素
- 行内块元素 表格单元格： table 、 thead 、 tbody 、 tfoot 、 th 、 td 、 tr 、 caption
- overflow 的值不为 visible 的块元素
- 伸缩项目
- 多列容器
- column-span 为 all 的元素（即使该元素没有包裹在多列容器中）
- display 的值，设置为 flow-root
2392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
