CSS学习笔记 - 西柚柚柚子

1. CSS

层叠样式表，又称级联样式表，简称样式表

是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2.使用方式

（1）内联方式：直接把CSS用style属性添加到标签中（行内样式）

<p style="color:red;">设置字体颜色为红色</p>

（2）内部样式表：添加到头部的style

<head>
<style>
    p{
　　　　color:red;
　　}
</style>
</head>

（3）外部样式表：新建一个CSS文件，在其中写样式，在html文件中导入

<link rel="stylesheet" href=" " />

（4）导入式（不推荐使用）

<head>
<style>
    @import url(my.css);
</style>
</head>

link 和 import 的区别
- link属于HTML标签，而@import是CSS提供的
- ink在页面加载时同时加载，而@import引用的CSS会等到页面被加载完再加载
- link是HTML标签，无兼容问题；import只在IE5以上才能识别
- link方式的权重高于import的权重。
- link可用js控制dom改变样式，import只能用来加载CSS

3.CSS的注释

/*　　*/

4.选择器

（1）通用选择器（*）：优先级最低，适用范围最广

*{
  color:red;  
}

（2）元素选择器：p、div、a、img、body...

p{
  color:red;  
}

（3）类选择器：.类名

.类名{    
  color:red;  
}

（4）ID选择器：#ID名

#ID名{
  color:red;  
}

5.CSS特征

继承性：被包含在内部的标签可拥有外部标签的样式
- 可继承样式，如 text-* ， font-* ， line-*
- 不可继承样式，如 border ， padding ， margin
层叠性：可定义多个样式
优先级：

使用方式：行内 > 内部 > 外部 > 导入
选择器：ID选择器 > 类选择器 > 元素选择器 > 通用选择器

　　　　　　　　　外部ID选择器 > 内部类选择器

6.背景background

（1）background-color（背景色）: ①rgb() ②# ③默认为transparent透明　　/* #f00（红） #0f0（绿） #00f（蓝） */

（2）background-image（背景图片）: url() 　　/* 同时定义背景图和颜色时，图片会覆盖在颜色上；加载的图片默认在水平方向和垂直方向平铺 */

（3）background-repeat（图片重复）: ①repeat-X（水平平铺） ②repeat-Y（垂直平铺） ③no-repeat（只显示一张）

（4）background-attachment（是否随内容滚动）: ①scroll（默认，滚动） ②fixed（内容滚动时，图片不动）

（5）background-position（图片位置）: ①方位名称：left，right，top，bottom，center

　　　　　　　　　　　　　　　　　　 ②精确数字：30px 10px （水平垂直）

　　　　　　　　　　　　　　　　　　 ③混搭：30px center

　　ps：只写一个参数时，第二个参数默认center

（6）background-size（图片大小）: ①50px 50px ②100% 100% ③cover（完全覆盖背景） ④contain（按照图片比例扩大至最大尺寸，不一定会覆盖整个背景）

（7）背景简写时值的顺序

background：color，image，repeat，attachment，position，size

7.字体font

（1）font-style（字体样式）: ①normal（默认） ②italic（斜体）

（2）font-size（字体大小）: 如 18px

（3）font-family（字体）: 默认值根据浏览器不同而不同。值可设置，如 "宋体"

（4）font-weight（字体粗细）: ①normal（默认，值为400） ②bold（粗体，值为700） ③bolder（更粗） ④lighter（更细）

（5）font-variant: ①normal（标准字体）

　　　　　　　　②small-caps（小型的大写字母字体，所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。）

　　　　　　　　③inherit（继承父元素的字体）

（6）字体简写时值的顺序

font: font-style，font-variant，font-weight，font-size，line-height，font-family
可以有一个值不写，但是顺序不可以乱
font-size 和 font-family 必须有

8.文字溢出

单行文字
- white-space: nowrap　　// 一行内显示文本，默认值为normal
- overflow: hidden　　　　// 超出文本隐藏
- text-overflow: ellipsis　　// 溢出部分显示 ...

overflow: hidden
text-overflow: ellipsis
display: -webkit-box　　// 设置为弹性伸缩盒子
-webkit-line-clamp: 2　　// 显示文本的行数
-webkit-box-orient: vertical　　//一行内显示文本，默认值为normal

