CSS的常用元素属性,显示模式,盒模型,弹性布局

柔光的暖阳◎ 2023-10-10 16:36 10阅读 0赞

**目录**

1.常用元素属性

1.1字体属性

设置字体

设置大小

字体粗细

文字样式

1.2文本属性

文字颜色

文字对齐

编辑文本装饰

文本缩进

编辑行高

编辑1.3背景属性

背景颜色

背景位置

背景尺寸

1.4圆角矩形

2.元素的显示模式

2.1块级元素(display:block)

2.2行内元素(display:inline)

3.盒子模型

3.1边框

3.2内边距

3.3外边距

4.弹性布局

4.1开启弹性布局

4.2水平方向排列设置

4.3垂直方向排列设置

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

![70a2b97062da47b985aa33a089010d38.png][]

## 1.常用元素属性 ##

CSS有很多属性,我们只了解一些比较常用属性

### 1.1字体属性 ###

#### 设置字体 ####

<body>
       <div class="one">
        这是一个div
       </div>
       <div class="two">
        这是一个div
       </div>
       <div class="three">
        这是一个div
       </div>
       <div class="four">
        这是一个div
       </div>
       <style>
        .one{
            font-size: 20px;
            font-family: '微软雅黑';
        }
        .two{
            font-size: 20px;
            font-family: '宋体';
        }
        .three{
            font-size: 20px;
            font-family: '黑体';
        }
        .four{
            font-size: 20px;
            font-family: '华文行楷';
        }
       </style>
    </body>

![6c2c4d0d3f3440b8a6e4b265c6c63036.png][]

我们用font-family来设置字体,这个属性指定的字体,必须是系统已经安装过的字体,上述几个例子都是系统自带的,有一些特殊的字体,系统上没有,就不会正常显示.一般是通过浏览器通过服务器获取到对应的字体文件才能正确显示

#### 设置大小 ####

使用font-size来设置字体大小

浏览器的每个文字可以看作是一个"方框",如果是英文阿拉伯数字,方框比较窄,中文一般是正方形

设置font-size:20px.意思就是文字框的高度是20px.我们使用截图工具时会显示大小

![5ad0f6e959a243f08b324c0532acd6ac.png][]

比我们设置的像素要大出不少,我们需要调两个地方

一个是浏览器要恢复默认100%的大小(ctrl+0)

![d70caa08c043419399f988acd06c0888.png][]

发现还是不精确,还需要调整桌面的缩放设置

![d95f6d7b195345db8118c081c51cd49d.png][]

这下就好了,高度就i是20了

![fdf7970529844142a0eadbe236a5e954.png][]

所以设置20px是建立在浏览器页面和桌面缩放是100%的情况下的

#### 字体粗细 ####

设置font-weight来设置

.one{
            font-size: 20px;
            font-family: '微软雅黑';
            font-weight: bold;
        }

![458c87b85323449bb2ef6548ec08833e.png][]

与刚刚相比就粗了很多

设置字体粗细时有两种典型的设置风格

1.单词

就像刚才使用bold,就是加粗的意思,看看官方文档:

![0afd686f37a64099af36522e6129e2ba.png][]

2.数字

文档最后一个值就是用来设置数字的

通过设置文字的粗细,就可以将div设置成标题那么粗了,也能将标题设置成div一样粗细

![67ab824bcbba4c28af93cac39c2797b6.png][]

此时标题的粗细就和div相同了![1c35b126452246a0bb164e41933661bb.png][]

#### 文字样式 ####

之前在html学了i和em标签,能让文字倾斜

![d8b7a2c5c72843f484aece06d765ab92.png][]

![114a5aad816a4774ab29eaf327a9b550.png][]

font-style:normal就可以恢复倾斜到正常

> i,em标签也就没啥用了,我们使用CSS的font-style就能实现想要的效果
> 
> html很多的功能都被css架空了

### 1.2文本属性 ###

#### 文字颜色 ####

之前我们也也经常用color,那么在计算机中是如何表示颜色的呢?

我们日常看到很多光都是混合而成的,白光是红绿蓝三原色等比例混合的

计算机表示颜色典型方式就是RGB的表示方式(red,green,blue)

这里的三原色不是美术中的三原色(红黄蓝),美术中的三原色等比例混合是得到的黑色!

前端中是给RGB各分配了一个字节,每个字节的范围是0~255/0~FF(计算机中的典型表示)

实际表示颜色可以这样写:

![9c1e76125e854fe6bf136f4358491694.png][]

