CSS浮动详解及案例

àì夳堔傛蜴生んèń 2023-02-23 08:53 5阅读 0赞

### 文章目录 ###

*   *  一、简介
     *   *  1.1 定位方式
         *  1.2 浮动元素
         *  1.3 层叠关系
     *  二、浮动的规则
     *   *  2.1 规则一
         *   *  2.1.1示例
         *  2.2 规则二
         *   *  2.2.1 示例
         *  2.3 规则三
         *   *  2.3.1 示例
         *  2.4 规则四
         *  2.5 规则五
         *  2.6规则六
         *   *  2.6.1 示例
         *  2.7 小结
     *  三、浮动应用场景
     *  四、浮动多余margin处理方案
     *   *  4.1 问题
         *  4.2 方案一：伪类选择器
         *  4.3 方案二：公式法
     *  五、案例
     *   *  5.1 仿京东频道广场
         *  5.2 仿考拉运动户外分类
         *  5.3 仿考拉热卖品牌

## 一、简介 ##

### 1.1 定位方式 ###

在CSS中，有三种常用的方法对元素进行定位和布局：

*  normal flow：标准流、常规流、文档流
 *  absolute position：绝对定位
 *  float：浮动

其中，绝对定位和浮动都会让元素脱离标准流，以达到灵活布局的效果

### 1.2 浮动元素 ###

可以通过`float`属性让元素产生浮动效果，其常用取值为：

*  none：不浮动，默认值
 *  left：向左浮动
 *  right：向右浮动

### 1.3 层叠关系 ###

*  标准元素：标准流中的元素不存在层叠关系
 *  定位元素：定位元素会层叠在标准流元素上面
    
     *  定位元素间可以使用z-index设置优先级
     *  必须是定位元素，非static
 *  浮动元素：float为left或right
 *  标准元素 --> 浮动元素 --> 定位元素

## 二、浮动的规则 ##

### 2.1 规则一 ###

元素一旦浮动后

*  脱离标准流
 *  朝着向左或向右方向移动，直到自己的边界紧贴着包含块(一般是父元素)或其他元素的边界为止
 *  定位元素会层叠在浮动元素上面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70]

#### 2.1.1示例 ####

如代码所示，各元素都是标准流，显示如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 1]

当对`strong`元素开启浮动后：

strong {
        float: left;
        background-color: khaki;
    }

效果如图：

![在这里插入图片描述][20200706215954405.png]

此时`strong`标签已脱离标准流，按照上述规则，会按照`left`朝向找到自个应该所处位置

### 2.2 规则二 ###

*  浮动元素不能和行内级元素重叠，行内级内容会被浮动元素推出
    
     *  比如行内级元素、inline-block、块级元素

#### 2.2.1 示例 ####

代码如下：

<div class="box">
            <img src="../img/beauty-center-02.jpg" alt="">
            面对市场火热行情，不少人关心的是A股后市如何？是不是已经在牛市初期了？
            　　对此，国泰证券认为，当前A股的低估值补涨特征本质在于无风险利率的下行，促发的动力在于银行理财预期收益率降低，进一步强化资金追逐资产的现象。“由此看好后市，突破3300点，静待3500点。”
            　　“当前背景是全球流动性泛滥且近期看不到明显收紧，中国经济数据持续超预期，且市场可预期未来几个季度中国经济与企业盈利同比增速逐步上行，这是A股‘复苏牛’逻辑，这也是全面牛市逻辑。”安信证券陈果团队称。
            　　“经济恢复良好和增量资金共同推动股市上涨。”新时代证券首席经济学家潘向东告诉记者，前期消费、科技涨幅较高，已走出结构性行情，目前经济恢复良好，基建投资、房地产投资成为经济主要拉动力量，加上欧美经济重启，中国外需也有所回升，PPI增速触底回升，企业盈利改善可期，7月以来金融地产等周期板块快速上涨，呈现板块轮动迹象。
            　　“但在疫苗出来前，疫情对经济和市场都可能存在干扰，因此，这轮行情能否成为全面板块的牛市还不好说。”潘向东指出。
            　　粤开证券首席经济学家、研究院院长李奇霖认为，站在当前的时点，情绪大概率还能把市场向上“推一把”。看好我国资本市场在未来经济与金融转型中的长期投资价值。
            　　同样，星石投资首席研究官方磊也看好后续市场。他认为，在疫情冲击下，各个领域企业将深刻意识到有稳定供货能力的产业链最具价值，中国优质企业有望获得新的业务增量。这是股市后续行情的底气。
            　　不过，李奇霖也提醒，不同的投资者，投资风格和盈利方式不同，建议投资者根据个人投资风格和资金，理性投资。
    </div>

未开启浮动，显示如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 2]

