本文章部分观点引之www.baidu.com与edu.aliyun.com与www.runoob.com
之前写HTML是为了自己整理，没想到忘记了原力计划的事，文章质量有点不尽人意，不过HTML，CSS，JavaScript都是我自己整理提纲和疏漏的，所以不会太细节，只是为了省去百度的麻烦，希望大家理解~
CSS
CSS（Cascading Style Sheets）层叠样式表，主要用于给HTML网页来设置外观或者样式，例如HTML网页中的文字大小、颜色、字体、网页背景颜色等等。
语法规则：选择器{属性:属性值; 属性:属性值;}
例：h1{color:red; font-size:14px;}
- CSS代码是由选择器和一对括号组成；
- 大括号里面由一条一条的声明语句组成；
- 每一条语句都使用英文状态下的分号；
- 每一条语句都由属性和属性值构成；
- 属性与值外一般不加引号，值为数值时一般有单位；
- CSS中不能出现HTML标签。
书写方式
嵌入式：将CSS代码嵌入在HTML文件中，使用<style>标签，一般在<head>中书写；
外链式：单独写一个后缀为“.css”的CSS文件，然后在<head>中使用<link>将这个文件链接到HTML中；CSS文件不能单独运行；CSS文件中只允许使用CSS的代码，即选择器{属性：属性值；}；在<head>可以书写多个<link>，即可链接多个CSS样式文件；
行内式：在标签中可使用style属性，如：<p style="属性:值">文本</p>
要注意，如果有多个CSS样式，使用优先级为：行内式 > 嵌入式 > 外链式。
注释
/* 注释内容 */使用 ctrl + shift + / 可以快捷注释。
选择器
选择器分为四类：基本选择器、复合选择器、伪类选择器、属性选择器。
基本选择器
- 通用选择器：*{属性:值;}
用于匹配所有的HTML标签，例：*{margin:0px;}
- 标签选择器：标签名{属性:值;}
匹配对应的HTML标签，例：p{font-size:14px;}
- 类选择器：.class属性值{属性:值;}（注意class属性值前面有个点）
匹配有指定的class属性的元素，例：.box{width:80px;}（这里的box是一个div的class属性值）
- id选择器：#id属性值{属性:值;}
匹配有指定id的HTML标签，只能使用一次，例：#title{font-size:14px;}
复合选择器
- 多元素选择器：选择器1, 选择器2{属性:值;}
同时匹配选择器1与选择器2，多个选择器之间用英文逗号分隔，例：p,h1,h3{margin:0px;}
- 后代选择器：E F{属性:值;}
匹配E元素下的所有的F元素，E和F之间用空格分隔，例：div ul li{width:14px;}
- 子元素选择器：E>F{属性:值;}
匹配所有E元素的下一层中的F元素，而后代选择器可以匹配很多层元素，例：div>h2{font-size:14px;}
- 相邻元素选择器：E+F{属性:值;}
匹配紧挨着的两个平级元素E和F，且F必须在E的下面，例：div+p{color:#f00;}
伪类选择器
用于给超级链接的不同状态设置样式。
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
设置状态要按照顺序：link->visited->hover->activer。
属性选择器
通过标签的属性名与属性值来匹配元素，attr(attribute，属性)，val(value，值)。
[attr]：匹配所有具有attr属性的元素，不用考虑它的值，例：[align]{color:red;}或者p[align]{color:red;}
[attr="val"]：匹配指定属性等于指定值的元素，例：[align="center"]{color:red;}
[attr^="val"]：匹配以指定值开头的所有元素，例：[color^="#ff"]{border:1px;}匹配颜色为#ff开头的元素；
[attr$="val"]：匹配以指定值结尾的所有元素，例：[color￥="00"]{border:1px;}匹配颜色为00结尾的元素；
[attr*="val"]：匹配包含指定值的所有元素，例：[color*="aa"]{border:1px;}匹配颜色中包含aa的元素。
尺寸样式属性
height：auto(自动)、使用px定义高度、使用%定义百分比；
width：auto(自动)、使用px定义宽度、使用%定义百分比；
例：div{width:600px; height:300px;}表示宽600个像素点，高300个像素点的div区域；
注意：只有块级元素可以设置宽高，行内元素不能设置，设置了也不会显示。
字体属性
| Property | 描述 |
|---|---|
| font | 在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本 |
| font-weight | 指定字体的粗细 |
注意：在使用font设置时也要根据顺序来设置：font-style font-variant font-weight font-size/line-height font-family。font-size和font-family的值是必需的，如果缺少了其他值，默认值将被插入，如果有默认值的话。
文本属性
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
列表样式属性
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
| list-style-image | 将图像设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
同样的，使用list-style也要按顺序：list-style-type, list-style-position, list-style-image，可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。
背景属性
| Property | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachement | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-respeat | 设置背景图像是否及如何重复。 |
同样的，简写属性background顺序为：background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和background-image。如果上述值缺少一个，这不要紧，例如background：＃FF0000 URL（smiley.gif）;是允许的。
继承性
内部样式可以继承自外部样式，如在<div>中有<h2><h3>，那么在CSS中设置<div>的样式，<h2><h3>的样式也会改变，但是当内部也有样式的时候会覆盖外部的样式。
不是所有的样式都会被继承，只有文本和字体样式会被继承，而在实际工作中，往往会给<body>设置大小和颜色。
优先性
优先性从高到低排列：行内样式、ID选择器、类选择器、标签选择器。
一般而言，选择器的指向越准确，优先级就越高，通常使用数值来表示：行内样式（1000）、ID选择器（100）、类选择器（10）、标签选择器（1）；值越大，优先级越高，权重越大。
!important属性
语法格式：属性:属性值 !important ;
表示这个属性权重无穷大，但只能影响属性的权重，不会影响选择器的权重，也不会被继承。
一个标签携带多个类名
例：<div class="名1 名2 名3">文本</div>
如果多个类名起冲突，以CSS代码为准，写在最下面的样式为最终样式。
标准文档流
在HTML中遵循一个原则：从上至下，从左至右。
如果一个块中有换行内容，那么换行前与换行后的内容之间会有一个小空格，不管在HTML中打了多少空白都只会显示一个小空格，如果要让其消失，只要将内容放在同一行就可以了，图片也是一样的道理；
不管文本、图片，如果在同一行显示，高低大小不同时，底端一定会对齐；
这些都是标准。
浮动 float
浮动元素将会脱离标准文档流，不在占用空间，可以理解为“飘”；
浮动元素的层级比标准文档流中的元素层级要高，所以会压盖住标准文档流中的内容；
浮动元素会向左或向右浮动，遇到元素边框或者上一个浮动元素就会停止浮动；
浮动元素开始浮动后，其父元素不会包裹着浮动元素；
行内元素浮动后，就会变成块级元素，宽高也会有意义。
消除浮动
如果有浮动，就会影响后面元素的排版，并且父元素不会将浮动元素包裹着，消除了浮动就不会影响下面的元素排版，父元素也会在视觉上看上去像是在包裹着浮动元素，清除浮动有三种方法：
给父元素一个固定的高度；但是不建议使用，因为一个元素的高度因应该手动设置而应该由其中的内容来决定；
使用清除浮动的属性：clear，这个属性是专门用来清除浮动的，这个浮动清楚属性有三个值：clear:left(清除左浮动)、clear:right(清除右浮动)、clear:both(两者都清除)；一般在最后一个浮动元素的下面新建一个div，但什么都不做，只在其中清除浮动；
使用overflow:hidden这个属性来清除浮动，这个属性代表着将溢出的内容隐藏起来。
盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用，CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括：边外距(margin)，外边框(border)，内填充(padding)，和实际内容(content)；
一个盒子中主要属性也是这几个：margin、padding、border、width、height；
一个盒子的宽高=盒子中内容的宽高+左右（上下）两边的内填充+左右（上下）两边的外边距+左右（上下）两边的边框线。
内填充 padding
padding有内填充的意思，用于定义元素边框与元素内容之间的空间，即上下左右的内边距，有两种描述方式：
| padding-bottom | 设置元素的下内填充 |
| padding-left | 设置元素的左内填充 |
| padding-right | 设置元素的右内填充 |
| padding-top | 设置元素的上内填充 |
还有一种是简写属性：padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值，并且设置时顺序为顺时针，即：上、右、下、左，不同值代表的含义不同：
| padding:20px; | 表示上下左右都为20px |
| padding:10px 20px; | 表示上下10px，左右20px |
| padding:10px 20px 30px; | 表示上10px，左右20px，下30px |
| padding:10px 20px 30px 40px; | 表示上10px，右20px，下30px，左40px |
外边距 margin
margin有“外边距”的意思，即盒子与盒子之间的距离，同样的也有两种描述方式：小属性描述与简写属性描述，与padding相同，这里不再过多赘述；
margin会造成塌陷现象：在标准文档流中，竖直方向的margin不会叠加，而是会选择一个较大的值，比如竖直方向上有两个<div>，上面的margin-bottom=20px;下面的margin-top=40px;这时候我们在浏览器中看到的两个<div>的间距为40px；
横向的margin没有塌陷现象，同时浮动元素也没有margin塌陷现象；
当margin-left与margin-right为auto时，就会形成居中效果，也就是说左外边距与右外边距都是auto，盒子水平居中；使用margin居中时，要注意盒子的固定宽度，块元素可以居中、行内元素不能使用margin居中、标准文档流的盒子才可以居中、margin只能居中盒子，不能居中文本，文本居中使用text-align=center。
善于使用父元素的padding而不是子元素的margin
假如有一个大的div：长300px、宽500px、color=green，然后在其中添加一个小的div：长100px、宽100px、color=red；现在要使red的位置距green的top下20px处，按照一般的思路我们会直接在red中写margin-top=20px;就可以了，但实际上green会和red一起下降20px；
这个问题可以通过给green设置一个边框border来解决，但是设置了边框就意味着多余的元素出现，所以这种方法不常用；
一般使用另一种方法：在green中设置padding-top=20px;这样就可以实现了，这是因为red时green的内部元素，而我们知道margin一般是用来设置两个平级元素的外边距的，所以通过设置内填充会更合适一点。
边框 border
格式：border:粗细 线型 颜色 ;
例：border:1px solid #f00;
其中线型有很多：none、dotted（点）、dashed（虚线）、solid（实线）、double（两个边框）、groove（3D沟槽）、ridge（3D脊边框）、inset（3D嵌入边框）、outset（3D突出边框）
同时边框也有四个边可以设置不同的样式：border-top-style、border-right-style、border-bottom-style、border-left-style。
display与visiblity 显示与可见性
display有“显示”的意思，用来将行内元素与块级元素的相互转换、将隐藏元素显示或是将显示元素隐藏；
display：inline（行内）、block（块级）、none（无），inline将块级元素变为行内元素，block将行内元素变为块级元素；block还有将隐藏元素显示的功能，none隐藏元素；
而visibility有visible和hidden两种值，hidden用来隐藏元素，不过使用display属性隐藏元素后不会占用空间，而使用visibility隐藏后会占用原本的空间。
position 定位
position有“位置”的意思，在CSS中主要实现对元素的定位；
使用left、right、top、bottom为左、右、上、下进行定位。
固定定位 position:fixed
相对于浏览器窗口进行定位，不管页面如何滚动，不会改变其位置，固定定位元素脱离了标准文档流，且层级比标准文档流中的元素高，所以会压盖住标准元素流中的元素，固定定位元素不再占用空间，所以固定定位元素显示位置不会随着浏览器的滚动而滚动；
相对定位 position:relative
相对于“原来的自己”进行定位，相对定位元素没有脱离标准文档流，如果没有设置定位的坐标就会留在原来的位置，如果设置了坐标就会移动到定位上，但是原来的位置会被占用并会压盖住其他标准文档流的元素，相对定位元素的坐标可以是负数；
因为相对定位会占用原来位置的空间，所以一般不会使用它进行定位，而是和“绝对定位”配合使用；
绝对定位 position:absolute
绝对定位是相对于“祖先定位元素”来定位，就是说会查找父元素中是否有定位属性，有的话就相对其定位，没有的话就查找父元素的父元素中是否有定位属性，有的话就相对其定位，没有的话就查找父元素的父元素的父元素中是否有定位属性，以此类推，如果一直到<body>都没有定位属性，那就根据浏览器窗口来进行定位；
绝对定位脱离了标准文档流，不再占用空间，会压盖住其他标准元素流的元素，一般给其父元素设置相对定位；
z-index
定位元素有z-index值，值大的会压盖住值小的，没有单位，默认值为0，如果有两个元素都没有设置z-index，那么就会使后写的元素压盖住先写的元素。
overflow
overflow 属性用于控制内容溢出元素框时显示的方式。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
网页布局
网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。
而内容区域一般有三种形式：一列用于移动端、两列用于平板设备、三列用于PC设备：
这基本就是CSS的一些特性，不过CSS3现在是CSS的最新标准，而浏览器也支持CSS2，所以不需要改变已有的设计。
CSS3
CSS3 = CSS2 + 新语法 + 新属性，也就是对CSS2的优化、增加与删除。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器的版本号，-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。
| 属性 | IE9 | Chrome | ForeFix | Safari | Opera |
|---|---|---|---|---|---|
| border-radius | 9.0 | 5.0 4.0 -webkit- | 4.0 3.0 -moz- | 5.0 3.1 -webkit- | 10.5 |
结构伪类
格式：E:伪类{属性:值;}（E为选择器）
结构伪类是对于一些特殊的效果，如在一个列表中对其中一个<li>添加样式，这就可以用到伪类：
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
| :last-child | p:last-child | 选择所有p元素的最后一个子元素 |
| :nth-child(n) | p:nth-child(2) | 选择所有p元素的第二个子元素 |
| :nth-child(2n) | p:nth-child(2n) | 选择所有p元素的第偶数个孩子（2、4、6...） |
| :nth-child(even) | p:nth-child(even) | |
| :nth-child(2n+1) | p:nth-child(2n+1) | 选择所有p元素的第奇数个孩子（1、3、5...） |
| :nth-child(odd) | p:nth-child(odd) | |
| :only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
伪元素
伪元素是用来添加一些选择器的特殊效果：
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
| :first-line | p:first-line | 选择每个<p> 元素的第一行 |
| :before | p:before | 在每个<p>元素之前插入内容 |
| :after | p:after | 在每个<p>元素之后插入内容 |
阴影
text-shadow
文本阴影，格式：text-shadow:水平阴影 垂直阴影 模糊值 颜色;
可以为文本设置阴影，在这之前只能通过图片来显示这种效果，其中属性值可以为负值，也可以有多个阴影，每组阴影用逗号分隔；
box-shadow
盒子阴影，格式：box-shadow:水平阴影 垂直阴影 模糊值 阴影大小 颜色 阴影位置; 其中阴影位置可选择inset与outset。
圆角矩形
使用 border-radius 属性，可以给任何元素制作 "圆角"。
| 属性 | 描述 |
|---|---|
| border-radius | 所有四个边角 border-*-*-radius 属性的缩写 |
| border-top-left-radius | 定义了左上角的弧度 |
| border-top-right-radius | 定义了右上角的弧度 |
| border-bottom-right-radius | 定义了右下角的弧度 |
| border-bottom-left-radius | 定义了左下角的弧度 |
如果在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角，但是如果在四个角上一一指定，可以使用以下规则：
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角；
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角；
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角；
一个值： 四个圆角值相同。
渐变 Gradients
渐变可以在两个或多个指定的颜色之间显示平稳的过渡，以前必须使用图像来实现这些效果，但是通过gradients，可以减少下载的时间和宽带的使用，此外，渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的；
CSS3 定义了两种类型的渐变（gradients）：
线性渐变 Linear Gradients
线性渐变语法：background-image:liner-gradient(direction, color-stop1, color-stop2, color-stop3...)
其中direction有：默认（从上到下）、to right（从左向右）、to bottom right（从左上到右下）；
也可以将direction变为angle，angle可以为任意值：x deg;
径向渐变 Radial Gradients
径向渐变语法：background-image:radial-gradient(shape size at position, color-stop1, color-stop2, color-stop3...)
其中color可设置百分比来决定渐变部分的大小；
shape有两种：circle（圆）、ellipse（椭圆）
2D/3D转换
转换可以对元素进行移动、缩放、转动、拉长或拉伸，转换的效果是让某个元素改变形状，大小和位置。
| 函数 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
| 函数 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate3d(x,y,z) | 定义 3D 转化。 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
| perspective(n) | 定义 3D 转换元素的透视视图。 |
过渡 transition
过渡是为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript，是元素从一种样式逐渐改变为另一种的效果；
要实现这一点，必须规定两项内容：指定要添加效果的CSS属性、指定效果的持续时间；
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性 |
| transition-property | 规定应用过渡的 CSS 属性的名称 |
| transition-duration | 定义过渡效果花费的时间，默认是 0 |
| transition-timing-function | 规定过渡效果的时间曲线，默认是 "ease" |
| transition-delay | 规定过渡效果何时开始，默认是 0 |
动画
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果，要创建 CSS3 动画，你需要了解 @keyframes 规则：@keyframes 规则是创建动画、@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式；
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果，指定至少这两个CSS3的动画属性绑定向一个选择器：规定动画的名称、规定动画的时长
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性 |
| animation-name | 规定 @keyframes 动画的名称 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是 0 |
| animation-timing-function | 规定动画的速度曲线，默认是 "ease" |
| animation-fill-model | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式 |
| animation-delay | 规定动画何时开始，默认是 0 |
| animation-iteration-count | 规定动画被播放的次数，默认是 1 |
| animation-direction | 规定动画是否在下一周期逆向地播放，默认是 "normal" |
| animation-play-state | 规定动画是否正在运行或暂停，默认是 "running" |
多列
多列可以将文本内容设计成像报纸一样的多列布局：
| 属性 | 描述 |
|---|---|
| column-count | 指定元素应该被分割的列数。 |
| column-fill | 指定如何填充列 |
| column-gap | 指定列与列之间的间隙 |
| column-rule | 所有 column-rule-* 属性的简写 |
| column-rule-color | 指定两列间边框的颜色 |
| column-rule-style | 指定两列间边框的样式 |
| column-rule-width | 指定两列间边框的厚度 |
| column-span | 指定元素要跨越多少列 |
| column-width | 指定列的宽度 |
| columns | 设置 column-width 和 column-count 的简写 |
CSS和CSS3的知识点就整理到这里，看着还是比较仓促，不过找的时候很方便，有些漏掉的地方可以通过百度或者google，我们下次见👋
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