![825cb9de939547fd99608cb30dc4cf02.png][] ![18bbba8949e64fea9311bf303e088aca.png][]

![a13264024080487f8e9338a93ba63e3a.png][] 通过这三个分量的不同比例的搭配,就可以调和出不同的颜色

到底是用哪个颜色更好看呢?这不是一个技术问题,是一个艺术问题,很多公司都有美工,设计,UI,UED这样的专门用来设计切图的部门,使用PS设计出初稿,再让程序员来实现,PS甚至能直接导出CSS代码

此处的0~255也可以用十六进制来表示

![04ac8f597df84482858536b4b48ca972.png][]

![d87d97b8bc9d45fbabbbaf08c9433fb5.png][]![ea6301574204486698370997351c8198.png][]

> \#ff0000和\#f00是相同的
> 
> AABBCC能缩写成ABC
> 
> AABBCD不能缩写,要求三个分量都是"叠字形式"才能缩写

颜色也能用英文单词来表示,使用较少,大部分情况需要调和

其它的和颜色相关的属性也是这套规则

#### 文字对齐 ####

文字可以靠左靠右居中对齐

使用text-align属性设置,我们看一个例子

默认情况下是左对齐的

<div class="one">
        这是一个div
       </div>
       
       <style>
       
        .one{
            font-size: 20px;
            font-family: '微软雅黑';
            font-weight: bold;
            text-align: center;
        }

![ddb716c3f0ea4f95a53435824e00bcf5.png][]

![f42d8a34267548a3b189ad956bff2db9.png][]长文本也会剧中对齐

#### ![8e8fc0cea23f490d8fc343ce7aa828a9.png][]文本装饰 ####

使用text-decoration这个属性

> 常用取值:
> 
> underline 下划线.
> 
> none 啥都没有. 可以给 a 标签去掉下划线.
> 
> overline 上划线.
> 
> line-through 删除线

![f85e42155b744010bc077bc96d87b8a6.png][]

![607fcaf2fdee4882b70ab82e2a2a0b2d.png][]

![87340369d42a48dc9539cbc98110029b.png][]

![abdfde92efb1476ab762213fd906f03c.png][] 有的文本默认是什么都没有的,有的文本是默认带下划线的,比如链接就默认带有下划线,然后可以使用 text-decoration: none;来删除下划线

#### 文本缩进 ####

控制段落的 首行 缩进 (其他行不影响)

text-indent: [值];

![60c2814ff78647e6b8f54dddcbf5f5dd.png][]

![ab60c0fe5c7b420aa19fcc4b0a8c7847.png][]

如果想要缩进两个汉字,就将值设置为40px,因为我们设置的一个字像素是20px

手动设置数字有时候不太方便,还需要根据开始设置的像素而改变

> 我们不使用像素做单位,使用一个相对的量:em
> 
> em是一个相对的量,是以文字为基础来进行设置的
> 
> 假设文字大小是20px,那么1em=20px,2em=40px

HTML 中展示文字涉及到这几个基准线: 顶线 中线 基线 (相当于英语四线格的倒数第二条线) 底线

这样就锁进了两个字的距离![a1743f97d1d84016b72f6521ffd14fc5.png][]

文本缩进的值可以是负数,作用是向左缩进

![b9a00f9af787474db87b3033ec4c7489.png][]

#### ![2ac7898e7acd40cd92b5d930183b1f44.png][]行高 ####

行高指的是上下文本行之间的基线距离.

> HTML 中展示文字涉及到这几个基准线:
> 
> 顶线 中线 基线 (相当于英语四线格的倒数第二条线) 底线

![8809674b8f2a4c68940ae08d633e6078.png][]行高=文字高度+行间距 (上一行的顶线到下一行的顶线之间的距离)

![02a8f65f967f4138af92a07a966d7c90.png][]当前行间距明显变大了

### ![1ba74cad644f427d8d73d768928d7531.png][]1.3背景属性 ###

#### 背景颜色 ####

> background-color: \[指定颜色\]

![a592ea62ed7948d3be138d57df607db4.png][]

![b13fbfc0d0b64aeb9ddf413a0946bae1.png][]

####  ####

> background-image: url(...);

![53adab09e6244c7188c43a7ee662e4d2.png][]

![534e8aec1e354f5aae02ede8e31240b1.png][]

背景图片默认情况下是平铺的,所以一张照片会重复拼起来覆盖页面

> 不想平铺使用:background-repeat: no-repeat;取消平铺

![652c26423db4429481631baf25aa6239.png][]

