菜单

CSS 深刻掌握之 float 浮动

2019年3月21日 - 金沙前端

兵来将挡,水来土掩

是难题,总有化解的法门,只是资金财产高低的标题。对于地点那个标题自个儿考虑了好久,刚伊始小编想行使width: 百分百;max-width: 图片宽度; 来处理,可是,小编发现图片宽度并不统一,max-width必要针对每种增幅去设置,那根本不可行,无疑是咎由自取麻烦,因为其实应用中,我们全然无法预见用户将接纳多小幅度面的图形。所以就像单从决定图片样式已经找不到怎么着化解办法了,可是本身初叶关注 width:百分百; 的标题。

大家通晓,在CSS中,宽度的比例是是相持于父级容器宽度的。假若大家能有办法控制图片标签的父容器的宽窄,那难点是还是不是就缓解了啊?

第三,为了让图片标签有可控的父成分,我们先对代码结构做一丢丢调动:

JavaScript

<div class=”img-wrap”> <img src=”imgs/560×200.jpg” alt=””>
</div> <div class=”img-wrap”> <img src=”imgs/440×200.jpg”
alt=””> </div> <div class=”img-wrap”> <img
src=”imgs/300×200.jpg” alt=””> </div>

1
2
3
4
5
6
7
8
9
<div class="img-wrap">
    <img src="imgs/560×200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/440×200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/300×200.jpg" alt="">
</div>

好了,接下去正是怎么决定img-wrap成分的宽窄的难题了。笔者先是想到的是浮动(float),因为大家知道浮动成分的肥瘦是随内容变更的,所以本人先给img-wrap设置了如下样式:

JavaScript

.img-wrap {float: left;}

1
.img-wrap {float: left;}

而是,难点又来了,浮动成分会破坏原有的布局,假设不做扫除浮动处理,会造成后边的内容紧跟在扭转成分之后。所以为了保障不影响别的剧情,大家还得在img-wrap外面加1个器皿来支配转变与否:

JavaScript

<div class=”row”> <div class=”img-wrap”> <img
src=”imgs/560×200.jpg” alt=””> </div> </div> <div
class=”row”> <div class=”img-wrap”> <img
src=”imgs/440×200.jpg” alt=””> </div> </div> <div
class=”row”> <div class=”img-wrap”> <img
src=”imgs/300×200.jpg” alt=””> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="row">
    <div class="img-wrap">
        <img src="imgs/560×200.jpg" alt="">
    </div>
</div>
<div class="row">
    <div class="img-wrap">
        <img src="imgs/440×200.jpg" alt="">
    </div>
</div>
<div class="row">
    <div class="img-wrap">
        <img src="imgs/300×200.jpg" alt="">
    </div>
</div>

好呢,以后大家在来看望,被折腾成什么样子了,图形宽度自适应(3):

图片 1

哈哈哈,好像是自个儿想要的法力了。然而,作为叁个多少性冷淡的开发者,尽管达到了自家想要的成效,但加了那么多层嵌套标签,总让自家备感不舒适。于是,笔者三番五次折腾,终于小编感悟, display:inline-block 的要素宽度也是随内容变更的,而且图片暗许样式恰巧也呈现为inline-block的职能,是或不是能够从那边动手吧?

JavaScript

<div class=”img-wrap”> <img src=”imgs/560×200.jpg” alt=””>
</div> <div class=”img-wrap”> <img src=”imgs/440×200.jpg”
alt=””> </div> <div class=”img-wrap”> <img
src=”imgs/300×200.jpg” alt=””> </div>

1
2
3
4
5
6
7
8
9
<div class="img-wrap">
    <img src="imgs/560×200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/440×200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/300×200.jpg" alt="">
</div>

协会再次回归到唯有一层嵌套,然则css样式却需求调整一下:

JavaScript

.img-wrap {display: inline-block;}

1
.img-wrap {display: inline-block;}

当自个儿,再一次展开测试的时候,称心快意多了,你们感受下:图表宽度自适应(4)。

最后,补上完整的css代码:

CSS

JavaScript

.img-wrap { display: inline-block; } .img-wrap img { width: 100%;
vertical-align: middle; }

1
2
3
4
5
6
7
.img-wrap {
  display: inline-block;
}
.img-wrap img {
    width: 100%;
    vertical-align: middle;
}

2 赞 10 收藏 3
评论

图片 2

<div class=”img-wrap”>

