前端小白学习路线及知识点汇总（二）-- CSS
内容为本人在学习前端的同时所记录的笔记，方便自己记忆的同时希望能帮到新手们，如有不详细部分请见谅
CSS规则由两个主要部分构成：选择器以及一条或多条声明
CSS要写到<style></style>之中
格式为 选择器 {样式} ：即 给谁改样式{改什么样式}
一、 选择器：选择器分为基础选择器和复合选择器。
（一）基础选择器
- 基础选择器：基础选择器是由单个选择器组成的，基础选择器又分为：标签选择器、类选择器、id选择器、通配符选择器
（1） 标签选择器：直接用标签名作为选择器，只能修改全部同名标签
（2） 类选择器：可单独选一个或某几个标签 定义： .类名{样式}
用的时候在标签中用 class = “类名”调用。
口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用
多类名：调用时class可以调用多个类，之间用空格隔开
（3） id选择器：定义： #id名{样式}
用的时候在标签中用id = “id名”调用，但只能调用一次
口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用
（4） 通配符选择器：表示选取页面中所有元素（标签） 定义：*{样式}
2．字体属性：
（1）字体系列：CSS中使用font-family属性定义文本的字体系列
（2）字体大小：CSS中使用font-size属性定义字体大小
px（像素）为网页最常用的单位
标题标签较为特殊，要单独指定文字大小
（3）字体粗细：CSS中使用font-weight属性定义字体粗细
（4）文字样式：CSS中使用font-style属性设置文本的风格
（5）复合属性：{font：font-style font-weight font-size/line-height font- family；} 位置不可颠倒，空格隔开，不需要的可省略但必须有size和family
3.文本属性：（CSS Text属性定义文本的外观）
（1）文本颜色：color 属性值有三种形式：英文单词，十六进制，RGB代码
（2）对齐文本：text-align属性用于设置文本内容水平对齐方式，属性值：left ，right，center
（3）装饰文本：text-decoration属性规定添加到文本的修饰，属性值：none，underline，overline，line-through
（4）文本缩进：text-indent属性用来指定文本第一行的缩进，一般是段落的首行
缩进，属性值：XX px；XX em （em为当前元素一个文字的大小）
（5）行间距：line-height属性用于设置行间的距离（行高），属性值：XX px
行间距指的是：字的高度+上下间距
4.CSS引入方式：（三种样式表）
（1）内部样式表（嵌入式）：放入HTML内部，单独放到一个<style>标签中
（2）行内样式表（行内式）：在元素标签内部的style属性中设定CSS样式，适合于修改简单的样式
（3）外部样式表（链接式）：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中引用
I. 新建一个 .css文件，把所有CSS代码放入其中
II. 在HTML页面中，使用<link>标签引入这个CSS文件
（二）复合选择器：常用的：后代选择器、子选择器、并集选择器、伪类选择器 - 后代选择器（包含选择器）：选择父元素里的子元素，语法：元素1 元素2{样式}
元素2是元素1的后代，之间一定要加空格 - 子元素选择器（子选择器）：选择某元素最近一级的子元素，选亲儿子元素
语法：元素1>元素2{样式} - 并集选择器：可以选择多组标签，同时为他们定义相同标签
语法：元素1，元素2{样式} 表示同时选择元素1和元素2
任何形式的选择器都可作为并集选择器的一部分 ，用于集体声明 - 伪类选择器：向某些选择器添加特殊的效果，或选择第1个，第n个元素
用冒号（：）表示
（1） 链接伪类选择器：
a：link ：选择所有未被访问的链接
a：visit ：选择所有已被访问的链接
a：hover：选择鼠标指针位于其上的链接
a：active：选择活动链接（鼠标按下未谈起的链接）
要按照LVHA顺序声明，a链接具有默认样式，实际工作要单独指定样式
（2） ：focus伪类选择器：选取获得焦点的表单元素
焦点就是光标，<input>类表单元素才能获取
二、 元素的显示模式
元素的显示模式是指元素（标签）以什么方式显示，如div自己占一行。
HTML元素一般分为块元素和行内元素两种类型
1.块元素：
常见的块元素有<h1>-<h6>、<p>、<div>、<ul>、<ol>、<li>
块元素特点：
（1） 自己独占一行
（2） 高度、宽度以及内外边距都可控制
（3） 宽度默认是容器（父级宽度）的100%
（4） 是一个容器及盒子，里面可以放行内或块元素
2.行内元素：
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>，有时称行内元素为 内联元素
行内元素特点：
（1） 相邻行内元素在一行上，一行可以显示多个
（2） 高、宽直接设置是无效的
（3） 默认宽度就是它本身内容的宽度
（4） 行内元素只能容纳文本或者其他行内元素
注意：链接里不能再放链接，特殊情况链接<a>里可以放块级元素，但是给<a>转换一下块级模式最安全
3.行内块元素：
<img /><input /><td>,同时具有块元素和行内元素的特点。
行内块特点：
（1） 和相邻行内元素在一行上，之间有空白，一行可多个
（2） 默认宽度是他本身内容的宽度
（3） 高度，行高以及内外边距都可控制
元素显示模式转换：
1.display：block 转换为块级元素
2.display：inline 转换为行内元素
3.display：inline-block 转换为行内块
三、 CSS的背景
- 背景颜色：background-color 属性值：颜色，默认为transparent（透明）
- 背景图片：background-image 属性值：url（地址）或者none
- 背景平铺：background-repeat 属性值： repeat， no-repeat， repeat-x，repeat-y
- 背景位置：background-position
属性值：x ，y （x和y可以为方位名词或精确单位）
（1） 方位名词 position ： top | center | bottom |left |right|
（2） 精确单位 length ：百分数 或 数字加单位
跟方位名词的x和y顺序随意，跟精确单位必须先x后y
属性值也可是 混合单位 - 背景图像固定（背景附着）：background-attachment
设置背景图片是否随着页面其余部分滚动
属性值：scroll 随对象内容滚动 | fixed 背景图像固定 - 背景属性复合：
background ： 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 - 背景颜色半透明：background ：rgba（0,0,0,0.3）；
其中的a 为透明度： 0 为全透明 ，1为不透明
四、 CSS的三大特性
CSS有三个重要特性：层叠性、继承性、优先级
- 层叠性：给相同选择器设置相同样式，此时一个样式会覆盖另一个冲突样式
样式冲突：就近原则；样式不冲突：不会层叠 - 继承性：子标签会继承父标签的某些样式，如文本颜色和字号
text- ，font- ，line- 这些元素可以继承，以及color属性 - 优先级：同一个元素指定多个选择器，就会有优先级的产生
选择器权重：
（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重要的 ： ∞无穷大
页面布局三大核心：盒子模型，浮动和定位
五、 网页布局
（一）CSS盒子模型：Box Model（网页布局本质就是利用CSS摆盒子）
盒子模型包括：border边框，margin外边距，padding内边距和content实际内容
- 边框 border ：由边框宽度，边框样式和边框颜色组成
border：border-width||border-style||border-color
（边框样式：solid实线，dashed虚线，dotted点线）
边框复合写法：border：1px solid red ；没有顺序
边框分开写法：border-top/bottom/left/right - 表格的细线边框：border-collapse
属性值：collapse，表示相邻表格边框合并在一起 - 内边距 padding 即边框与内容之间的距离
padding-left/right/top/bottom 单位为 px
padding复合属性：
（1） Padding 跟一个值表示四个边距都是一样的
（2） padding跟两个值表示 上下是前者 ，左右是后者
（3） padding跟三个值表示 上是第一个，左右是第二个，下是第三个
（4） padding跟四个值表示 上，右，下，左 ，顺时针 - 外边距 margin 控制盒子和盒子之间的距离
margin-left/right/top/bottom 单位为px
复合属性规则和padding相同
外边距典型应用：
（1） 可以让盒子水平居中 （条件） ：盒子必须指定了宽度；盒子的左右外边距设置为auto。但只是块级元素
（2） 行内元素和行内块元素水平居中是给其父元素添加text-align:center - 外边距的合并：
（1） 上下相邻两个格子都设置外边距 最后盒子的距离不是两外边距之和，而是较大的那个外边距（相邻块元素外边距的合并）
（2） 父子关系的盒子，父元素和子元素都有外边距时，外边距为较大的
（嵌套块元素外边距的塌陷）
解决方法：为父元素定义边框；为父元素定义内边距；为父元素添加overflow:hidden - 清除内外边距：网页元素带默认内外边距，不同浏览器默认值不同，需要清除
*{padding：0；margin：0；}
去掉li前面的小圆点： list-style：none - 圆角边框：
border-radius ： length ； （正方形盒子单位可以是数值或百分比） - 盒子阴影：
语法 box-shadow ：h-shadow v-shadow blur spread color inset
h/v-shadow 必需。水平/垂直阴影的位置，可为负值
blur 模糊距离 ；spread 阴影的尺寸 ；color 阴影颜色
inset 将外部阴影（outset）改为内部阴影 - 文字阴影（不重要）：
语法 text-shadow ：h-shadow v-shadow blur color
（二）CSS浮动
可以让多个块级元素一行内排列显示
多个块级元素纵向排列找标准流，横向排列找浮动 - 什么是浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
语法 ：选择器{float：属性值；}
属性值：none 不浮动（默认）；left 向左浮动 ；right 向右浮动 - 浮动特性：
（1） 浮动元素会脱离标准流（脱标）
a） 脱离标准普通流的控制，移动到指定位置
b） 浮动的盒子不再保留原先的位置
（2） 浮动的元素会一行内显示并且元素顶部对齐
浮动元素互相贴在一起无缝隙，若父级宽度装不下这些浮动盒子，则另起一行对齐
（3） 浮动元素具有行内块元素特性
任何元素都可设置浮动，无论是什么元素都变成行内块元素 - 浮动元素常和标准流父级搭配使用
方法为：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
注意：
1） 浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2） 一个元素浮动了，理论上其余的兄弟元素也要浮动
浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流 - 清除浮动
1）清除浮动本质就是清除浮动元素造成的影响
2）如果父盒子本身有高度，则不需要清除浮动
3）清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流
语法： 选择器{clear：属性值；}
属性值：left/right/both :清除左/右/左右侧的浮动的影响
方法：
1）额外标签法也称为隔墙法，是W3C推荐的做法
在浮动元素末尾再加一个标签 如 <div style=“clear:both”></div>
加的标签必须是块级元素
2）父级添加overflow属性，属性值为hidden、auto、scroll
3）父级添加 ：after伪元素 4）父级添加双伪元素
（三）CSS定位
定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子
-
定位组成：
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式。
边偏移则决定了该元素的最终位置
（1）定位模式：通过CSS的position属性来设置，属性值可分为四种：static 静态定位；relative 相对定位；absolute 绝对定位；
fixed 固定定位
I.静态定位static：静态定位按照标准流特性，没有边偏移
II.相对定位relative：指元素在移动位置时，是相对于它原来的位置来说的，而且移动走后原来位置还保留（不脱标）#
III.绝对定位absolute：指元素在移动位置时，是相对它祖先元素来说的
绝对定位特点：
1） 如果没有祖先元素或者祖先元素没定位，则以浏览器为准
2） 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置
3） 绝对定位不在占有原来的位置（脱标）#
子绝父相：意思是子级是绝对定位的话，父级要用相对定位
IV.固定定位fixed： 使元素固定于浏览器可视区的某一位置
1） 以浏览器的可视窗口为参照点，盒子要给宽度
和父元素没有任何关系；不随滚动条滚动
2） 固定定位不占有原先的位置（脱标）
让固定定位盒子始终贴着版心右侧显示方法：
a. 让固定定位的盒子left：50%
b. 让固定定位的盒子margin-left：版心宽度的一半
V.粘性定位sticky：是相对定位和固定定位的混合
a. 以浏览器的可视窗口为参照点
b. 粘性定位占有原先的位置
c. 必须添加top、bottom、right、left其中一个才有效 -
定位叠放次序：当出现盒子重叠情况，用z-index来控制盒子的前后次序（z轴） 选择器{z-index：数值；}
数值可正可负可零，数值越大盒子越靠上，没有数值则后来居上 -
行内元素添加绝对或固定定位，可直接设置宽高
-
块级元素添加绝对或固定定位不给宽高，默认为内容大小
-
脱标的盒子不会触发外边距塌陷（浮动元素、定位元素都不会触发外边距合并问题）
-
浮动元素会压住后边的盒子不会压住内容，定位元素都会压住
（2）边偏移
有四个属性：top、bottom、left、和right 属性值为数值px
元素的显示与隐藏：（让一个元素在页面隐藏或显示）
- display属性*：用于设置一个元素应如何显示
display：none；隐藏对象
display：block；除了转换为块级元素，同时还有显示元素的意思
display隐藏元素后，不在占有原来的位置 - visibility属性：
属性值：inherit 继承父对象的可见性，visible 可见，hidden 隐藏，collapse 隐藏表格的行或列
visibility隐藏元素后，继续占有原来的位置 - overflow属性： 溢出显示隐藏对溢出的内容的操作
属性值：visible 可见，auto 溢出时显示滚动条，hidden 隐藏，scroll 溢出部分显示滚动
有定位的盒子慎重用隐藏，因为会隐藏多余的部分
文字溢出省略号表示
-
单行文字
第一步：先强制一行内显示文本
white-space:nowrap；（默认为normal自动换行）
第二步：超出的部分隐藏
overflow：hidden；
第三步：文字用省略号替代超出部分
text-overflow：ellipsis； -
多行
CSS属性书写顺序：
（1）布局定位属性：display/position/float/clear/visibility/overflow
（2）自身属性：width/height/margin/padding/border/background
（3）文本属性：color/font/text-decoration/text-align/vertical-align/ white-space/break-word
（4）其他属性（css3）：content/cursor/border-radius/box-shadow/text-shadow/ background:linear-gradient…
建议display第一个写，毕竟关系到模式
浮动的盒子不会有外边距合并的情况出现
精灵图Sprites
精灵技术目的：为了有效减少服务器接收和发送请求的次数，提高页面的加载速度
精灵技术核心：
- 精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图
- 移动背景图片位置，用background-position
- 移动的距离就是这个目标图片的x和y坐标
- 使用精灵图的时候一定要精确测量，每个小背景图片的大小和位置
字体图标iconfont
主要用于显示网页中通用的、常用的一些小图标，可提供一种高效的图标使用方式，展示的是图标，本质属于字体
优点：
- 轻量性：一个图标字体比一系列图像要小，一旦字体加载，图标马上渲染出来，不用服务器请求
- 灵活性：本质是文字，可随意变换颜色、产生阴影、透明效果、旋转等
- 兼容性：几乎支持所有的浏览器
注意：字体图标不可代替精灵图，只是对工作中图标部分技术的提升和优化
CSS用户界面样式
- 鼠标样式 cursor 目标上的鼠标为何中光标形状
li{cursor：pointer；}
属性值：default 小白 ，pointer 小手 ，move 移动（十字架形状），text 文本
not-allowed 禁止 - 表单轮廓线 outline
input{outline：0或none；} 可去掉表单文本框的蓝色边框线 - 防止拖拽文本域 resize
textarea{resize：none；} 可去掉文本域拖拽按钮
注意：文本域代码一定要写到一行，防止第一个光标前有空格
vertical-align属性应用
使用场景：用于设置图片和表单和文字垂直对齐
官方解释：用于设置一个元素的垂直对齐方式，但只能用于行内元素和行内块元素
属性值：baseline 默认 基线对齐 ，top 顶线对齐 ，middle 中线对齐 ，
bottom 底线对齐
CSS3新特性
一、 CSS3新增选择器
（1） 属性选择器
可根据元素特定属性来选择元素，可不用借助类或id选择器
如 input[value]{属性：属性值}
（2） 结构伪类选择器
根据文档结构来选择元素，常用于根据父级选择器里面的子元素
其中的 nth-child：
（3） 伪元素选择器（重点）
可以利用CSS创建新标签元素，而不需要HTML标签，以简化HTML结构
a） ：：before 在元素内部的前面插入内容
b） ：：after 在元素内容的后面插入内容
语法 element::before{} 必须要有content属性
伪元素选择器和标签选择器一样，权重为1
二、 CSS3盒子模型
用box-sizing来指定盒子模型，有两个值：即可指定为content-box、border-box
（1） box-sizing：content-box盒子大小为width + padding + border（默认）
（2） box-sizing：border-box盒子大小就为width，无论其他值如何变
注意：若盒子模型我们改为了box-sizing：border-box，那么padding和border就不会撑大盒子了（前提是padding和border不会超过width宽度）
三、 CSS3其他特性（了解）
（1） 图片变模糊
filter属性用法：filter：函数（）
如filter：blur（数值）； blur为变模糊函数，类似的函数还很多
（2） 计算盒子宽度width：calc函数
用法width：calc（） 括号中可填数值的计算
四、 CSS3过渡（重点）
过渡（transition）可以在不使用flash动画或JS情况下，在元素从一种样式变换为另一种样式为元素添加效果，经常和 ：hover搭配使用
用法： transition：要过渡的属性 花费时间 运动曲线 何时开始；
（1） 属性：想要变化的CSS属性，宽高、背景颜色、内外边距都可以，若要所有属性都变化，只需要写一个all
（2） 花费时间：单位是 秒（必须写单位）
（3） 运动曲线（可省略）：默认是ease
（4） 何时开始（可省略）：单位是 秒（必须写单位）可以延迟触发时间 默认是0s
谁做过渡给谁加
五、 CSS3转换
转换（tranform）是CSS3中具有颠覆性的特征、，可以实现元素的位移、旋转、缩放等
移动：translate ；旋转：rotate ；缩放：scale
（一） 2D转换
- 二维坐标系
2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系 X轴水平向右，Y轴竖直向下 - 2D转换之移动translate
2D移动是2D转换里的一种功能，可以改变元素在页面中的位置，类似定位
（1） 语法：transform：translate（x，y）；或者分开写
transform：translateX（n）；transform：translateY（n）；要有单位
（2） 重点
定义2D转换中的移动，沿着X和Y轴移动元素
translate最大的优点是不会影响其他元素的位置
translate中的百分比单位是相对于自身元素的translate（50%，50%）
对行内标签没有效果 - 2D转换之旋转rotate
2D旋转指的是让元素在二维平面内顺时针旋转或逆时针旋转
（1） 语法：transform：rotate（度数）
（2） 重点：
rotate里面跟度数，单位是deg，如rotate（45deg）
角度为正时，顺时针，为负，逆时针
默认旋转的中心点是元素的中心点 - 2D转换中心点
通过transform-origin设置元素转换的中心点
（1） 语法：transform-origin：x y ；
（2） 重点：
注意后边的x和y使用空格隔开
x y 默认转换的中心点是元素的中心点（50% 50%）
还可以给x y设置像素或者方位名词（top bottom left right center） - 2D转换之缩放scale
缩放就是可以让元素放大和缩小
（1） 语法：transform：scale（x，y）；
（2） 重点：
其中的x和y 使用逗号分隔，代表倍数，无单位
transform：scale（1,1）：宽高都放大一倍，相当于没有放大
transform：scale（2,2）：宽高都放大两倍
transform：scale（2）：只写一个参数，相当于两个参数一样
transform：scale（0.5,0.5）：缩小一半
scale缩放的最大优势：可以设置转换中心点缩放，默认以中心点缩放，不影响其他盒子
2D转换综合写法：同时使用多个转换，格式为：transform：translate（） rotate（） scale（）…等 ； 其顺序会影响转换的效果：如先旋转会改变坐标轴方向
当同时有位移和其他属性的时候，要将位移放在最前面
（二） CSS3动画
动画（animation）是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
1.动画的基本使用
制作动画分为两步：定义动画；调用动画
（1） 定义动画：用keyframes定义动画：
@keyframes 动画名称 {
0%{ 样式 }
100%{ 样式 } }
动画序列：
0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
在@keyframes中规定某项CSS样式，就可以创建动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果
可以用关键词from和to，等价于0%和100%
（2） 使用动画：
animation-name：动画名称； （调用动画）
animation-duration：持续时间；（持续时间）
两者不可缺少，都是写在CSS中的
2.动画常用属性
动画速度曲线细节
3.动画简写属性
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态；前两个属性不能省略
简写形式中不包含play-state，要是用就单写
（三） 3D转换
特点：近大远小；物体后面遮挡不可见
1.三维坐标系
x轴：水平向右 x右边是正，左边是负
y轴：竖直向下 y下面是正，上面是负
z轴：垂直屏幕 z往外面是正，往里面是负
2.3D移动translate3d
3D移动是在2D移动的基础上多加了一个可以移动的方向就是z轴
transform：translateX（100px）：仅仅在X轴移动
transform：translateY（100px）：仅仅在Y轴移动
transform：translateZ（100px）：仅仅在Z轴移动，单位一般是px
transform：translate3d（x，y，z）： xyz指的是移动的方向和距离
注意：合写方式中，xyz不可省略，如果没有就写0
3.透视 perspective
如果想在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
模拟人类的视觉位置，可以认为安排一只眼睛去看
透视也称为视距：视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面的成像越大，越远成像越小
透视的单位是像素px
透视写在被观察元素的父级元素上面
d：就是视距，即眼睛到屏幕的距离； z：就是z轴
4.3D旋转rotate3d
3D旋转指的是可以让元素在三维平面沿着XYZ轴或自定义轴进行旋转
（1） 语法
transform：rotateX（45deg）：沿着x轴正方向旋转45度
transform：rotateY（45deg）：沿着y轴正方向旋转45度
transform：rotateZ（45deg）：沿着z轴正方向旋转45度
transform：rotate3d（x，y，z，deg）：沿着自定义轴旋转deg（了解）
自定义轴中x，y，z为轴的矢量，最后的转轴为矢量和
（2）左手法则：大拇指指向正轴方向，四指弯曲方向为旋转方向（正值）
5.3D呈现transform-style*
1）控制子元素是否开启三维立体环境
2）transform-style：flat子元素不开启3d立体空间 默认
3）transform-style：preserve-3d；子元素开启立体空间
4）代码写给父级，但影响的是子盒子
六、 浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加
[1] -moz-：代表Firefox浏览器私有属性
[2] -ms-：代表IE浏览器私有属性
[3] -webkit-：代表Safari、Chrome私有属性
[4] -o-：代表Opera私有属性
背景线性渐变：
语法：background：linear-gradient（起始方向，颜色1，颜色2，…）；
background：-webkit-linear-gradient（left，red，blue）；
background：-webkit-linear-gradient（left top，red，blue）；
使用时要加浏览器私有前缀；
方向可以是方位词也可以是度数，省略默认top
3848
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
