css世界学习笔记(二)

阳光穿透心脏的1/2处 2021-07-26 12:26 411阅读 0赞

**目录**

1.内联元素

2.line-heihgt

多行居中

大值特性

3.vertical-align

vertical-align可以输入数值实现完美居中对齐

清除vertical-align,图片带来的间隙问题

sup 和 sub 标签

基于 vertical-align 属性的水平垂直居中弹框

4. float

5. BFC

overflow

absolute

无依赖绝对定位

overflow 和 text-align (空白节点和无依赖绝对定位)

absolute 与 overflow

absolute 与 clip

absolute 的流体特性

absolute 的 margin:auto 居中

relative 的最小化影响原则

position:fixed 与背景锁定

--------------------

## 1.内联元素 ##

图片与文字居中对齐 使用ex单位

![20200428013858254.png][]

// html
    zhangxinxu<i class="icon-arrow"></i>
    
    // css
    .icon-arrow {
        display: inline-block;
        width: 20px;
        height: 1ex;
        background: url(/images/5/arrow.png) no-repeat center;
    }

## 2.line-heihgt ##

### 多行居中 ###

.box { 
     line-height: 120px; 
     background-color: #f0f3f9; 
    } 
    .content { 
     display: inline-block; 
     line-height: 20px; 
     margin: 0 20px; 
     vertical-align: middle; 
    } 
    <div class="box"> 
     <div class="content">基于行高实现的...</div> 
    </div>

### 大值特性 ###

> 无论内联元素  line-height  如何设置，最终父级元素的高度都是由数值大的 那个 line-height  决定的，我称之为“内联元素  line-height  的大值特性”。

## 3.vertical-align ##

### vertical-align可以输入数值实现完美居中对齐 ###

![20200429002513309.png][]

###  清除vertical-align,图片带来的间隙问题 ###

1. img 块状华

2. 容器line-height足够小 0

3. 容器font-size 足够小 此方法要想生效，需要容器的 line-height 属性值和当 前 font-size 相关，如 line-height:1.5 或者 line-height:150%之类, 简单说就是通过font-size 间接改变line-height大小

4.图片设置 vertical-align 的值为 top、middle、 bottom 中的任意一个都是可以的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70][]

<div class="box">
        <h4>1. 空标签后面跟随文本</h4>
        <p><i class="icon icon-delete"></i>删除</p>
        <h4>2. 标签里面有“删除”文本</h4>
        <p><i class="icon icon-delete">删除</i>随便什么文字</p>
        <h4>3. 字号变大</h4>
        <p class="large">
            <i class="icon icon-delete"></i>删除
        </p>
        <p class="large">
            <i class="icon icon-delete">删除</i>随便什么文字
        </p>
    </div>
    
    CSS：
    .box {
        line-height: 20px;
    }
    .icon {
        display: inline-block; 
        width:20px; height:20px; 
        white-space: nowrap; 
        letter-spacing: -1em; 
        text-indent: -999em;
    }
    .icon:before {
        content:'\3000';
    }
    .icon-delete {
        background: url(delete.png) no-repeat center;
    }
    
    .large {
        font-size: 20px;
    }

### sup 和 sub 标签 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 1][]

### 基于 **vertical-align** 属性的水平垂直居中弹框 ###

.container { 
     position: fixed; 
     top: 0; right: 0; bottom: 0; left: 0; 
     background-color: rgba(0,0,0,.5); 
     text-align: center; 
     font-size: 0; 
     white-space: nowrap; 
     overflow: auto; 
    } 
    .container:after { 
     content: ''; 
     display: inline-block; 
     height: 100%; 
     vertical-align: middle; 
    } 
    .dialog { 
     display: inline-block; 
     vertical-align: middle; 
     text-align: left; 
     font-size: 14px; 
     white-space: normal; 
    }