4.2 clear属性的阙如

clear属性只对块级成分有效,可是::after等伪成分默许都以内联水平,由此,在实际工作中,我们平日使用下面包车型客车代码来裁撤浮动带来的影响:

.clear::after{ content: “”; display:
table;/*也足以是’block’只怕是’list-item’*/ clear: both; }

1
2
3
4
5
.clear::after{
    content: "";
    display: table;/*也可以是’block’或者是’list-item’*/
    clear: both;
}

由于clear:both意义的齐云山真面目是让投机不和float成分在一行展现,并不是真正意义上的解除浮动,因而float成分有局部倒霉的特色还是存在,表以后:

/\* HTML代码 \*/ &lt;div class="box1"&gt;&lt;/div&gt; &lt;div
class="box2"&gt;&lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69ec384b8874186375-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384b8874186375-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384b8874186375-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69ec384b8874186375-1" class="crayon-line">
/* HTML代码 */
</div>
<div id="crayon-5b8f69ec384b8874186375-2" class="crayon-line crayon-striped-line">
&lt;div class=&quot;box1&quot;&gt;&lt;/div&gt;
</div>
<div id="crayon-5b8f69ec384b8874186375-3" class="crayon-line">
&lt;div class=&quot;box2&quot;&gt;&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

/* CSS代码 */ .box1 { float: left; width: 100px; height: 60px;
padding: 10px; border: 3px solid black; background:
url(“../../lib/img/mm1.png”) center no-repeat; } .box2 { clear: both;
margin-top: -20px; border: 3px solid red; padding:10px; width:100px;
height: 60px; background: url(“../../lib/img/mm2.jpg”) center no-repeat;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* CSS代码 */
.box1 {
    float: left;
    width: 100px;
    height: 60px;
    padding: 10px;
    border: 3px solid black;
    background: url("../../lib/img/mm1.png") center no-repeat;
}
.box2 {
    clear: both;
    margin-top: -20px;
    border: 3px solid red;
    padding:10px;
    width:100px;
    height: 60px;
    background: url("../../lib/img/mm2.jpg") center no-repeat;
}

在本例中,设置.box2中的margin-top从不任何的效果,如下图所示:
图片 3

&lt;div class="father"&gt; &lt;div class="float"&gt; &lt;img
src="../../lib/img/mm1.png"&gt; &lt;/div&gt;
&lt;p&gt;美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫&lt;/p&gt;
&lt;/div&gt; &lt;div&gt;我要美女1,我还要美女2&lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384bf922765024-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384bf922765024-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384bf922765024-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69ec384bf922765024-1" class="crayon-line">
&lt;div class=&quot;father&quot;&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-2" class="crayon-line crayon-striped-line">
    &lt;div class=&quot;float&quot;&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-3" class="crayon-line">
        &lt;img src=&quot;../../lib/img/mm1.png&quot;&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-4" class="crayon-line crayon-striped-line">
    &lt;/div&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-5" class="crayon-line">
    &lt;p&gt;美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫&lt;/p&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-6" class="crayon-line crayon-striped-line">
&lt;/div&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-7" class="crayon-line">
&lt;div&gt;我要美女1,我还要美女2&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

/* CSS代码 */ .father{ border: 1px solid deeppink; width: 500px;
height: 70px; } .father:after{ content: ”; display: table; clear: both;
} .float{ float: left; } .father img { width: 60px; height: 70px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* CSS代码 */
.father{
    border: 1px solid deeppink;
    width: 500px;
    height: 70px;
}
.father:after{
    content: ”;
    display: table;
    clear: both;
}
.float{
    float: left;
}
.father img {
    width: 60px;
    height: 70px;
}

在本例中,设置clean:both来堵住浮动对前边成分的影响,但是最终的错位效果依然时有爆发了(能够安装.father的字体大小为0,然后设置p标签的字体大小化解错误的标题)。

图片 4

有鉴于此,clear:both只幸好大势所趋程度上拔除浮动的影响,要想周全去除浮动元素的熏陶,借助任何的手腕——BFC,接着看下文。

CSS布局之div交叉排布与底部对齐–flex达成,css–flex

新近在用wordpress写页面时,设计师给出了一种网页排布图样,从前没有遇上过,其在总计机上(分辨率大于768px)的职能图如下:

图片 5

而在妹夫大(分辨率小于等于768px)上须要这样排列:

图片 6

本人想到了两种方式

率先种是用bootstrap的row、col-md同盟col-md-push、col-md-pull来兑现,代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link rel="stylesheet" href="../../vendor/bootstrap-3.3.7-dist/css/bootstrap.min.css" media="screen" title="no title">
 7     <title>div左右交叉布局--文字和图片交叉</title>
 8   </head>
 9   <body>
10 <style>
11 .C {
12   margin: auto;
13   padding: 30px 20px 40px;
14   max-width: 600px;
15 }
16 .I {
17   width: 100%;
18 }
19 .IW, .TW {
20   border: 1px solid rgba(0, 0, 0, 0.3);;
21 }
22 .TW {
23   padding: 25%;
24 }
25 </style>
26 <div class="C">
27   <div class="row">
28     <div class="col-md-6">
29       <div class="IW">
30         <img class="I" src="../../asset/images/flex/r1.jpg" alt="图片 7">
31       </div>
32     </div>
33     <div class="col-md-6">
34       <div class="TW">我是文字,我用到了padding来实现大致居中</div>
35     </div>
36   </div>
37   <div class="row">
38     <div class="col-md-6 col-md-push-6">
39       <div class="IW">
40         <img class="I" src="../../asset/images/flex/r1.jpg" alt="图片 8">
41       </div>
42     </div>
43     <div class="col-md-6 col-md-pull-6">
44       <div class="TW">我是文字,我用到了padding来实现大致居中</div>
45     </div>
46   </div>
47   <div class="row">
48     <div class="col-md-6">
49       <div class="IW">
50         <img class="I" src="../../asset/images/flex/r1.jpg" alt="图片 9">
51       </div>
52     </div>
53     <div class="col-md-6">
54       <div class="TW">我是文字,我用到了padding来实现大致居中</div>
55     </div>
56   </div>
57 </div>
58   </body>
59 </html>

电脑上效益:

图片 10     

手提式有线电话机上效果:

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta
charset=”utf-8″> 5 <meta name=”viewport”
content=”width=device-width, initial-scale=1″> 6
<title>div左右接力布局–文字和图纸交叉</title> 7
</head> 8 <body> 9 <style> 10 .C { 11 margin: auto; 12
padding: 30px 20px 40px; 13 max-width: 600px; 14 } 15 .LAND { 16 display:
block; 17 width: 百分之百; 18 } 19 @media only screen and (min-width: 768px)
{ 20 .大切诺基 { 21 display: flex; 22 width: 百分之百; 23 } 24 } 25
.PRADO:nth-child(even) { 26 flex-direction: row-reverse; 27 } 28 .I, .W { 29
width: 4/8; 30 } 31 .I img { 32 width: 百分百; 33 } 34 .W { 35 display:
flex; 36 flex-direction: column; 37 font-size: 16px; 38 justify-content:
center; 39 } 40 </style> 41 <div class=”C”> 42 <div
class=”LX570″> 43 <div class=”I”><img
src=”../images/flex/r1.jpg” alt=””></div> 44 <div
class=”W”>小编是文字,作者使用了flex布局,小编按column在主轴y轴上居中对齐。</div>
45 </div> 46 <div class=”PAJERO”> 47 <div class=”I”><img
src=”../images/flex/r1.jpg” alt=””></div> 48 <div
class=”W”>小编是文字,小编使用了flex布局,作者按column在主轴y轴上居中对齐。</div>
49 </div> 50 <div class=”逍客”> 51 <div class=”I”><img
src=”../images/flex/r1.jpg” alt=””></div> 52 <div
class=”W”>作者是文字,作者动用了flex布局,笔者按column在主轴y轴上居中对齐。</div>
53 </div> 54 </div> 55 </body> 56 </html>

电脑上效果如下:

.XC60:nth-child(even) { flex-direction: row-reverse;
} ,然后在手提式有线话机上让其常规排列即可 .Tucson {
display: block; width: 百分之百; } 。

 

本身还发现,用flex能够很不难的落实五个div底部对齐,具体代码如下:

.C {
  display: flex;
  align-items: flex-end;
}
.A {
  background: rgba(255, 0, 0, 0.1);
}
.A:nth-child(odd) {
  background: #1a88ea;
  color: white;
  font-size: 30px;
  padding: 10px 15px;
}
</style>
<div class="C">
  <div class="A">创新</div>
  <div class="A">实验基地</div>
</div>

事实上正是让C内的div,以主轴为x(按row排列时,主轴即为x,未指明flex-diretion时,私下认可为按row排列),排布方向为row,然后让div都在y轴(交叉轴)上远在底部 align-items: flex-end; 

职能如下:

<style media=”screen”> .C { position: relative; } .A { display:
inline-block; background: rgba(255, 0, 0, 0.1); } .A:nth-child(odd) {
background: #1a88ea; color: white; font-size: 30px; padding: 10px 15px;
} .A:nth-child(even) { bottom: 0; position: absolute; } </style>
<div class=”C”> <div class=”A”>立异</div> <div
class=”A”>实验营地</div> </div>

但是肯定,用flex完毕尤其方便。

 

ps:
笔者那篇博客快写完时,chrome崩溃了四次,不知底是输入法的缘故,照旧chrome本身的原故,反正一输入字符就自动退出。

 

 

图片 11

方今在用wordpress写页面时,设计师给出了一种网页排布图样,在此之前未曾境遇过,其在电脑…

简单的说尝试

为了保证新闻彰显完整,保证图片随可视区域上涨幅度变化而宽度自适应,俺平昔给图片标签设置了大幅百分之百,具体职能请看:图表宽度自适应(2)。

和演示一同一,大家依旧手动改变可视区域上涨幅度来看到图片的显示:

图片 12

于今看来图片是足以根据可视区域上涨幅度自适应了,可是难题来了:首先,全体图片不论原始大小宽窄一律以但是区域上涨幅度为专业了,齐刷刷的一刀切,毫无美感;其次,当较宽彰显区域展现较窄图片时,图片出现严重失真,甚至失去识别度。好啊,窄屏的标题一蹴而就了,宽屏的标题有来了,不晓得那是要闹哪样!不过难点出来了,我们总要想方法去消除啊,那咋办呢?

html        
                                                                       
              

2.3 块状化

块状化的趣味是,一旦成分float的习性不为none,则其display总括值正是block或许table。举个例子:

/* JavaScript代码 */ var span = document.createElement(‘span’)
document.body.appendChild(span) console.log(‘1.’ +
window.getComputedStyle(span).display) // 设置成分左浮动
span.style.cssFloat = ‘left’ console.log(‘2.’ +
window.getComputedStyle(span).display)

1
2
3
4
5
6
7
/* JavaScript代码 */
var span = document.createElement(‘span’)
document.body.appendChild(span)
console.log(‘1.’ + window.getComputedStyle(span).display)
// 设置元素左浮动
span.style.cssFloat = ‘left’
console.log(‘2.’ + window.getComputedStyle(span).display)

在控制夏洛特的结果如下:

1.inline 2.block

1
2
1.inline
2.block

不精通我们有没有跟本人一样的疑难:既然设置float后,成分就块状化了,那么怎么还是能够发出包裹性的法力啊?回答这几个标题,须求重新演讲下块状化的趣味,那里的块状化意思是能够像block成分一样设置宽和高,并不是当真的块成分。

之所以,没有任何理由现身下边包车型大巴样式组合:

span{ display: block; /* 多余 */ float: left; } span{ float: left;
vertical-align: middle; /* 多余 */ }

1
2
3
4
5
6
7
8
span{
    display: block; /* 多余 */
    float: left;
}
span{
    float: left;
    vertical-align: middle; /* 多余 */
}

浅谈图片宽度自适应化解方案

2015/10/19 · CSS,
HTML5 · 3
评论 ·
自适应

原来的小说出处: 百码山庄   

在网页设计中,随着响应式设计的来临,各个响应式设计方案数见不鲜。对于图片响应式的标题也有过多前端开发人士在展开研商。相比较好的图样响应式设想就是在区别的荧屏分辨率下行使分裂实际尺寸的图纸,而达到规定的标准在飞速互连网环境中使用大或重特大高清图片,在低速互连网或索要替用户节省流量能源的条件中利用小而明显的图片,保障用户无论在何种环境下都能有美好的浏览体验。然则那是三个庞然大物而拥有挑战的工作,作者那边不做这么些研讨,因为小编日前还尚无那上头很好的履行。那里笔者是要跟大家谈谈下同一张图片在不相同幅度的展现区域中的展现难题。

css        
                                                                       
                 

CSS 深远通晓之 float 浮动

2018/05/25 · CSS ·
float

原版的书文出处: micstone   

float属性是CSS中常用的叁性情质,在事实上中国人民解放军海军事工业程大学业作中央银行使的十三分多,假诺使用不当就会产出预期之外的法力。即使很多人说变化会用就行、浮动过时了,可是对于精美的前端开发职员,须要有”刨根问底”的神气,那样在产出有的题材的时候才不至于”手慌脚乱”!由此,明天就专门整理和小结一下float属性。

难点讲述

我们先来看下作者想要描述的标题。首先小编准备了三张宽度区别的图形,让他俩垂直排列在页面中,除了剔除图片本人在笔直方向上发生的间距,不做任何任何样式处理,那种景色大家普通在博文中平常见到,在写博文的时候日常应用,具体效果请看:图片宽度自适应(1)。不难看下我们的页面结构:

JavaScript

<img src=”imgs/560×200.jpg” alt=””><br> <img
src=”imgs/440×200.jpg” alt=””><br> <img
src=”imgs/300×200.jpg” alt=””>

1
2
3
<img src="imgs/560×200.jpg" alt=""><br>
<img src="imgs/440×200.jpg" alt=""><br>
<img src="imgs/300×200.jpg" alt="">

为了方便查看效果,大家平昔调整浏览器宽度来测试。测试效果如下gif图所示:

图片 13

小编们简单察觉,在大家转移窗口可视区域的时候,图片宽度并不会随着变动,以至于在小显示器中大家不得不开到图片的一片段,那是很四个人所不乐见的,因为那极有或然会造成重庆大学音讯丢失。那么这些难点何以缓解?

(浮动–但不难影响页面布局 display:inline-block
—-块级成分宽度随页面而转变) 效果如下:

参考

张鑫旭-《CSS世界》


我简介:

中文名:石头
英文名:micstone
某电商平台前端程序员一名,偶尔也写写后端代码,工作经历二〇一五.7~至今。

1 赞 1 收藏
评论

图片 14

  display: inline-block;

2.2 中度塌陷

float属性有贰个资深的特征:会让父成分的中度塌陷。如章节2.第11中学的效果图,父成分div的可观并没有被子成分撑开(鲜绿区域),那种意义能够称呼”中度塌陷“。导致中度塌陷的原委是因为变化成分脱离了常规的文档流,则div.father认为其没有子成分,所以发生了莫斯中国科学技术大学学塌陷。后文中将讲述如何缓解低度塌陷的难点。

(大屏时)

6. 结语

正文是本身上学float属性总计作品,或然存在知情准确的地点,欢迎咱们在评论区评论,教导迷津,大家相互帮忙,相互提升。

终极,希望本文的始末能够对你对float的驾驭可以拥有帮助,多谢阅读。

}

2.1 包裹性

所谓”包裹性”,其实是由”包裹”和”自适应”两有的组成。要是有以下CSS代码:

/* CSS代码 */ .father{ border: 1px solid deeppink; width: 200px; }
.son { float: left; font-size: 0; border: 1px solid blue; padding: 5px;
} .father img { width: 128px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* CSS代码 */
.father{
    border: 1px solid deeppink;
    width: 200px;
}
.son {
    float: left;
    font-size: 0;
    border: 1px solid blue;
    padding: 5px;
}
.father img {
    width: 128px;
}

1)包裹。本例上校浮动成分父元素宽度设置为200px,浮动成分的子成分是2个128px上升幅度的图片,则此时生成成分宽度表现为”包裹”,也便是当中图片的小幅度128px。

/* HTML代码 */ <div class=”father”> <div class=”son”>
<img src=”../../lib/img/mm1.png”> </div> </div>

1
2
3
4
5
6
/* HTML代码 */
<div class="father">
    <div class="son">
        <img src="../../lib/img/mm1.png">
    </div>
</div>

 图片 15

 

2)自适应性。在浮动子成分的中追加部分文字:

/* HTML代码 */ <div class=”father”> <div class=”son”>
<img src=”../../lib/img/mm1.png”> <span style=”font-size:
12px”>美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫</span>
</div> </div>

1
2
3
4
5
6
7
/* HTML代码 */
<div class="father">
    <div class="son">
        <img src="../../lib/img/mm1.png">
        <span style="font-size: 12px">美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫</span>
    </div>
</div>

那时候,浮动元素宽度就自适应父元素的200px宽度,最后的幅度表现也是200px。如下图所示:

图片 16

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图