#### 背景位置 ####

> background-position: x y;
> 
> 想让图片居中,使用:background-position:center center ;

![09005701bd4344ce9c52736eed1314fb.png][]

> 参数有三种风格:
> 
> 1. 方位名词: (top, left, right, bottom)
> 
> 2. 精确单位: 坐标或者百分比(以左上角为原点)
> 
> ![a7419f9274fd4064861cc627234cc36b.png][]
> 
> 3. 混合单位: 同时包含方位名词和精确单位

使用坐标系的写法设置背景图位置![c5da0cd4e18a4800a482ceb39cf0d83d.png][]

![1ee8daee0ebb427e8a4cbb13faff6ee7.png][]

#### 背景尺寸 ####

> background-size: length|percentage|cover|contain;
> 
> 可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
> 
> 也可以填百分比: 按照父元素的尺寸设置. cover:
> 
> 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法 显示在背景定位区域中。
> 
> contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.

![bb7d93cf3b064b459c927c724820fb50.png][]

![4043402c613145cd94af4ed742dde712.png][]

![79091b4fbab843d69eaa3350e45b6b94.png][]

![af1f48b76f414f71acbfa05958b2ed88.png][]

在background系列属性的加持下,div任何一个元素都可以用来显示图片,而且提供的功能比img还更强大

### 1.4圆角矩形 ###

html元素默认都是一个矩形

有时候需要带有圆角的矩形,圆角矩形也是非常常见的

![e798a76c8b234da3922d5f45102142a0.png][]

我们先设置一个矩形标签

![300c2e91620c4f39bbc184331eb52759.png][]

然后在设置圆角矩形

![f01bf56266ed41a9b497db7532b54a64.png][]

![f9700ad67b774dbe8ec2e456b6ff60d9.png][]

radius就是圆弧的半径

打开控制台选中标签,可以将radious设置大一些,到50px的时候,就变成一个胶囊形状了

当radious的大小正好是高度height的一半时,两个内切圆重合了,两个圆弧就会变成一个大圆弧

如果再将宽度换成和高度一样的,就会变成一个完整的圆

![f9be1e801ec048608327d089c8f24256.png][]

![6b2cc9b35c0d42b1a8d68c876bcfbe07.png][]

## 2.元素的显示模式 ##

在 CSS 中, HTML 的标签的显示模式有很多. 此处只重点介绍两个: 块级元素 行内元素

任何一个html标签的显示模式都是可以设置的

块级元素和行内元素的区别:

块级元素独占一行,行内元素时不独占一行的

块级元素高度宽度内外边距都是可以设置的 ,行内元素高度宽度行高都无效,内边距有效,外边距有时有效有时无效

块级元素默认和父元素一样宽,行内元素默认宽度是和里面的内容一样宽.

一般有需要的话会将含行内元素转换成块级元素

### 2.1块级元素(display:block) ###

常见的块级元素

> h1~h6
> 
> p
> 
> div
> 
> ul
> 
> ol
> 
> li ......

块级元素的特点:

独占一行 高度, 宽度, 内外边距, 行高都可以控制. 宽度默认是父级元素宽度的 100% (和父元素一样宽) 是一个容器(盒子), 里面可以放行内和块级元素.

### 2.2行内元素(display:inline) ###

> 常见的元素:a strong b em i del s ins u span ...

> 特点:
> 
> 不独占一行, 一行可以显示多个
> 
> 设置高度, 宽度, 行高无效 左右外边距有效(上下无效). 内边距有效.
> 
> 默认宽度就是本身的内容
> 
> 行内元素只能容纳文本和其他行内元素, 不能放块级元素

## 3.盒子模型 ##

盒子模型描述了html元素的基本布局,任何一个html元素(块级元素)都是一个矩形的盒子,盒子里面可以放内容(文本,其它元素)

这个盒子由这几个部分构成

> 边框 border 内容 content 内边距 padding 外边距 margin

![48acbe1e2a7745ccbcb5ccfbf88ee653.png][]

### 3.1边框 ###

边框的基础属性:

> 粗细: border-width
> 
> 样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
> 
> 颜色: border-color

可以改四个方向的任意边框

> border-top/bottom/left/right

我们看一个设置边框的例子

<body>
        <div class="one">
            这是一个div
        </div>
        <style>
            .one{
                width: 200px;
                height: 100px;
                background:orange;
                color: #fff;
    
                text-align: center;
                line-height: 100px;
                border-radius: 10px;
    
                border: 5px black solid;
            }
        </style>
    </body>