>  （1）在本例中，由于 font-size 设置为 0，所以 x 中心点位置就是.container 的上边 缘，此时，高度 100%的宽度为 0 的伪元素和这个中心点对齐。如果中心点位置不动，这个伪 
> 
> 元素上面一半的位置应该在 .container  的外面，但是  CSS  中默认是左上方排列对齐的，所以， 
> 
> 伪元素和这个原本在容器上边缘的  x  中心点一起往下移动了半个容器高度，也就是此时  x  中心 
> 
> 点就在容器的垂直中心线上。 
> 
> （ 2 ）弹框元素 .dialog  也设置了  vertical-align:middle 。根据定义，弹框的垂直中 
> 
> 心位置和  x  中心点位置对齐，此时， x  中心点就在容器的垂直中心位置，于是 .dialog  元素就 
> 
> 和容器的垂直中心位置对齐了，从而实现了垂直居中效果。
> 
> （ 3 ）水平居中就  text-align:center  实现，非常好理解

##  4. float ##

float  都有哪些有意思的特性呢？具体如下：

1 包裹性；

2 块状化并格式化上下文；

3 破坏文档流；

4 没有任何  margin  合并；

::after  等伪元素默认都是内联水平

clear:both  的作用本质是让自己不和  float  元素在一行显示，并不是真正意义上

的清除浮动

clear  属性是让自身不能和前面的浮动元素相邻，注意这里“前面的” 3  个字，

也就是  clear  属性对“后面的”浮动元素是不闻不问的

## 5. BFC ##

> BFC  全称为  block formatting context ，中文为“块级格式化上下文”。相对应的还有  IFC ， 
> 
> 也就是  inline formatting context ，中文为“内联格式化上下”。
> 
>  
> 
> 大家请记住下面这个表现原则：如果一个元素具有  BFC ，内部子元素再怎么翻江倒海、翻 
> 
> 云覆雨，都不会影响外部的元素。所以， BFC  元素是不可能发生  margin  重叠的，因为  margin 
> 
> 重叠是会影响外面的元素的； BFC  元素也可以用来清除浮动的影响，因为如果不清除，子元素 
> 
> 浮动则父元素高度塌陷，必然会影响后面元素布局和定位，这显然有违  BFC  元素的子元素不会 
> 
> 影响外部元素的设定

那什么时候会触发  BFC  呢？常见的情况如下：

1.<html>根元素；

2.float 的值不为  none ；

3.overflow 的值为  auto 、 scroll  或  hidden ；

4.display 的值为  table-cell 、 table-caption  和  inline-block  中的任何一个；

5.position 的值不为  relative  和  static 。

换言之，只要元素符合上面任意一个条件，就无须使用  clear:both  属性去清除浮动的

影响了。因此，不要见到一个 <div> 元素就加个类似 .clearfix  的类名，否则只能暴露你孱

弱的  CSS  基本功。

常用图文布局

img { 
     float: left; 
     margin-right: 10px; 
    } 
    .animal { 
     overflow: hidden; 
    }

总结一下 ， 我们对  BFC  声明家族大致过了一遍，能担任自适应布局重任的也就是以下

几个。

•

overflow:auto/hidden ，适用于  IE7  及以上版本浏览器；

•

display:inline-block ，适用于  IE6  和  IE7 ；

•

display:table-cell ，适用于  IE8  及以上版本浏览器。

最后，我们可以提炼出两套  IE7  及以上版本浏览器适配的自适应解决方案。

（ 1 ）借助  overflow  属性，如下：

.lbf-content \{ overflow: hidden; \}

（ 2 ）融合  display:table-cell  和  display:inline-block ，如下：