　　PS：千万不要给div设置高度，不然省略号后的文字会显示出来

9.文本text

（1）text-align（水平对齐）: left | center | right

（2）text-decoratiom: underline（下划线） | overline（上划线） | line-through（删除线） | noe

（3）text-transform: capitalize（每个单词第一个字母大写） | uppercase（全部大写） | lowercase（全部小写） | none

（4）text-indent: 2em9（文本缩进，1em=16px=1汉字）

（5）word-wrap: normal | break-word（溢出时自动换行）

（6）vertical-align（内容相当于对象的垂直对齐方式）: auto | top | middle | bottom

（7）line-height（行高）: normal | number（数字，与当前字体大小相乘来设置行间距） | length（px，行高等于高时文字垂直居中）

9.列表list

（1）list-style-image: url()

（2）list-style-position（列表项标记如何根据文本排列）: outside（文本以外） | inside（文本以内）

（3）list-style-type（相当于type属性，设置了图片后若图片无法正常显示则显示type标记）: none | disc | circle | square

（4）列表简写时值的顺序

list-style: image，position，type

10.CSS选择器

（1）关系选择器

①后代选择器（E F）：所有被E元素包含的F元素，中间用空格隔开

.parent span{　　color:red;　　}

<div class="parent">
　　<span>子元素span</span>
　　<div>
　　　　子元素
　　　　<span>孙子代</span>
　　</div>
</div>
<!-- 子元素span红，孙子代span红 -->

②子代选择器（E>F）：作为E元素的直接子元素F，孙子元素不起作用，用大于号表示

.parent>span{　　color:red;　　}

<!-- 子元素span红 -->

③相邻兄弟选择器（E+F）：紧贴在E元素之后的第一个F元素，相邻的第一个兄弟元素

p+span{　　color:red;　　}

<p>span</p>
<span>第一个</span>
<span>第二个</span>
<!-- 第一个红 -->

④通用兄弟选择器（E~F）：E之后的所有连续的F元素

p~span{　　color:red;　　}

<p>span</p>
<span>第一个</span>
<span>第二个</span>
<div>div</div>
<span>第三个</span>
<!-- 第一个、第二个红 -->

⑤并集选择器（E，F）：EF两种元素一起修改样式

⑥交集选择器（EF）：所有元素相交部分

（2）属性选择器

通过html的属性来选择元素，如class

①E[ att ]：具有att属性的E元素

p[ class ]{　　coloe:red;　　}

<p class="p1">x效果为红</p>
<p class="p2">效果为红</p>

②E[ att = "val" ]：有att属性且值等于val的E元素

p[ class="p1" ]{　　color:red;　　}

<p class="p1">效果为红</p>
<p class="p2">效果为黑</p>

③E[ att ~= "val" ]：有att且属性列表中有一个符合val元素

p[ class~="p1" ]{　　color:red;　　}

<p class="p11 para p1">效果为红</p>
<p class="p1parap11">效果为黑</p>　　<!-- p1和para没有空格开来，不是单独的p1 -->

④E[ att ^= "val" ]：有att且以“val”开头

p[ class^="p1" ]{　　color:red;　　}

<p class="p1parap11">效果为红</p>　　<!-- 以p1开头即可 -->

⑤E[ att $= "val" ]：有att且以“val”结尾

p[ class^="p1" ]{　　color:red;　　}

<p class="p1parap1">效果为红</p>

⑥E[ att *= "val" ]：有att且包含val

a[ href*="baidu" ]{　　color:red;　　}

<a href="http://www.baidu.com">baidu</a>

⑦E[ att |= "val" ]：有att，有链接符（-）隔开，以“val”开头（val链接符完整的前缀）

div[ class|="sxt" ]{　　color:red;　　}

<div class="sxt-work">红</div>
<div class="work-sxt/sxtpen/sx-work">三种均不红</div>

（3）伪类选择器

通过冒号定义，定义元素的状态，如点击按下、点击完

①a:link（超链接a在未被访问之前的样式，特指a）