border: 5px black solid;

分别设置了边框粗细,颜色,风格

![9a500ba66af141d498ffd6277d4c7c74.png][]

我们设置的属性是:

width: 200px;  
height: 100px;

但是我们在网页上看到的:210x110![397054e16600467c83c321caf94c9999.png][]

说明了边框默认情况下会撑大盒子,weight和height表示的是内容部分的尺寸

可以使用专门的属性防止撑大

> box-sizing: border-box;

就没有撑大效果了![8fbf7c33d0874f72add9ae1ec6acb56f.png][]

边框还可以用rgb设置颜色,也不止实线风格

![6bc29b998e834b8db9b7618327b0207b.png][] ![e8e1870b486148cab5920f0b49c5a516.png][]

> 边框风格还有:dotted.是由点构成的线

看看mdn文档

![1777dd87805a4261b8e6fed4c6351ad9.png][]

### 3.2内边距 ###

![79aea037c979425592c5cf28b6d55b18.png][]

![26d7d5065f5b466985a4d6b06849f6b7.png][]

默认情况下呢,div是贴近这个边框的,我们可以通过设置内边距来调整

![0af0ddce683f4d2baa6923b32ac06a2e.png][]

也能设置四个方面

![6900f2941f044ca8bc54ee5ab96f96d4.png][]

将边距设置为20px,发现文本不再贴近边框了![491373cf76fd4ababf947bc1a78f1045.png][]

借助开发者工具,我们可以看到,只有内边距-左被设置为了20px

![d3d8f6e897ab405e98a231fe2432e830.png][]

如果想给四个方向都设置

![7deca9f87ee0494383995b6722780519.png][]

![baf0951549e648318c0ce4c0f09f6994.png][]

> padding:10px;表示四个方向都是10px
> 
> padding:10px 20px;表示上下内边距是10px,左右内边距是20px
> 
> padding:10px 20px 30px 40px;

padding:10px 20px 30px 40px;设置的方向是**上右下左**![8b3d70a89a6e402a9d5267d6d2dafa16.png][]

### 3.3外边距 ###

设置的是元素和元素之间的距离

![5f5f1f98cb3b44199e9fee5ba1e95ae8.png][]

当我们设置了两个元素时,默认他们是紧贴在一起的,可以通过设外边距的距离来控制两个元素间的距离

我们在第一个div下方设置边距

![45b25a3ccabb4fafa1c010cf0ca0541d.png][] 此时外边距就出来了

![3b5a52050cac4281b6d2c2f9c1ddfb27.png][]

也可以在下面的div的上方设置外边距.margin的写法和padding相同,四个方面都可以写.规则也相同

但他还有个特殊用法

把margin-left和margin-right设置为auto(让浏览器自动调节)此时该元素就能够在父元素内居中放置!

我们给第一个div设置一个子元素div

![f0201ed9e29e40e8a63e56b21ba3ecb6.png][]

margin-left和margin-right都设置为auto

![26cb96ded4834e85aad84651edb1de1c.png][]![156c799aeaea48daa17e625022931f9a.png][]

此时就在父元素内居中放置了,这与文字居中对齐是不同的!

但是垂直方向这样设置不了居中,只能水平方向在父元素居中

> 总结:
> 
> 边框border:设置粗细,颜色,风格.四个方向分别设置
> 
> 内边距padding:四个方向分别设置
> 
> 外边距 margin:四个方向分别设置
> 
> 通过这几个属性就可以控制元素之间,元素和内容之间的相对位置了
> 
> 这些属性都是实现一个页面的基本布局的基本要求

## 4.弹性布局 ##

是用来实现页面布局的,控制某个元素放到指定位置,像如下网站的布局

![f3f720bbd60f47ceb4b6276a067edd90.png][]

元素之间排列就是布局.实现html布局其实很麻烦,最初html没考虑过布局,只是文本的排列.已经不满足要求了,后来诞生了基于表格的布局,通过表格将页面分成很多部分,将元素放置到对应表格就可以了.后来也被淘汰

然后又出现了基于浮动的布局方式,主要是解决水平方向排列的问题,块级元素是垂直方向排列的,独占一行

弹性布局出现了,也是解决水平方向排列问题的,但是比浮动方式更简洁,功能更强大

还有一种更先进的网格布局,是二维布局,更高版本的表格布局,诞生时间不长,一些浏览器不支持.所以弹性布局还是主流

我们看一个例子