.lbf-content \{

display: table-cell; width: 9999px;

/\*  如果不需要兼容  IE7 ，下面样式可以省略  \*/

\*display: inline-block; \*width: auto;

这两种基于  BFC  的自适应方案均支持无限嵌套，因此，多栏自适应可以通过嵌套方

式实现。这两种方案均有一点不足，前者如果子元素要定位到父元素的外面可能会被隐藏，

后者无法直接让连续英文字符换行。所以，大家可以根据实际的项目场景选择合适的技术

方案。

最后，关于  display:table-cell  元素内连续英文字符无法换行的问题，事实上是可以

解决的，就是使用类似下面的  CSS  代码：

.word-break \{

display: table;

width: 100%;

table-layout: fixed;

word-break: break-all;

### overflow ###

**要想彻底清除浮动的影响，最适合的属性不是 clear 而是 overflow。一般使用 overflow:hidden，利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响。**

PC端想要去除页面默认滚动条，只需要： html \{ overflow: hidden; \}

倒是支持 \-webkit- 前缀的浏览器可以说说。例如，对于  Chrome  浏览器：

•

整体部分 ， ::-webkit-scrollbar ；

•

两端按钮 ， ::-webkit-scrollbar-button ；

•

外层轨道 ， ::-webkit-scrollbar-track ；

•

内层轨道 ， ::-webkit-scrollbar-track-piece ；

•

滚动滑块 ， ::-webkit-scrollbar-thumb ；

•

边角 ， ::-webkit-scrollbar-corner 。

但是我们平时开发中只用下面  3  个属性：

::-webkit-scrollbar { /* 血槽宽度 */
    width: 8px; height: 8px;
    }
    ::-webkit-scrollbar-thumb { /* 拖动条 */
    background-color: rgba(0,0,0,.3);
    border-radius: 6px;
    }
    ::-webkit-scrollbar-track { /* 背景槽 */
    background-color: #ddd;
    border-radius: 6px;
    }

![2020051020085913.png][]

### absolute ###

**绝对定位元素的宽度是相对于第一个 position 不为 static 的祖先元素计算的**

（ 1 ）根元素（很多场景下可以看成是 <html> ）被称为“初始包含块”，其尺寸等同于浏览

器可视窗口的大小。

（ 2 ）对于其他元素，如果该元素的  position  是  relative  或者  static ，则“包含块”

由其最近的块容器祖先盒的  content box  边界形成。

（ 3 ）如果元素  position:fixed ，则“包含块”是“初始包含块”。

（ 4 ）如果元素  position:absolute ，则“包含块”由最近的  position  不为  static

的祖先元素建立

实际上  absolute  天然具有“包裹性”，因此没有必要使用  display:inline-block ，

.wrap { 
     display: inline-block; // 没有必要
     position: absolute; 
    }

> 即使写了很多年  CSS  代码的人也可能会错误地回答下面这个问题：一个绝对定位元素，没 
> 
> 有任何  left/top/right/bottom  属性设置，并且其祖先元素全部都是非定位元素，其位置在 
> 
> 哪里？ 
> 
> 很多人都认为是在浏览器窗口左上方。实际上，还是当前位置，不是在浏览器左上方。 
> 
> 这是关于  absolute  绝对定位最典型的错误认知。正是这种错误认知导致凡是使用 
> 
> absolute  绝对定位的地方，一定父容器  position:relative ，同时  left/top  等属性定 
> 
> 位，甚至必同时使用  z-index  属性设置层级。 
> 
> 在我看来，这是非常严重的认知和使用错误！ 
> 
> 请牢记下面这句话： absolute  是非常独立的  CSS  属性值 ， 其样式和行为表现不依赖其他 
> 
> 任何  CSS  属性就可以完成 。

### 无依赖绝对定位 ###

1.  左上

![2020051020591822.png][]

直接 (兼容性出奇的好)

.shape { 
     position: absolute; 
    }

不需要

.father { 
     position: relative; 
    } 
    .shape { 
     position: absolute; 
     top: 0; left: 0; 
    }

2. hot定位

![20200510210104551.png][]

absolute + margin (ie6都兼容)

.icon-hot { 
     position: absolute; 
     margin: -6px 0 0 2px; 
     width: 28px; height: 11px; 
     background: url(hot.gif); 
    }

3. 布局三

![20200510210228490.png][]

<span class="icon-x"> 
     <i class="icon-warn"></i>邮箱格式不准确
    </span> 
    .icon-x { 
     line-height: 20px; 
     padding-left: 20px; 
    } 
    .icon-warn { 
     position: absolute; 
     margin-left: -20px; 
     width: 20px; height: 20px; 
     background: url(warn.png) no-repeat center; 
    }

> 同样是  position:absolute ，然后简单的  margin  偏移实现。此方法兼容性很好， 
> 
> 与  inline-block  对齐相比的好处在于， inline-block  对齐最终行框高度并不是 
> 
> 20px ，因为中文下沉，图标居中，要想视觉上水平，图标  vertical-align  对齐要比实 
> 
> 际低一点儿，这就会导致最终整个行框的高度不是预期的  20px ，而是  21px  或者更大。 
> 
> 但是，如果使用“无依赖绝对定位”实现，则完全不要担心这一问题，因为绝对定位元素 
> 
> 不会改变正常流的尺寸空间，就算我们的图标有  30px  大小，行框高度依然是纯文本所在 
> 
> 的  20px  高度。

4.布局4

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 3][]

> 提示信息的位置智能跟随输入框。例如，我们这里把输入框的宽度改小， 
> 
> 会看到提示信息会自动跟着往前走，如图  6-55  所示。与容器设置  position:relative  再通 
> 
> 过  left  属性实现的定位相比，其代码更简洁，容错性更强，维护成本更低。 
> 
> 此外，页面中的星号也是典型的“无依赖绝对定位”，自身绝对定位，然后通过  margin
> 
> left  负值偏移实现，从而保证所有输入信息头左对齐，同时又不会影响原先的布局，也就是 
> 
> 星号有没有对布局没有任何影响。

5. 布局5

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 4][]