②a:visited（a已经被访问过的样式，特指a）

③E:hover（鼠标悬停在元素上时的样式，不限a，p、li也可用）

④E:active（鼠标按下时的样式，不限a）

　ps：超链接的lvha原则，必须按照上述顺序进行

⑤E:not(s选择器)：匹配不含有s选择器的元素

⑥E:first-child（父元素的第一个子元素）

⑦E:last-child（父元素的最后一个子元素）

⑧E:only-child（E是唯一的子元素）

⑨E:empty（没有任何子元素的E，也没有text文本，即为空）

⑩E:checked（处于选中状态，一般用于imput的type为radio与checkbox时）

⑪E:nth-child(n)：第n个子元素

　　如：.box:nth-child(2){　　}

　　属性：n（选中所有），3n（3，6，9...），...，1，2...，even（偶数），odd（单数）

　　特殊：最小值从1开始，没有0；但an+b表示的是周期的长度，n从0开始

⑫E:nth-of-type()：同⑪

⑬E:focus（选取获得光标的input表单元素）

（4）伪对象选择器

伪对象也叫伪元素，一个或两个冒号表示，最好用两个
伪元素：用于创建一些不再文档书中的元素，为其添加样式
伪类：用于当已有元素处于某个状态时，为其添加应有的样式
常用伪元素

　　①E:before　　|　　E::before　　（在被选元素前插入内容）

P::before{
  content:"浙江";
  color:red;  
}

<p>宁波</p>

<!-- 浙江宁波 -->

　　②E:after　　|　　E::after　　（在被选元素后插入内容）

（5）优先级

优先级：数值越大优先级越高
style=1000，ID=100，class=10，element=1
优先级相同时按照写在后面的显示

#a #b{}    /* 100+100=200 */
style=""    /* 1000 */
div p{}    /* 1+1=2 */

11.盒子

包含：内容（content）　　内边距（padding）　　边框（border）　　外边距（margin）

（1）border三要素：宽度、样式、颜色

　　合并设置：border :1px solid red;

　　单独设置：border-width，border-style，border-color

　　 border-style属性：solid（实线）| dotted（点状）| double（双实线，>=3px）| dashed（虚线）| none（无边框）

（2）margin取值：%，auto，负值，正值

　　单边设置：margin-top / right / left /bottom

　　 margin四种设置情况：

　　　　①margin:20px;　　// 4个方向的值

　　　　②margin:20px 30px　　// 上下为20px，左右为30px

　　　　③margin:20px 30px 40px　　// 上20px，左右30px，下40px

　　　　④margin:20px 30px 40px 50px　　// 顺序为：上右下左

（3）padding：值不能为负，其余同margin

（4）外边距合并：两个垂直外边距相遇时，形成一个外边距，合并后高度等于两个高度中的较大者

12.怪异盒子

设置：样式设置 box-sizing：border-box（怪异）;　　//默认值为content-box标准盒子
组成部分：margin，border，padding，content
实际宽度：width+margin（width=padding+border+content）

13.弹性盒模型flexbox

建议看：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。
决定一个盒子在其他盒子中的分布。在浏览器窗口变化时，盒子相应改变大小
设置——display：flex
flexbox中float，clear，vertical-align不起作用
常见父项属性：
- flex-direction（设置主轴方向）：row（默认，从左到右）| row-reverse（从右到左）| column（从上到下）| column-reverse（从下到上）
- justify-content（主轴上子元素排列方式）：flex-start（默认，从头开始）| flex-end（从尾开始）| center（居中对齐）| space-around（平分剩余空间）| space-between（先贴两边，再平分剩余空间）
- flex-wrap（子元素是否换行）：nowrap（默认，不换行）| wrap（换行）　　　　/* 不换行时如果子元素装不下，会缩小子元素的宽度塞进去 */
- align-items（侧轴上子元素的排列方式，单行）：flex-start（默认）| flex-end | center | stretch（拉伸，子元素不设置宽度或者高度）
- align-content（侧轴上子元素排列方式，多行）：flex-start（默认）| flex-end | center | stretch（子元素高度平分父元素高度）| space-around | space-between
常见子项属性：
- flex：number（默认0）　　　　/* 子项分配剩余空间，占多少份数 */
- align-self：（默认auto）　　　　/* 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items；控制子项在侧轴上的排列方式；auto表示继承父元素的align-items，若无父元素，等同于stretch */
- order：number（默认0）　　　　/* 定义项目的排列顺序。数值越小，排列越前。与z-index相反 */