<body>
        <div>
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <style>
            div{
                width: 100%;
                height: 150px;
                background: red;
            }
            div>span{
                background-color: green;
            }
        </style>
    </body>

![ca564e550e9b460c8611723f08197c5d.png][]

红色的就是div,绿色是span

span是行内元素,在一行内.我们设置了宽度,但是没用,行内元素不能使用width.所以行内元素虽然是在水平方向排列,但是尺寸边距不可控,不适合进行水平布局

行内块级元素可以设置尺寸,边距也生效,但是默认不独占一行,也不适合水平布局.行内块元素和行内元素相同,都会把源码中的换行符当作一个空格,也会对页面元素布局产生影响

![9399cea98bcc45b58da9f163703a45b8.png][]

比如12没有换行符,23有换行符,那么12没有空格,23有空格

![b54b628b81c04c4b92ddbf6dc0bec6ec.png][]

那么如果想要1234678910.......都紧贴在一起,总不能写一行非常长的代码...

所以不适合布局,使用弹性布局就可以解决问题

### 4.1开启弹性布局 ###

> 给水平排列的元素的父元素设置flex
> 
> ![38e5c2ab65de43f38beedc387d792e21.png][]

设置后子元素就遵守弹性布局![461c1698487f49a896725b2f11c377a0.png][]

元素设置的高度100px 生效了,并且高度和父元素一样高

![795f3d315f6d41fd83085b9c71a205b4.png][]

此时,弹性容器里面的元素,则不再是"块级"行内元素"了,而是称为"弹性元素",是遵守弹性布局的,可以设置尺寸和边框了

### 4.2水平方向排列设置 ###

> justify-content来设置
> 
> flex-strat:靠左排列
> 
> flex-end:靠右排列
> 
> flex-center:居中排列
> 
> space-around:被空白环绕排列
> 
> ![ba4d2244bf794c659757460cf965e239.png][]
> 
> 效果![0e14f7dc97934d24b03b7af262e0335e.png][]justify-content: space-between:中间有空白环绕
> 
> ![6e6e590fa2bd46bdb8edd23113e34870.png][]

我们增加yi'x一些元素![6684c4e302d64786a1b728c536a83e63.png][]

还是能准确计算出空白,然后排列,非常方便![1fda69a77d944e929b9cfa7fb9655c2c.png][]

### 4.3垂直方向排列设置 ###

> align-items来设置
> 
> 我们给之前的元素设置一个高度
> 
> ![1a1455672d624c8c8b8983fa6cbb827e.png][]
> 
> ![4a79ba605cb44f9d8a71d5d6760feef6.png][]
> 
> 元素默认是靠上方的
> 
> 我们设置:align-items: flex-end;靠下
> 
> ![c946e7a1498340a9a917e0eba8cdc7fd.png][]
> 
> align-items: center;居中
> 
> ![6dbfd6d2b42f4d4ebea4a8a00b81b965.png][]

目前为止,结合html和css已经能实现很多的页面效果了

css基础就介绍到这里