当对`img`标签开启浮动`float:left`后，显示为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 3]

如图，形成图文环绕效果，显示也符合规则二。

### 2.3 规则三 ###

行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐

#### 2.3.1 示例 ####

代码如下

<div class="box">
            面对市场火热行情，不少人关心的是A股后市如何？是不是已经在牛市初期了？
            　　对此，国泰证券认为，当前A股的低估值补涨特征本质在于无风险利率的下行，促发的动力在于银行理财预期收益率降低，进一步强化资金追逐资产的现象。“由此看好后市，突破3300点，静待3500点。”
            <img src="../img/beauty-center-02.jpg" alt="">
            　　“当前背景是全球流动性泛滥且近期看不到明显收紧，中国经济数据持续超预期，且市场可预期未来几个季度中国经济与企业盈利同比增速逐步上行，这是A股‘复苏牛’逻辑，这也是全面牛市逻辑。”安信证券陈果团队称。
            　　“经济恢复良好和增量资金共同推动股市上涨。”新时代证券首席经济学家潘向东告诉记者，前期消费、科技涨幅较高，已走出结构性行情，目前经济恢复良好，基建投资、房地产投资成为经济主要拉动力量，加上欧美经济重启，中国外需也有所回升，PPI增速触底回升，企业盈利改善可期，7月以来金融地产等周期板块快速上涨，呈现板块轮动迹象。
            <img src="../img/beauty-center-01.jpg" alt="">
            　　“但在疫苗出来前，疫情对经济和市场都可能存在干扰，因此，这轮行情能否成为全面板块的牛市还不好说。”潘向东指出。
            　　粤开证券首席经济学家、研究院院长李奇霖认为，站在当前的时点，情绪大概率还能把市场向上“推一把”。看好我国资本市场在未来经济与金融转型中的长期投资价值。
            　　同样，星石投资首席研究官方磊也看好后续市场。他认为，在疫情冲击下，各个领域企业将深刻意识到有稳定供货能力的产业链最具价值，中国优质企业有望获得新的业务增量。这是股市后续行情的底气。
            　　不过，李奇霖也提醒，不同的投资者，投资风格和盈利方式不同，建议投资者根据个人投资风格和资金，理性投资。
        </div>

此时，未开启浮动，显示效果为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70]

当对`img`开启浮动：

img {
       float: left;
    }

显示效果为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 1]

该示例验证了规则三，开启浮动元素只会与所在行的顶部对齐，也就是说只会在同一行往左或右移动，而不会上下移动。

### 2.4 规则四 ###

*  如果元素是向左(右)浮动，浮动元素的左(右)边界不能超出包含块的左(右)边界

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 2]

### 2.5 规则五 ###

*  浮动元素之间不能层叠
    
     *  如果一个元素浮动，另外一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素(左浮找左浮，右浮找右浮)
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 3]
 *  如果水平空间剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

![在这里插入图片描述][20200707112416245.png]

### 2.6规则六 ###

*  浮动元素的顶部不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端

#### 2.6.1 示例 ####

显示效果为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 4]

### 2.7 小结 ###

*  inner2进行左浮动/右浮动的时候，只会在当前自己行中浮动

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 5]

*  inner1进行左浮动时，inner2没有浮动时，排布如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 6]

*  inner1左浮动，inner2也左浮动，排布如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 7]

*  inner1有浮动，inner2没有浮动，但inner2中有文本，排布如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 8]

*  inner1和inner2都进行浮动，但父元素不设置高度，那么父元素的高度会消失(高度坍塌)，排布如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 9]

## 三、浮动应用场景 ##

*  解决行内级元素、inline-block元素的水平间隙问题
 *  布局(eg. 京东)

## 四、浮动多余margin处理方案 ##

### 4.1 问题 ###

在网站中，经常会遇到如下布局：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 10]

通过开发者工具，可以看到整个`.container`宽度为`990px`，每个item宽度为`190px`，中间每个相隔为`10px`，通过计算，可以发现`container`宽度比`item`宽度+每个`item`的`margin-right`要小，事实上，每行的最后一个`item`设置的`margin-right`是多余的，多的就是它！！！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 11]

行末尾元素没有显示出来，根据上面说的浮动规则，这种情况也可以解释的通，当一行无法放开浮动元素时，会自动换行，因为此处还有一个`margin-right:10px`，所以剩余空间宽度不够导致换行了。  
那么该如何解决呢：

### 4.2 方案一：伪类选择器 ###

通过`nth-child`属性，在每行的末尾把`margin-right`设置为`0`即可。

.section:nth-child(5n){
       margin-right: 0px;
    }

效果如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 12]

该方案缺点为：

*  当个数不确定时，需要一直写`class:section1-n`，非常不灵活
 *  `nth-child`存在兼容问题，在`IE 6-8`是不支持的，如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 13]