14.浮动float

定位：
- 将元素排除在普通流之外
- 元素将不再页面中占据空间
- 在包含框的左边或者右边
- 浮动元素依旧在包含框之内
- 写法 float：none | left | right
浮动高度塌陷：父元素在没有设置高度的情况下，其子元素浮动后，脱离文档流，则父元素处于塌陷状态；因为子元素浮动后是不占据父元素的位置空间的。
清除浮动：
- clear清除浮动(添加空div方法)，在浮动元素下方添加空div，并给该元素写css样式(clear:both;height:0;overflow:hidden;)
- after伪元素清除浮动
- 利用br标签的clear属性
- 给浮动元素父元素添加高度
- 给父元素添加overflow:hidden清除浮动
- 父级元素同时浮动
- 父级设置inline-block，其margin:0 auto失效
display属性：
- 每个元素都默认有一个display值，确定该元素的类型
- 块元素与行元素是可以转换的
- 常见属性：
  - none：隐藏对象 // 隐藏后不占空间。opacity:0 设置隐藏但是占空间，可触发事件；visibility：hidden 设置隐藏但是占空间，不可绑定事件
  - inline：内联元素 // 行内元素，不可设置宽高
  - block：块元素
  - inline-block：内联元素 // 在同一行显示，可设置宽高，margin和padding可设置四周（主义代码之间的空白）
  - table-cell：表格单元格
  - flex：弹性盒
position定位：
- 制定一个元素（静态，相对，绝对，固定），格式 position：absolute | fixed | relative | static
- absolute：绝对定位，相对于整个浏览器左上角，偏移后不继续占原来的位置
- fixed：固定定位，如右下角的广告位置一直不变。不占原来的位置，相对于浏览器窗口
- relative：相对定位（自恋型），相对于自己原来的位置偏移（原来的左上角基点），还要继续占原来的位置
- static：静态，对偏移量不起左右。一般用于去除定位，即没有定位
- inherit：从父元素中继承position属性值

15.浏览器内核及其前缀

PS：有些属性必须加上内核浏览器才支持

Firefox：内核 => Gecko，前缀 => -moz-
IE：内核 => Trident，前缀 => -ms-
Chrome：内核 => Webkit，前缀 => -webkit-
Safari：内核 => Webkit，前缀 => -webkit-
Opera：内核 => Presto，前缀 => -o-

轮播图案例

.lunbotu{
　　...
　　-weblit-animation:lunbo 5s;
}
@-webkit-keyframes lunbo{
　　0%{
　　　　backgroung:url();
　　}
　　50%{
　　　　backgroung:url();
　　}
　　100%{
　　　　backgroung:url();
　　}
}

16. z-index堆叠顺序

（1）修改了定位，元素可能会堆叠

（2）使用z-index控制重叠顺序

（3）仅能在定位的元素上生效z-index

（4）z-index属性：数值。数值越大顺序越高，离用户越近；可设置负值，一般不要设置

17.居中总结

（1）内容水平居中 —— text-align:center

（2）一行文字垂直居中 —— 设置line-height=height

（3）盒子水平居中 —— 设置宽高，再margin: 0 auto

（4）子元素在父元素中居中

display:table-cell; vertical-align:center; —— table-cell让标签元素以表格单元格的形式呈现，使元素类似于td标签
父元素relative，子元素absolute，设置子元素的 top:50%, left:50%，是以左上角为原点，故不处于中心位置。再设置子元素 translate(-50%,-50%) 即往上、往左移动自身长度的50%
display:flex; justify-content:center; align-items:center; —— 弹性布局

18.圆角border-radius

border-radius: value; 　　　　　　// 设置四个角

　　 value value；　　 // 左上和右下右上和左下

　　　　　　　　　 value value value value；　　 // 四个角

value值可以用 px，%，em