<div class="search-box">
        <input class="search-input" placeholder="搜索"><a href="javascript:" class="search-btn">搜索</a>
        <div class="search-result">
            <div class="search-datalist">
                <a href>搜索结果1</a>
                <a href>搜索结果2</a>
                <a href>搜索结果3</a>
                <a href>搜索结果4</a>
                <a href>搜索结果5</a>
            </div>
        </div>
    </div>
    
    //css
    核心CSS：
    .search-input { 
        width: 200px; height: 20px; 
        line-height: 20px; 
        padding: 9px 39px 9px 9px; 
        border: 1px solid #ddd; 
    }
    /* 搜索按钮的无依赖绝对定位 */
    .search-btn { 
        width: 20px; height: 20px; 
        border: 9px solid #fff; 
        background: #ddd url(search.png) no-repeat center;
        position: absolute; margin: 1px 0 0 -40px;
    }
    /* 下拉列表的无依赖绝对定位 */
    .search-datalist { 
        position: absolute; 
        width: 248px; 
        border: 1px solid #e6e8e9; 
        background-color: #fff;
    }
    
    /* 搜索列表的显隐控制 */
    .search-result {
        display: none;
    }
    .search-input:focus ~ .search-result {
        display: block;
    }

> 就一个  position:absolute  就实现了我们想要的效果，没有  left 、 top  定位，父元素 
> 
> 也没有  position:relative  设定，效果就达成了，而且兼容性好到  IE6  都完美定位。 
> 
> 除了代码少这个好处外，维护成本也在一定程度上降低了，比方说，输入框的高度发生了 
> 
> 变化，我们不需要修改任何  CSS  代码，列表依然在输入框的底部完美对齐显示。不仅如此，没 
> 
> 有了父元素  position:relative  限定，我们的  z-index  层级管理规则更简单了，并且也无 
> 
> 须担心父元素设置  oveflow:hidden  会裁剪下拉列表。 
> 
> 不过这里我有必要补充一点，虽然“无依赖绝对定位”好处多多，但建议只用在静态交互 
> 
> 效果上，比方说，导航二级菜单的显示与定位。如果是动态呈现的列表，建议还是使用  JavaScript 
> 
> 来计算和定位

### overflow 和 text-align (空白节点和无依赖绝对定位) ###

> 具体的渲染原理如下。 
> 
> （ 1 ）由于 <img> 是内联水平， <p> 标签中存在一个宽度为  0 、看不见摸不着的“幽灵空白 
> 
> 节点”，也是内联水平，于是受  text-align:center  影响而水平居中显示。 
> 
> （ 2 ） <img> 设置了  position:absolute ，表现为“无依赖绝对定位”，因此在“幽灵空 
> 
> 白节点”后面定位显示；同时由于图片不占据空间，这里的“幽灵空白节点”当仁不让，正好 
> 
> 在 <p> 元素水平中心位置显示，于是我们就看到了图片从 <p> 元素水平中间位置显示的效果。