[70a2b97062da47b985aa33a089010d38.png]: https://img-blog.csdnimg.cn/70a2b97062da47b985aa33a089010d38.png
[6c2c4d0d3f3440b8a6e4b265c6c63036.png]: https://img-blog.csdnimg.cn/6c2c4d0d3f3440b8a6e4b265c6c63036.png
[5ad0f6e959a243f08b324c0532acd6ac.png]: https://img-blog.csdnimg.cn/5ad0f6e959a243f08b324c0532acd6ac.png
[d70caa08c043419399f988acd06c0888.png]: https://img-blog.csdnimg.cn/d70caa08c043419399f988acd06c0888.png
[d95f6d7b195345db8118c081c51cd49d.png]: https://img-blog.csdnimg.cn/d95f6d7b195345db8118c081c51cd49d.png
[fdf7970529844142a0eadbe236a5e954.png]: https://img-blog.csdnimg.cn/fdf7970529844142a0eadbe236a5e954.png
[458c87b85323449bb2ef6548ec08833e.png]: https://img-blog.csdnimg.cn/458c87b85323449bb2ef6548ec08833e.png
[0afd686f37a64099af36522e6129e2ba.png]: https://img-blog.csdnimg.cn/0afd686f37a64099af36522e6129e2ba.png
[67ab824bcbba4c28af93cac39c2797b6.png]: https://img-blog.csdnimg.cn/67ab824bcbba4c28af93cac39c2797b6.png
[1c35b126452246a0bb164e41933661bb.png]: https://img-blog.csdnimg.cn/1c35b126452246a0bb164e41933661bb.png
[d8b7a2c5c72843f484aece06d765ab92.png]: https://img-blog.csdnimg.cn/d8b7a2c5c72843f484aece06d765ab92.png
[114a5aad816a4774ab29eaf327a9b550.png]: https://img-blog.csdnimg.cn/114a5aad816a4774ab29eaf327a9b550.png
[9c1e76125e854fe6bf136f4358491694.png]: https://img-blog.csdnimg.cn/9c1e76125e854fe6bf136f4358491694.png
[825cb9de939547fd99608cb30dc4cf02.png]: https://img-blog.csdnimg.cn/825cb9de939547fd99608cb30dc4cf02.png
[18bbba8949e64fea9311bf303e088aca.png]: https://img-blog.csdnimg.cn/18bbba8949e64fea9311bf303e088aca.png
[a13264024080487f8e9338a93ba63e3a.png]: https://img-blog.csdnimg.cn/a13264024080487f8e9338a93ba63e3a.png
[04ac8f597df84482858536b4b48ca972.png]: https://img-blog.csdnimg.cn/04ac8f597df84482858536b4b48ca972.png
[d87d97b8bc9d45fbabbbaf08c9433fb5.png]: https://img-blog.csdnimg.cn/d87d97b8bc9d45fbabbbaf08c9433fb5.png
[ea6301574204486698370997351c8198.png]: https://img-blog.csdnimg.cn/ea6301574204486698370997351c8198.png
[ddb716c3f0ea4f95a53435824e00bcf5.png]: https://img-blog.csdnimg.cn/ddb716c3f0ea4f95a53435824e00bcf5.png
[f42d8a34267548a3b189ad956bff2db9.png]: https://img-blog.csdnimg.cn/f42d8a34267548a3b189ad956bff2db9.png
[8e8fc0cea23f490d8fc343ce7aa828a9.png]: https://img-blog.csdnimg.cn/8e8fc0cea23f490d8fc343ce7aa828a9.png
[f85e42155b744010bc077bc96d87b8a6.png]: https://img-blog.csdnimg.cn/f85e42155b744010bc077bc96d87b8a6.png
[607fcaf2fdee4882b70ab82e2a2a0b2d.png]: https://img-blog.csdnimg.cn/607fcaf2fdee4882b70ab82e2a2a0b2d.png
[87340369d42a48dc9539cbc98110029b.png]: https://img-blog.csdnimg.cn/87340369d42a48dc9539cbc98110029b.png
[abdfde92efb1476ab762213fd906f03c.png]: https://img-blog.csdnimg.cn/abdfde92efb1476ab762213fd906f03c.png
[60c2814ff78647e6b8f54dddcbf5f5dd.png]: https://img-blog.csdnimg.cn/60c2814ff78647e6b8f54dddcbf5f5dd.png
[ab60c0fe5c7b420aa19fcc4b0a8c7847.png]: https://img-blog.csdnimg.cn/ab60c0fe5c7b420aa19fcc4b0a8c7847.png
[a1743f97d1d84016b72f6521ffd14fc5.png]: https://img-blog.csdnimg.cn/a1743f97d1d84016b72f6521ffd14fc5.png
[b9a00f9af787474db87b3033ec4c7489.png]: https://img-blog.csdnimg.cn/b9a00f9af787474db87b3033ec4c7489.png
[2ac7898e7acd40cd92b5d930183b1f44.png]: https://img-blog.csdnimg.cn/2ac7898e7acd40cd92b5d930183b1f44.png
[8809674b8f2a4c68940ae08d633e6078.png]: https://img-blog.csdnimg.cn/8809674b8f2a4c68940ae08d633e6078.png
[02a8f65f967f4138af92a07a966d7c90.png]: https://img-blog.csdnimg.cn/02a8f65f967f4138af92a07a966d7c90.png
[1ba74cad644f427d8d73d768928d7531.png]: https://img-blog.csdnimg.cn/1ba74cad644f427d8d73d768928d7531.png
[a592ea62ed7948d3be138d57df607db4.png]: https://img-blog.csdnimg.cn/a592ea62ed7948d3be138d57df607db4.png
[b13fbfc0d0b64aeb9ddf413a0946bae1.png]: https://img-blog.csdnimg.cn/b13fbfc0d0b64aeb9ddf413a0946bae1.png
[53adab09e6244c7188c43a7ee662e4d2.png]: https://img-blog.csdnimg.cn/53adab09e6244c7188c43a7ee662e4d2.png
[534e8aec1e354f5aae02ede8e31240b1.png]: https://img-blog.csdnimg.cn/534e8aec1e354f5aae02ede8e31240b1.png
[652c26423db4429481631baf25aa6239.png]: https://img-blog.csdnimg.cn/652c26423db4429481631baf25aa6239.png
[09005701bd4344ce9c52736eed1314fb.png]: https://img-blog.csdnimg.cn/09005701bd4344ce9c52736eed1314fb.png
[a7419f9274fd4064861cc627234cc36b.png]: https://img-blog.csdnimg.cn/a7419f9274fd4064861cc627234cc36b.png
[c5da0cd4e18a4800a482ceb39cf0d83d.png]: https://img-blog.csdnimg.cn/c5da0cd4e18a4800a482ceb39cf0d83d.png
[1ee8daee0ebb427e8a4cbb13faff6ee7.png]: https://img-blog.csdnimg.cn/1ee8daee0ebb427e8a4cbb13faff6ee7.png
[bb7d93cf3b064b459c927c724820fb50.png]: https://img-blog.csdnimg.cn/bb7d93cf3b064b459c927c724820fb50.png
[4043402c613145cd94af4ed742dde712.png]: https://img-blog.csdnimg.cn/4043402c613145cd94af4ed742dde712.png
[79091b4fbab843d69eaa3350e45b6b94.png]: https://img-blog.csdnimg.cn/79091b4fbab843d69eaa3350e45b6b94.png
[af1f48b76f414f71acbfa05958b2ed88.png]: https://img-blog.csdnimg.cn/af1f48b76f414f71acbfa05958b2ed88.png
[e798a76c8b234da3922d5f45102142a0.png]: https://img-blog.csdnimg.cn/e798a76c8b234da3922d5f45102142a0.png
[300c2e91620c4f39bbc184331eb52759.png]: https://img-blog.csdnimg.cn/300c2e91620c4f39bbc184331eb52759.png
[f01bf56266ed41a9b497db7532b54a64.png]: https://img-blog.csdnimg.cn/f01bf56266ed41a9b497db7532b54a64.png
[f9700ad67b774dbe8ec2e456b6ff60d9.png]: https://img-blog.csdnimg.cn/f9700ad67b774dbe8ec2e456b6ff60d9.png
[f9be1e801ec048608327d089c8f24256.png]: https://img-blog.csdnimg.cn/f9be1e801ec048608327d089c8f24256.png
[6b2cc9b35c0d42b1a8d68c876bcfbe07.png]: https://img-blog.csdnimg.cn/6b2cc9b35c0d42b1a8d68c876bcfbe07.png
[48acbe1e2a7745ccbcb5ccfbf88ee653.png]: https://img-blog.csdnimg.cn/48acbe1e2a7745ccbcb5ccfbf88ee653.png
[9a500ba66af141d498ffd6277d4c7c74.png]: https://img-blog.csdnimg.cn/9a500ba66af141d498ffd6277d4c7c74.png
[397054e16600467c83c321caf94c9999.png]: https://img-blog.csdnimg.cn/397054e16600467c83c321caf94c9999.png
[8fbf7c33d0874f72add9ae1ec6acb56f.png]: https://img-blog.csdnimg.cn/8fbf7c33d0874f72add9ae1ec6acb56f.png
[6bc29b998e834b8db9b7618327b0207b.png]: https://img-blog.csdnimg.cn/6bc29b998e834b8db9b7618327b0207b.png
[e8e1870b486148cab5920f0b49c5a516.png]: https://img-blog.csdnimg.cn/e8e1870b486148cab5920f0b49c5a516.png
[1777dd87805a4261b8e6fed4c6351ad9.png]: https://img-blog.csdnimg.cn/1777dd87805a4261b8e6fed4c6351ad9.png
[79aea037c979425592c5cf28b6d55b18.png]: https://img-blog.csdnimg.cn/79aea037c979425592c5cf28b6d55b18.png
[26d7d5065f5b466985a4d6b06849f6b7.png]: https://img-blog.csdnimg.cn/26d7d5065f5b466985a4d6b06849f6b7.png
[0af0ddce683f4d2baa6923b32ac06a2e.png]: https://img-blog.csdnimg.cn/0af0ddce683f4d2baa6923b32ac06a2e.png
[6900f2941f044ca8bc54ee5ab96f96d4.png]: https://img-blog.csdnimg.cn/6900f2941f044ca8bc54ee5ab96f96d4.png
[491373cf76fd4ababf947bc1a78f1045.png]: https://img-blog.csdnimg.cn/491373cf76fd4ababf947bc1a78f1045.png
[d3d8f6e897ab405e98a231fe2432e830.png]: https://img-blog.csdnimg.cn/d3d8f6e897ab405e98a231fe2432e830.png
[7deca9f87ee0494383995b6722780519.png]: https://img-blog.csdnimg.cn/7deca9f87ee0494383995b6722780519.png
[baf0951549e648318c0ce4c0f09f6994.png]: https://img-blog.csdnimg.cn/baf0951549e648318c0ce4c0f09f6994.png
[8b3d70a89a6e402a9d5267d6d2dafa16.png]: https://img-blog.csdnimg.cn/8b3d70a89a6e402a9d5267d6d2dafa16.png
[5f5f1f98cb3b44199e9fee5ba1e95ae8.png]: https://img-blog.csdnimg.cn/5f5f1f98cb3b44199e9fee5ba1e95ae8.png
[45b25a3ccabb4fafa1c010cf0ca0541d.png]: https://img-blog.csdnimg.cn/45b25a3ccabb4fafa1c010cf0ca0541d.png
[3b5a52050cac4281b6d2c2f9c1ddfb27.png]: https://img-blog.csdnimg.cn/3b5a52050cac4281b6d2c2f9c1ddfb27.png
[f0201ed9e29e40e8a63e56b21ba3ecb6.png]: https://img-blog.csdnimg.cn/f0201ed9e29e40e8a63e56b21ba3ecb6.png
[26cb96ded4834e85aad84651edb1de1c.png]: https://img-blog.csdnimg.cn/26cb96ded4834e85aad84651edb1de1c.png
[156c799aeaea48daa17e625022931f9a.png]: https://img-blog.csdnimg.cn/156c799aeaea48daa17e625022931f9a.png
[f3f720bbd60f47ceb4b6276a067edd90.png]: https://img-blog.csdnimg.cn/f3f720bbd60f47ceb4b6276a067edd90.png
[ca564e550e9b460c8611723f08197c5d.png]: https://img-blog.csdnimg.cn/ca564e550e9b460c8611723f08197c5d.png
[9399cea98bcc45b58da9f163703a45b8.png]: https://img-blog.csdnimg.cn/9399cea98bcc45b58da9f163703a45b8.png
[b54b628b81c04c4b92ddbf6dc0bec6ec.png]: https://img-blog.csdnimg.cn/b54b628b81c04c4b92ddbf6dc0bec6ec.png
[38e5c2ab65de43f38beedc387d792e21.png]: https://img-blog.csdnimg.cn/38e5c2ab65de43f38beedc387d792e21.png
[461c1698487f49a896725b2f11c377a0.png]: https://img-blog.csdnimg.cn/461c1698487f49a896725b2f11c377a0.png
[795f3d315f6d41fd83085b9c71a205b4.png]: https://img-blog.csdnimg.cn/795f3d315f6d41fd83085b9c71a205b4.png
[ba4d2244bf794c659757460cf965e239.png]: https://img-blog.csdnimg.cn/ba4d2244bf794c659757460cf965e239.png
[0e14f7dc97934d24b03b7af262e0335e.png]: https://img-blog.csdnimg.cn/0e14f7dc97934d24b03b7af262e0335e.png
[6e6e590fa2bd46bdb8edd23113e34870.png]: https://img-blog.csdnimg.cn/6e6e590fa2bd46bdb8edd23113e34870.png
[6684c4e302d64786a1b728c536a83e63.png]: https://img-blog.csdnimg.cn/6684c4e302d64786a1b728c536a83e63.png
[1fda69a77d944e929b9cfa7fb9655c2c.png]: https://img-blog.csdnimg.cn/1fda69a77d944e929b9cfa7fb9655c2c.png
[1a1455672d624c8c8b8983fa6cbb827e.png]: https://img-blog.csdnimg.cn/1a1455672d624c8c8b8983fa6cbb827e.png
[4a79ba605cb44f9d8a71d5d6760feef6.png]: https://img-blog.csdnimg.cn/4a79ba605cb44f9d8a71d5d6760feef6.png
[c946e7a1498340a9a917e0eba8cdc7fd.png]: https://img-blog.csdnimg.cn/c946e7a1498340a9a917e0eba8cdc7fd.png
[6dbfd6d2b42f4d4ebea4a8a00b81b965.png]: https://img-blog.csdnimg.cn/6dbfd6d2b42f4d4ebea4a8a00b81b965.png