### 4.3 方案二：公式法 ###

众所周知，块级元素的宽度计算为：

`width of block = content-width(非auto) + margin-left + margin-right + padding-left + padding-right + border-width`

根据计算公式，只需在`sections`包裹一层`div`，设置属性`负margin`，例如`margin-left:-10px`即可，代码如下：

效果为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 14]

## 五、案例 ##

### 5.1 仿京东频道广场 ###

目标效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 15]

实现代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> .container { width: 990px; height: 306px; margin: 0 auto; background-color: red; } .wrap { margin-right: -10px; margin-bottom: 10px; } .item { float: left; width: 240px; margin-right: 10px; } .itema { height: 306px; background-color: saddlebrown; } .itemb { height: 148px; background-color: cyan; } .itemc { height: 148px; background-color: darkkhaki; } .item-last { margin-top: 10px; } </style>
    </head>
    
    <body>
        <div class="container">
            <div class="wrap">
                <div class="item itema">
    
                </div>
                <div class="item itema">
    
                </div>
                <div class="item itemb">
    
                </div>
                <div class="item itemb ">
    
                </div>
                <div class="item itemc item-last">
    
                </div>
                <div class="item itemc item-last">
    
                </div>
    
            </div>
        </div>
    </body>
    
    </html>

效果为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 16]

### 5.2 仿考拉运动户外分类 ###

目标效果，如图：

![在这里插入图片描述][20200708101037550.png]

实现代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> h2 { margin: 0; padding: 0; } a { text-decoration: none; color: #333333; } .container { height: 74px; width: 1100px; background-color: #f6f6f6; margin: 0 auto; } .header-left h2, .header-left .hot-list { float: left; } .header-right { float: right; } .header-right a { display: inline-block; color: #999999; margin-right: 18px; margin-top: 30px; } .header-right a:hover { text-decoration: underline; } .header-left h2 { margin-left: 15px; margin-top: 28px; } .header-left .hot-list { margin-left: 25px; margin-top: 36px; } .header-left .hot-list span { color: #999999; } .header-left .hot-list a { margin-left: 14px; } .hot { color: red; } .header-left .hot-list a:hover { text-decoration: underline; } </style>
    </head>
    
    <body>
        <div class="container">
            <div class="header-left">
                <h2>运动户外</h2>
                <div class="hot-list">
                    <span>热搜词: </span>
                    <a href="" class="hot">阿迪达斯</a>
                    <a href="">耐克</a>
                    <a href="" class="hot">斯凯奇</a>
                    <a href="" class="hot">安德玛</a>
                </div>
            </div>
            <div class="header-right">
                <a href="">更多好货 > </a>
            </div>
        </div>
    </body>
    
    </html>

最终效果为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 17]

### 5.3 仿考拉热卖品牌 ###

该案例特点在`broder`的处理和设置上。

目标效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 18]

实现代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> ul { margin: 0; padding: 0; list-style: none; margin-right: -10px; } .brand { height: 217px; width: 1100px; margin: 0 auto; background-color: #f6f6f6; margin-top: 12px; } .brand ul li { float: left; height: 167px; width: 219px; background-color: white; border: 1px solid #e3e3e3; margin-right: -1px; text-align: center; line-height: 167px; } .brand ul li img { display: block; width: 120px; height: 120px; margin: 0 auto; margin-top: 23px; } .brand span { display: block; height: 49px; width: 1081px; font-size: 16px; line-height: 49px; padding-left: 18px; font-weight: bold; border: 1px solid #e3e3e3; margin-bottom: -1px; background-color: white; } </style>
    </head>
    
    <body>
        <div class="brand">
            <span>热卖品牌</span>
            <ul>
                <li>
                    <a href="">
                        <img src="../img/luxury-hot-01.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../img/luxury-hot-02.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../img/luxury-hot-03.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../img/luxury-hot-04.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../img/luxury-hot-05.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </body>
    
    </html>

最终效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 19]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020071410543711.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200706215932312.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_16,color_FFFFFF,t_70
[20200706215954405.png]: https://img-blog.csdnimg.cn/20200706215954405.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020070710223031.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200707102310951.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200707104633897.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200707104721340.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200707111726782.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200707112141298.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[20200707112416245.png]: https://img-blog.csdnimg.cn/20200707112416245.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200707151020780.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200707110626760.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200707110714864.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200707110837363.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200707111000239.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/2020070711112419.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200707155006314.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/2020070715531786.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20200707155656215.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200707155930418.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20200707163004788.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20200707171721879.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20200707172744694.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[20200708101037550.png]: https://img-blog.csdnimg.cn/20200708101037550.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20200708102558416.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20200708111442603.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/20200708111426795.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70