### **absolute** 与 **overflow** ###

> 如果overflow 不是定位元素，同时绝对定位元素和 overflow 容器之间也没有定位元素，则 overflow 无法对 absolute 元素进行剪裁。

因此下面 HTML 中的图片不会被剪裁：
    <div style="overflow: hidden;"> 
     <img src="1.jpg" style="position: absolute;"> 
    </div> 
    overflow 元素父级是定位元素也不会剪裁，例如：
    <div style="position: relative;"> 
     <div style="overflow: hidden;"> 
     <img src="1.jpg" style="position: absolute;"> 
     </div> 
    </div>

**当大家遇到 absolute 元素被剪裁或者 fixed 固定定位失效时，可以**  **看看是不是 transform 属性在作祟。**

### **absolute** 与 **clip** ###

> CSS  世界中有些属性或者特性必须和其他属性一起使用才有效，比方说剪裁属性  clip 。 
> 
> clip  属性要想起作用，元素必须是绝对定位或者固定定位，也就是  position  属性值必须是 
> 
> absolute  或者  fixed 。
> 
>

语法

clip: rect(top right bottom left)

栗子

clip: rect(30px 200px 200px 20px)

![20200510215633919.png][]

如何隐藏 <h1> 标签中的“ CSS  世界”这几个文字，通常有以下一些技术选型。

•

下策是  display:none  或者  visibility:hidden  隐藏，因为屏幕阅读设备会忽略

这里的文字。

•

text-indent  缩进是中策，但文字如果缩进过大，大到屏幕之外，屏幕阅读设备也

是不会读取的。

•

color:transparent  是移动端上策，但却是桌面端中策，因为原生  IE8  浏览器并不

支持它。 color:transparent  声明，很难用简单的方式阻止文本被框选。

•

clip  剪裁隐藏是上策，既满足视觉上的隐藏，屏幕阅读设备等辅助设备也支持得很好。