19.盒子阴影box-shadow

box-shadow: h-shadow（水平阴影位置，可负值）

　　　　　　　　　v-shadow（垂直阴影位置，可负值）

　　　　　　　　　blur（模糊程度，px）

　　　　　　　　　spread（阴影尺寸）

　　　　　　　　　color（阴影颜色）

　　　　　　　　　inset [将外部阴影（outset）改为内部阴影]

文字阴影：text-shadow（值同上）

20.CSS3渐变

（1）线性渐变（Linear Gradients）—— 向下、上、左、右、对角

　　background: linear-gradient(direction, color-stop1, color-stop2, ...) 　　// 括号中可以写很多个颜色

　　direction默认从上往下，还可设置从左往右（left 或 right）；从左上到右下（left top 或 to right bottom）

（2）径向渐变（Radial Gradients）—— 由他们的中心定义

　　background: radial-gradient(center, shape，size，start-color，... ，last-color)

　　默认渐变中心为 center（中心点），渐变形状为 ellipse（椭圆）

　　shape还可为circle（圆形），中心（at center center 或 at x,y，从左上角为参考）

　　size：closest-slide（最近边）、farthest-side（最远边）、closest-corner（最近角）、farthest-corner（默认，最远角）

例：

-webkit-repeating-linear-gradient(
    red,
    yellow 10%,
    green 20%
)

21.transition过渡

（1）过渡属性

transition-property：none | all | property
property定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。如颜色、转变、渐变、阴影
```
transition-property:width 1s
```

（2）过渡时间

transition-duration：ns | nms

（3）过渡函数

transition-timing-function：ease | linear | ease-in | ease-out | ease-in-out
ease（默认值）：慢速开始，然后变快，再慢速结束（相对于匀速，中间快，两头慢）
linear：匀速
ease-in：慢速开始，加速效果
ease-out：慢速结束，减速效果
ease-in-out：慢速开始慢速结束，即先加速后减速（相对于匀速，开始和结束都慢，两头慢）

　　PS：个人理解ease-in-out中间有一段是匀速，两头慢，而ease一直是变速运动

（4）过渡延迟（多久后开始变）

transition-dely：ns | nms

（5）多个属性都变化，直接写all —— transition:all 0.5s;

22.transform 2D　转换2D属性

格式 —— transform: 函数 ( x, y );

函数：

（1）translate()：平移；沿X和Y轴，可只写一个值

（2）rotate()：旋转；顺时针选准，负值逆时针，单位deg（角度）；如 rotate (45deg)

（3）scale()：缩放；值0~1缩小，>1放大

（4）skew()：翻转；2个值：第一个水平角度，第二个垂直角度；1个值水平轴角度；单位deg

* 除了rotate只要一个值外，其余可以一个可以两个

*可以同时写多个函数，空格隔开

23.transform 3D　转换3D属性

呈现3D效果，写到被观察元素的父元素上 —— perspective: 400px;　　// 一般400px够用，也可作函数样式 —— transform: perspective(400px) scale3d(0.8, 0.8, 0.8);
慢慢变化　transition: all 3s;

　函数：

　（1）translate3d(x, y, z)　　scale3d(x, y, z)　　rotate3d(x, y, z, angle)

　（2）translateX(x, y, z)　　scaleX(x, y, z)　　rotateX(x, y, z, angle)

　（3）translateY(x, y, z)　　scaleY(x, y, z)　　rotateY(x, y, z, angle)

　（4）translateZ(x, y, z)　　scaleZ(x, y, z)　　rotateZ(x, y, z, angle)

transform-style: flat | preserve-3d;　　// 不开启3d立体空间，默认(不开启) | 开启
子元素是否开启三维立体环境。写在父级，但是影响的是子元素。

24.animation动画（加内核）

过渡只能模拟动画，animation可以制作类似flash动画
通过关键帧控制每一步

（1）@keyframes

@keyframes name{
　　from  |  0%{ CSS样式 }
　　percent{ CSS样式 }　　//可以写多个百分比
　　to  |  100%{ CSS样式 } 
}

（2）animation 控制动画

