前端基础之CSS
⭐CSS3新增
- CSS3边框如 border-radius，box-shadow 等；
- CSS3背景如 background-size，background-origin 等；
- CSS3 2D，3D转换如 transform 等；
- CSS3动画如 animation 等。
PS：参考https://www.cnblogs.com/xkweb/p/5862612.html
伪类和伪元素
伪类
伪类用于定义元素的特殊状态。
:active：为活动的链接设置样式。当您在一个链接上点击时，它就会成为活动的（激活的）。:hover：设置鼠标悬停在元素上时的样式:visited和:link：为已访问和未访问链接设置不同的样式:focus：设置元素获得焦点时的样式:first-child：选择作为其父的第一个子元素的元素。:nth-child(n)：选择作为其父的第n个子元素的元素。p:nth-child(2):nth-of-type(n)：选择满足是其父元素的第n个某类型子元素的元素。p:nth-of-type(2)选择作为其父的第二个<p>元素的元素。:not(selector)：选择每个非目标元素的元素。
表单向:checked：选择每个被选中的元素。:valid：选择满足值为有效值的元素。:invalid：选择满足值为无效值的元素。:required：选择指定了 “required” 属性的 元素。:optional：选择不带 “required” 属性的 元素。
伪元素
CSS 伪元素用于设置元素指定部分的样式。
⭐CSS画三角形
三角形原理：边框的均分原理
div {
width:0px;
height:0px;
border-top:10px solid red;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
}
css画圆
圆的画法：边框的半径border-radius
.circle {
width: 0;
height: 0;
border: 50px black solid;
border-radius: 50px;
}
盒模型
- box-sizing属性：保证新增padding和border之后，盒子元素的宽度和高度不变
- 取值：
- content-box：元素的宽高=border+padding+content，标准盒子模型
- border-box：元素的宽高=width/height的宽高，IE盒子模型
- 增加padding/border之后还想保持盒子元素的宽高不变，就要减去内容的宽度和高度
- ✗padding-box：元素的宽高=padding+width，只有firefox支持
- inherit：规定应从父元素继承 box-sizing 属性的值。
- 取值：
- 建议使用标准 W3C 盒子模型
标准W3C盒子模型
IE盒子模型
区别
★ width包含的范围
- 标准盒子模型：content
- IE盒子模型：content+padding+border
★ div宽度包含的范围
- 标准盒子模型：border+padding+width
- IE盒子模型：width
<!DOCTYPE html>
<html>
<head>
<title>Box</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
}
.border {
/* IE盒子：width 100分配到content 98和border 1*2 */
box-sizing: border-box;
}
.content {
/* W3C盒子：width 100就是content 100 */
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="border"></div>
<div class="content"></div>
</body>
</html>
画一条0.5px的线
✘直接设置
不同浏览器表现不一样，不太可靠
1. meta viewport
1px的线通过 meta viewport中，scale的设置，可以缩放变成0.5倍，则得到0.5px的线。
<meta name="viewport" content="width=device-width,initial-sacle=0.5">
<style>
.hr.viewport{
border-top: solid black 1px;
}
</style>
<div class="hr viewport"></div>
▲仅限移动端
2. transform:scale()缩放
为1px的线添加上CSS样式，transform:scaleY(0.5)；
<style>
.hr.scale-half{
border-top: solid black 1px;
transform: scaleY(0.5);
}
</style>
<div class="hr scale-half"></div>
可继承属性
只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承
- 字体系列：font、font-*
- 文本系列：text-indent 缩进、line-height 行高、text-align 文本水平对齐、字间隙、字符间距、文本大小写、文本方向
- 元素可见性：visibility
- 表格布局属性
- 列表样式属性
- 等等
link标签和@import的区别
<link>标签- 定义文档与外部资源的关系。
- 最常见的用途是链接样式表。
- HTML标签
- 页面加载时加载
- 样式权重高于
@import，强烈建议
<head>
<!-- 引入样式表 -->
<link rel="stylesheet" type="text/css" href="theme.css" />
<!-- 引入图标 -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
</head>
@import语句- 指定导入的外部样式表及目标媒体。
- CSS提供
- 页面加载结束后加载
- IE5以上才能识别
<style type="text/css">
<!-- 引入样式表 -->
@import url("style.css")
</style >
transition和animation的区别
transition过渡（简写属性）
- 需要触发事件
- 只有两个关键帧，from…to…
| 属性 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。默认为0，必须设置，否则不会产生过渡效果。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
/* 把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px: */
div:hover{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
animation（简写属性）
- 不需要触发事件
- 可以多个关键帧
- animation: name duration timing-function delay iteration-count direction;
| 属性 | 描述 | 值 |
|---|---|---|
| animation-name | 规定需要绑定到选择器的 keyframe 名称。 | |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 | 0(默认)/n，必须设置，否则不会播放动画。 |
| animation-timing-function | 规定动画的速度曲线。 | linear/ease慢-快-慢(默认)/ease-in慢进/ease-out慢出/ease-in-out慢进慢出 |
| animation-delay | 规定在动画开始之前的延迟。 | 0(默认) |
| animation-iteration-count | 规定动画应该播放的次数。 | 1(默认)/n/infinite |
| animation-direction | 规定是否应该轮流反向播放动画。 | normal(默认)/alternate |
| animation-play-state | 规定是否运行此动画。 | paused/running(默认) |
div{
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst{
0%{background: red;}
50%{background: green;}
75%（中间再可以添加关键帧）
100%{background: yellow;}
}
/* Safari 与 Chrome */
@-webkit-keyframes myfirst {
0%{background: red;}
50%{background: green;}
75%（中间再可以添加关键帧）
100%{background: yellow;}
}
响应式布局
Flex布局
- Flex即Flexible Box，“弹性布局”
- 基于盒状模型，依赖display属性 + position属性 + float属性。
- 容器包括外层的父元素和内层的子元素，轴包括主轴(水平)和交叉轴(垂直)。
display: flex;
display: inline-flex; /* 行内元素 */
display: -webkit-flex; /* Webkit内核/Safari */
display: flex;
注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
Flex容器属性
| 属性 | 描述 | 取值 |
|---|---|---|
| flex-direction | 规定子item的排列方式。 | row (默认值，从左往右) / row-reverse / column从上往下 / column-reverse |
| flex-wrap | 规定换行规则。 | nowrap (默认值) / wrap / wrap-reverse |
| flex-flow | direction和wrap的简写属性 | <flex-direction> <flex-wrap> |
| justify-content | 规定子item沿主轴水平对齐方式。 | flex-start (默认值) / flex-end / center / space-between等间距均匀分布 / space-around等边距均匀分布 |
| align-items | 规定子item垂直对齐方式。 | flex-start / flex-end / center / baseline / stretch (默认值) |
| align-content | 规定多行沿交叉轴对齐方式。 | flex-start / flex-end / center / space-between / space-around / stretch (默认值) |
Flex项目属性
| 属性 | 描述 | 取值 |
|---|---|---|
| order | 规定子item的排列方式。 | 数值越小，排列越靠前，默认为0。 |
| flex-grow | 规定子item的放大比例。 | 默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 |
| flex-shrink | 规定子item的缩小比例 | 默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 |
| flex-basis | 规定子item在分配多余的空间，项目占据的空间。 | 默认值为auto，即项目的本来大小。可以设为固定值如350px |
| flex | flex-grow, flex-shrink 和 flex-basis的简写属性。 | 默认值为0 1 auto。后两个属性可选。 |
| align-self | 允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items。 | 默认属性为auto，表示继承父元素的align-items。 |
Grid布局(兼容性较差)
网格布局（Grid）是最强大的 CSS 布局方案。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
- 设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
⭐⭐垂直居中的方法
单行内联(inline-)元素垂直居中
- 单行文字
通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。
<head>
<style>
div.margin-auto {
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img.margin-auto {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="margin-auto">
<img class="margin-auto" src="../9.png" />
</div>
</body>
- 图片
多行元素垂直居中
- table-cell
设置父元素的display为table-cell，并且text-align设为center（水平居中），vertical-align设为middle（垂直居中）。
<head>
<style>
div.inline {
width: 400px;
height: 120px;
line-height: 120px;
border: 1px solid #465468;
}
</style>
</head>
<body>
<div class="inline">css垂直居中</div>
</body>
- 利用flex
设置父元素的display为flex，并且设置align-items和justify-content为center。
<head>
<style>
div.flex {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
width: 400px;
height: 400px;
border: 1px solid #465468;
}
</style>
</head>
<body>
<div class="flex">
<img class="flex" src="../9.png" />
</div>
</body>
- 伪元素
在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐vertical-align: middle;，从而达到垂直居中的目的。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。
<head>
<style>
div.ghost {
width: 400px;
height: 200px;
border: 1px solid #465468;
}
div.ghost div {
display: inline-block;
width: 150px;
background-color: yellow;
vertical-align: middle;
}
div.ghost::before {
content: " ";
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="flex">
<img class="flex" src="../9.png" />
</div>
</body>
块级元素垂直居中
- 子绝父相+margin: auto法
父元素position为relative，子元素为absolute，上下左右为0，margin：auto; 可以实现脱离文档流的居中.
<head>
<style>
div.margin-auto {
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img.margin-auto {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="margin-auto">
<img class="margin-auto" src="../9.png" />
</div>
</body>
- 子绝父相+margin负值法
通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。
<head>
<style>
div.margin-negative {
width: 400px;
height: 400px;
border: 1px solid #465468;
position: relative;
}
img.margin-negative {
width: 180px;
height: 190px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -90px; /*height的一半*/
margin-left: -80px; /*width的一半*/
}
</style>
</head>
<body>
<div class="margin-negative">
<img class="margin-negative" src="../9.png" />
</div>
</body>
- 子绝父相+transform位移
<head>
<style>
div.transform {
position: relative;
width: 400px;
height: 400px;
border: 1px solid #465468;
}
img.transform {
position: absolute;
/* top: 50%; 如果用了top位移 translate就变成-50%*/
transform: translate(50%, 50%);
}
</style>
</head>
<body>
<div class="transform">
<img class="transform" src="../9.png" />
</div>
</body>
优点：不必提前知道被居中元素的尺寸了。因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。
块元素和行内元素
块元素 block
- 独占一行
- 自动填满父元素
- 可以设置margin和pading以及高度和宽度
- 包括：
- 标题标签：h1, h2, h3, h4, h5, h6
- 表格标签：table, td, th
- 列表标签：dl, dt, ol, ul, li
- 其他：div, p, form, pre, hr
行内元素 inline
- 不会独占一行
- width和height会失效
- 垂直方向的padding和margin会失效
- 包括：
- 文本：em, strong, span, textarea, code
- 表单：button, input, label, select
- 其他：img
多行元素的文本省略号
<style>
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
<div>
fwejvijgc,mgice,gcjg3qjxdpiwjec,hgmavcoijggb3niqcufu43cxnfmwlcn.groeangc.bsua.bxf.
fwejvijgc,mgice,gcjg3qjxdpiwjec,hgmavcoijggb3niqcufu43cxnfmwlcn.groeangc.bsua.bxf.
fwejvijgc,mgice,gcjg3qjxdpiwjec,hgmavcoijggb3niqcufu43cxnfmwlcn.groeangc.bsua.bxf.
</div>
隐藏
- 透明度opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的；
- 可视性visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件；
- 显示display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。
定位属性position
固定定位fixed
- 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
- Fixed定位使元素的位置与文档流无关，因此不占据空间。
- Fixed定位的元素和其他元素重叠。
相对定位relative
- 设置为相对定位的元素框会偏移某个距离。
- 元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
- 可能导致覆盖其它框。
绝对定位absolute
- 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
<html>。 - absolute 定位使元素的位置与文档流无关，因此不占据空间。
- absolute 定位的元素可和其他元素重叠。
？粘性定位sticky
- 元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和 containing block（最近的块级祖先元素）定位。
- 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
默认定位Static
- position的默认值。
- 没有定位，元素出现在正常的流中（忽略top, bottom, left, right 或者 z-index 声明）。
继承inherit
规定应该从父元素继承position 属性的值。
双边距重叠问题（外边距折叠）
多个相邻（兄弟或者父子关系）普通流的块元素垂直方向marigin会重叠
折叠的结果为：
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时，折叠结果是两者的相加的和。
⭐浮动清除
参考https://www.cnblogs.com/ForEvErNoME/p/3383539.html
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
浮动溢出
浮动清除后
- 使用带clear属性的空元素
什么都不做，给浮动元素后面的元素添加clear属性，如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
<style>
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
</style>
<div class="news">
<img src="../9.png" />
<p>some text</p>
<div class="clear"></div>
</div>
- 使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
<style>
.news {
background-color: gray;
border: solid 1px black;
overflow: hidden;
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
<div class="news">
<img src="../9.png" />
<p>some text</p>
</div>
- 给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
- ⭐使用CSS的:after伪元素（推荐）
结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
<style>
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clearfix:after {
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 触发 hasLayout */
zoom: 1;
}
</style>
<div class="news clearfix">
<img src="../9.png" />
<p>some text</p>
</div>
三栏布局
- 绝对定位布局：position + margin
左右两栏绝对定位，父容器相对定位，中间栏设置margin自适应
<!DOCTYPE html>
<html>
<head>
<title>ThreeColumn</title>
<style>
body,
html {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.container {
height: 100%;
position: relative;
}
.left {
width: 150px;
height: 100%;
position: absolute;
left: 0;
background: red;
}
.right {
width: 150px;
height: 100%;
position: absolute;
right: 0;
background: blue;
}
.center {
height: 100%;
background: blueviolet;
margin: 0 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div>
</div>
</body>
</html>
缺点: 如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。
- 浮动布局： float + margin
左右两栏浮动，中间使用设置margin实现自适应
<!DOCTYPE html>
<html>
<head>
<title>ThreeColumn</title>
<style>
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100%;
}
.left {
width: 150px;
height: 100%;
float: left;
background: red;
}
.right {
width: 150px;
height: 100%;
float: right;
background: blue;
}
.center {
height: 100%;
background: blueviolet;
margin: 0 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div>
</div>
</body>
</html>
- table布局
父元素设置display: table, 设置子元素为列的属性为display:table-cell。
<!DOCTYPE html>
<html>
<head>
<title>ThreeColumn</title>
<style>
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
.container {
display: table;
width: 100%;
height: 100%;
}
.container > div {
display: table-cell;
}
.left {
width: 150px;
background-color: red;
}
.center {
background-color: blueviolet;
}
.right {
width: 150px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div>
</div>
</body>
</html>
- flex布局
父元素设置display:flex，子元素默认从左往右排列。
<!DOCTYPE html>
<html>
<head>
<title>ThreeColumn</title>
<style>
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
.container {
display: flex;
width: 100%;
height: 100%;
}
.left {
width: 150px;
background-color: red;
}
.center {
flex: 1;
background-color: blueviolet;
}
.right {
width: 150px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div>
</div>
</body>
</html>
- Grid布局
父元素设置display: grid;，并且分配列宽 grid-template-columns: 100px auto 200px;
<!DOCTYPE html>
<html>
<head>
<title>ThreeColumn</title>
<style>
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
.container {
display: grid;
width: 100%;
height: 100%;
grid-template-columns: 150px auto 150px;
}
.left {
background: red;
}
.center {
background: blue;
}
.right {
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div>
</div>
</body>
</html>
⭐BFC
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
BFC渲染规则
- BFC垂直方向边距重叠。
- BFC的区域不会与浮动元素的box重叠。
- BFC是一个独立的容器，外面的元素不会影响里面的元素。
- 计算BFC高度的时候浮动元素也会参与计算
BFC的作用
- 防止浮动导致父元素高度塌陷（清除浮动）
清除前
<style>
.container {
border: 1px solid blue;
}
.inner {
width: 100px;
height: 100px;
float: right;
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">Inner</div>
</div>
</body>
在父元素使用overflow: hidden;清除后
<style>
.container {
border: 1px solid blue;
overflow: hidden;
}
.inner {
width: 100px;
height: 100px;
float: right;
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">Inner</div>
</div>
</body>
- 阻止元素被浮动元素覆盖
浮动元素可能盖在其他非浮动元素上。
<style>
.left{
float: left;
width: 200px;
background: red;
}
.right{
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="left">Float</div>
<div class="right">Not float</div>
</body>
在第二个元素加上overflow: hidden;清除后
<style>
.left{
float: left;
width: 200px;
background: red;
}
.right{
height: 100px;
background: blue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="left">Float</div>
<div class="right">Not float</div>
</body>
- 避免外边距折叠
同一个BFC容器中，在垂直方向可能发生边距坍塌，即两个元素margin都是50，最终可能只有50。
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: #108ee9;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
如果想要避免外边距发生重叠，可以将其放在不同的BFC容器中。并用overflow: hidden;。
<style>
div {
overflow: hidden;
}
p {
width: 100px;
height: 100px;
margin: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div><p></p></div>
<div><p></p></div>
</body>
7382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