.logo h1 \{

position: absolute;

clip: rect(0 0 0 0);

使用<label>元素李代桃僵的经典策略： 
    <form> 
     <input type="submit" id="someID" class="clip"> 
     <label for="someID">提交</label> 
    </form>

## **absolute** 的流体特性 ##

**absolute 遇到 left/top/right/bottom 属性的时候，absolute 元素才真正变成绝对定位元素。**

原本的相对特性丢失。但是，如果我们仅此时，水平方向绝对定位，但垂直方向的定位依然保持了相对特性。

**第一种布局**

.box { 
     position: absolute; 
     left: 0; right: 0; top: 0; bottom: 0; 
    }

**第二种布局**

.box { 
     position: absolute; 
     left: 0; top: 0; 
     width: 100%; height: 100%; 
    }

**第一种比第二种好太多了**

乍一看，效果都是一样的，但是骨子里却已经严重分化了。后者，也就是设定宽高都是  100%

的那个 .box ，实际上已经完全丧失了流动性，我们可以通过添加简单的  CSS  声明让大家一眼

就看出差别。例如，对两者都添加  padding:30px ：

前者此时宽高依然是窗体可视区域的宽高，但是，后者此时的尺寸是 100%+60px ，多出了 60px 。

有人可能会立马想到使用  box-sizing:border-box ，这样确实可以让  padding  表现保持一

致，但是，如果添加的是  margin:30px  呢

### **absolute** 的 **margin:auto** 居中 ###

如果项目不需要管  IE7  浏览器的话，下面这种绝对定位元素水平垂直居中用法就可以直接

淘汰了：

.element {
    width: 300px; height: 200px;
    position: absolute; left: 50%; top: 50%;
    margin-left: -150px; /* 宽度的一半 */
    margin-top: -100px; /* 高度的一半 */
    }

如果绝对定位元素的尺寸是已知的，也没有必要使用下面这种用法，因为按照我的经验，

在有些场景下，百分比  transform  会让  iOS  微信闪退，还是尽量避免的好。

.element {
    width: 300px; height: 200px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
    }

首推的方法就是利用绝对定位元素的流体特性和 margin:auto 的自动分配特性实现居

中，例如：

.element {
    width: 300px; height: 200px;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
    }

具体分配细节在 4.3 节已经详细解释，这里不再赘述。

我可以负责任地告诉大家，这种方法非常好用，屡试不爽。

### **relative** 的最小化影响原则 ###

（1）尽量不使用 relative，如果想定位某些元素，看看能否使用“无依赖的绝对定位”；

（ 2 ）如果场景受限，一定要使用  relative ，则该  relative  务必最小化。

这样不是最小化

这样才是最小化,最小化影响最小.利于维护

“ relative  的最小化影响原则”不仅规避了复杂场景可能出现样式问题的隐患，从日后的维

护角度讲也更方便，比方说过了一个月，我们不需要右上角的图标了，直接移除这个  relative

最小化的单元即可！但是，如果  relative  是这个容器上的，这段样式代码你敢删吗？万一其他

元素定位也需要呢？万一  relative  还有提高层叠顺序的作用呢？留着没问题，删掉可能出  bug ，

我想大多数的开发者一定会留着的，这也是为什么随着项目进程的推进代码会越来越冗余的原因。

### **position:fixed** 与背景锁定 ###

蒙层弹窗是网页中常见的交互，其中黑色半透明全屏覆盖的蒙层基本上都是使用  position:

fixed  定位实现的。但是，如果细致一点儿就会发现蒙层无法覆盖浏览器右侧的滚动栏，并且

鼠标滚动的时候后面的背景内容依然可以被滚动，并没有被锁定，体验略打折扣。

如果是移动端项目，阻止  touchmove  事件的默认行为可以防止滚动；如果是桌面端项目，

可以让根元素直接  overflow:hidden 。但是， Windows  操作系统下的浏览器的滚动条都是占

据一定宽度的，滚动条的消失必然会导致页面的可用宽度变化，页面会产生体验更糟糕的晃动

问题，那怎么办呢？很简单，我们只需要找个东西填补消失的滚动条就好了。那该找什么东西

填充呢？这时候就轮到功勋卓越的  border  属性出马了 — 消失的滚动条使用同等宽度的透明

边框填充！

于是，在蒙层显示的同时执行下面的  JavaScript  代码：

var widthBar = 17, root = document.documentElement;

if (typeof window.innerWidth == 'number') \{

widthBar = window.innerWidth - root.clientWidth;

root.style.overflow = 'hidden';

root.style.borderRight = widthBar + 'px solid transparent';

隐藏的时候执行下面的  JavaScript  代码：

var root = document.documentElement;

root.style.overflow = '';

root.style.borderRight = '';

就可以实现我们期望的锁定效果了。

[20200428013858254.png]: /images/20210726/a01b42b407554220adb3e10e085a5e2c.png
[20200429002513309.png]: /images/20210726/5e1e6e49fa294b19947a1896c9bb4669.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70]: /images/20210726/b614dde605e7428eb2145afff1cb73a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 1]: /images/20210726/20b670bfc2bf4a9a8e169dbbe6013aab.png
[2020051020085913.png]: /images/20210726/82cb3e4c59624861bcabfc5c3867f750.png
[2020051020591822.png]: /images/20210726/eb3647aaa3094bdf9176b5ecc888ff63.png
[20200510210104551.png]: /images/20210726/25a4e3ef4c9d479592b8bb9700bf3c2d.png
[20200510210228490.png]: /images/20210726/0a416e9e31de448fb00845985e51c252.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 2]: /images/20210726/7e0323843ff34d3e965bd63100584a4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 3]: /images/20210726/332bddbe88a14914bc1dce4bd778881c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 4]: /images/20210726/f3f12717fa844e23b3dcfe64a9bde7b0.png
[20200510215633919.png]: /images/20210726/fc9bbd1c852e4b01b290f6da1c3c396f.png