　　animation：name（keyframes中自定义名） duration（transition里所需时间） timing-function（速度变化类型） delay（延迟） iteration-count（次数） direction（播放方向）;

iteration-count：数值 | infinite;　　// infinite表示无限次
direction：normal | alternate;　　// alternate轮流播放，奇数次正常，偶数次倒放
fill-mode：forwards;　　　　　　// 动画停在最后一帧，默认none
play-state：paused | running;　　// 运行或暂停，默认running

（3）PS

手动写动画最小时间间隔16.7ms；
显示器默认频率60Hz，即每秒刷新60次，t=1/60*1000ms=16.7ms;
多个动画写用逗号隔开：animation: ...... , animation: ...... ;

25.鼠标样式

　　cursor: default | pointer | move | text | not-allowed　　// 默认小白 | 小手 | 移动 | 文本 | 禁止

取消表单选中时的轮廓：textarea, input { outlinr: 0; 或 outline: none; }
防止拖拽文本域：textarea{ resize:none; }

26.绘制图形（三角、梯形、圆形）

（1）以CSS绘制三角形

首先需要一个元素作为容器：<div></div>
使用border属性，内容宽高值为0

div{
    width: 0;
    height: 0;
    border-top: 20px solid red;
    border-bottom: 20px solid green;
    border-left: 20px solid blue;
    border-right: 20px solid orange;
}

　　结果图：

PS：若只需上方的三角形时，注释掉border-bottom一行，再将左右两边的颜色改为透明（transparent）。其余同理

（2）梯形

　　在三角形的基础上，如果是左右方向的梯形就给div加height，上下方向的梯形则加width

div{
    width: 10px;
    height: 0; 
    border-top: 20px solid red;
    border-bottom: 20px solid green;
    border-left: 20px solid blue;
    border-right: 20px solid orange;
}

　　结果图：

27.媒体查询——响应式布局

　　针对不同的屏幕尺寸设置不同的样式

/* 正常情况 */
body{
  background-color: grey;
}
/* PC端，屏幕宽度大于992px */
@media screen and (min-width: 992px) {
  body{
    background-color: #000;
  }
}
/* 移动端，屏幕宽度小于786px */
@media screen and (max-width: 768px) {
  body{
    background-color: #ff0000;
  }
}
/* ipad端，768px~992px之间 */
@media screen and (min-width: 768px) and (max-width: 992px) {
  body{
    background-color: #fff;
  }
}

PS：

and前后都有空格
若想阻止浏览器自动调整大小，在title中加入以下代码

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

代码对应意思：

width：页面宽度 = 设备宽度（device-width）
initial-scale：初始化缩放比，1.0为不缩放，2.0为页面放大2倍
minimum-scale：最小缩放比
maximum-scale：最大缩放比
user-scalable：用户是否可缩放，yes | no（ 1 | 0 ）

28.multi-column 多列（瀑布流）

　　属性：

　　　　column-count: 3;　　// 分3列

　　　　column-gap: 30px;　　//列间距

　　　　column-rule: 2px solid red;　　// 分割线样式

29.字体图标

（1）阿里巴巴矢量图标库下载

网址：https://www.iconfont.cn
直接饮用矢量库中的字体图标，就不用再把图片放到本地文件夹导入了

　　PS：在学校学习的时候没有用过，当时学习也直接略过了，后来实习的时候第一天就要用这个东西，所以我觉得大家可以提前学会使用。

（2）CSS Sprite（CSS精灵、CSS雪碧图）

把所有零星图片都放到一张大图中
当访问该页面时，从多次请求变为一次请求

（3）滑动门

使各种特殊形状的背景能够自适应元素中文本内容的多少
使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容
导航栏的使用
千万不能设置宽！！！

<a href="#"><span>首页</span></a>

a{
  display: inline-block;
  height: 33px;
  line-height: 33px;
  background: url('图片1地址');
  padding-left: 15px;   /* 截取左半边圆弧 */
}
a span{
  display: inline-block;
  height: 33px;
  background: url('图片1地址') no-repeat right;
  padding-right: 15px;
}

posted on 2021-02-06 15:25 西柚柚柚子阅读(116) 评论(0) 收藏举报