巧用margin/padding的百分比率完成中度自适应（多用于占位，防止闪烁）

2016/01/03 · CSS ·
margin,
padding

原稿出处： array_huang   

本文看重于一个基础却又不难模糊的css知识点：当margin/padding取格局为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！
或许你会说，left/right以父元素的width为参照物好通晓，不过top/bottom何以也是以父元素的width为参照物的啊？网上众说纷纷，关键如故看W3C的规范：

巧用margin/padding的百分比率达成中度自适应（多用来占位，防止闪烁），marginpadding

一个基础却又易于混淆的css知识点

正文依赖于一个基础却又简单模糊的css知识点：当margin/padding取方式为百分比的值时，无论是left/right，仍然top/bottom，都是以父元素的width为参照物的！

 也许你会说，left/right以父元素的width为参照物好明白，不过top/bottom为啥也是以父元素的width为参照物的啊？

1、中度自适应占位

即使有这么个场景：

 

如上图所示，有如此一种用来放图片的器皿，图片都是正方形（为了便于举例用正方形，实际上只要固定长宽比例即可）。

在PC端好办，容器的宽高都写死是稍微px，那样就算图片加载不出去容器都不会变卦。可是在移动端，由于各机型分辨率相差太大，写死px是纯属无法的，终究还得靠百分比来已毕自适应：

1. 容器宽度设个50%吗，那样一行放俩容器，各占显示屏宽度一半，没难题。

2. 图表宽度设个100%取容器的涨幅，没难点。

3. 容器高度没办法设置啊，因为容器宽高的参照物分裂等，而且要求是莫大与幅度一致，所以不可以通过为容器中度设置百分比来达成，那就只可以靠内容中度撑开了。

4. 容器的内容惊人就是图形的可观，若图片是正方形，则图片中度与图片宽度一致，也即与容器宽度一致，看起来没难题是吗？实际上，在浏览器把图纸加载出来往日，图片的莫大是零，那可就不可能把容器撑开了， 那样一来，即便图片加载速度迅猛，容器在图片加载前后都会有一个变迁的长河，也就是俗称的“闪烁”，而如若图片加载不出去，全部布局就更为难看了。

当今难题早就出来了，就是何等做到不靠图片本身就能把容器的莫大撑开。

安装容器的padding-bottom/top

动用margin/padding的百分比率来解决自适应中度的关键在于：容器margin/padding的比例参照物是父元素的涨幅，而容器的width的百分比参照物也是父元素的增加率，俩性能参照物一致，那么想要把那俩属性的值统一起来就很粗略了。

优化方案是那样的：给容器设置padding-top/padding-bottom跟width一致的值（百分比）。

1 <div id="container" class="placeholder"></div>

1 #container {
2   width: 50%;  //父元素宽度的一半
3   background-color: red;  //仅为了方便演示}
4 .placeholder {
5   padding-top: 50%; //与width: 50%;的值保持一致，也就是相当于父元素宽度的一半。
6 }

结果，容器的视觉效果如下：

容器的盒子模型如下：

从盒子模型可以看出，纵然容器的始末惊人为0，但由于有了跟内容宽度一致的padding，由此总体视觉效果上像是被撑开了。此方案浏览器包容性很科学，唯一的欠缺是无力回天给容器设置max-height属性了，因为max-height只可以限量内容中度，而不可能限制padding（我原以为设置box-sizing:
border-box;可以让max-height限制padding，可是亲测无效）

给子元素/伪元素设置margin/padding撑开容器

从地方的方案看出max-height失效的因由是容器的高度本来就是padding撑的，而内容惊人为0，max-height不能起效果。那想要优化那点，唯一的不二法门就是接纳内容惊人来撑开而非padding，这些方案跟消除浮动所用的方案充足相似：给容器添加一个子元素/伪元素，并把子元素/伪元素的margin/padding设为100%，使其实际高度相当于器皿的幅度，如此一来，便能把容器的可观撑至与幅度一致了。由于添加子元素与HTML语义化相悖，由此更推荐应用伪元素(:after)来达成此方案。

1 <div id="container" class="placeholder"></div>

#container {
  width: 50%;
  position: relative;
  background-color: red;
  overflow: hidden;  //需要触发BFC消除margin折叠的问题
}
.placeholder:after {
  content: '';
  display: block;
  margin-top: 100%; //margin 百分比相对父元素宽度计算
}

那儿视觉效果上与上一方案无异，重点来看看此时容器的盒子模型：

可以阅览，此时容器的内容惊人与内容宽度一致，岳母再也不用担心我无能为力透过max-height来界定容器中度了。

除此以外，使用margin的话须求考虑margin折叠的题材（参考），padding则无此烦恼。

 容器内部怎样添加内容

 上述方案只提及怎么着不看重容器内容来撑开容器，那么，在撑开容器后，如何给容器添加内容（图片、文本等）呢？

答案很粗略，这就是选择position: absolute;

1 <div id="container" class="placeholder">
2   <img src="http://img.arrayhuang.cn/product/miya-1060079/multiple/[email protected]_415w_415h_1c_0i_1o_1x.jpg" />
3 </div>

 1 #container {
 2   width: 50%;
 3   position: relative;
 4   background-color: red;
 5   overflow: hidden;  //需要触发BFC消除margin折叠的问题
 6 }
 7 .placeholder:after {
 8   content: '';
 9   display: block;
10   margin-top: 100%; //margin 百分比相对父元素宽度计算
11 } 
12 img {
13   position: absolute;
14   top: 0;
15   width: 100%;
16 }

后补

 宽高不均等的自适应如何做？

 有对象可能会问，下边提到的都是开间与高度一致的境况，假如不同那怎么做吧？其实自适应的首要性在于，元素的宽高非得保证一个原则性的百分比，比如说宽高一致比例就是1:1，宽是高的两倍这就是2:1，只要这些比例是强烈而且一定的，那么只须要相应地修改margin/padding的百分比率即可适应分裂的宽高比例。

 还有其他的宽高自适应方案吗？

 当然有，比如说css3新推出的长短单位vw，就是以屏幕宽度为参照物的，只要给元素的width和height都用上vw单位，那width跟height就足以轻易设成一样的了，不过既然是css3，浏览器包容性肯定成难点：

总结

 自适应的精髓在于宽度，margin/padding设置比例弥补了元素中度不能自适应地与元素宽度保持一致的瑕疵。

 

多用来占位，padding的百分比率完结中度自适应。
一个基础却又不难模糊的css知识点 本文看重于一个基础…

一个基础却又不难混淆视听的css知识点

一个基础却又不难模糊的css知识点

本文保护于一个基础却又简单模糊的css知识点：当margin/padding取格局为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！
唯恐你会说，left/right以父元素的width为参照物好驾驭，但是top/bottom何以也是以父元素的width为参照物的啊？网上众说纷纷，关键仍然看W3C的规范：

Note that in a horizontal flow, percentages on ‘margin-top’ and
‘margin-bottom’ are relative to the width of the containing block, not
the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are
relative to the height, not the width).

Note that percentages on ‘padding-top’ and ‘padding-bottom’ are
relative to the width of the containing block, not the height (at
least in a horizontal flow; in a vertical flow they are relative to
the height).

权威一出，记住就好，科科。

Note that in a horizontal flow, percentages on ‘margin-top’ and
‘margin-bottom’ are relative to the width of the containing block, not
the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are
relative to the height, not the width).

Note that percentages on ‘padding-top’ and ‘padding-bottom’ are
relative to the width of the containing block, not the height (at
least in a horizontal flow; in a vertical flow they are relative to
the height).

正文依赖于一个基础却又易于混淆的css知识点：当margin/padding取情势为百分比的值时，无论是left/right，依然top/bottom，都是以父元素的width为参照物的！

惊人自适应占位

假若有这么个现象：

如上图所示，有这么一种用来放图片的器皿，图片都是正方形（为了便利举例用正方形，实际上只要固定长宽比例即可）。
在PC端好办，容器的宽高都写死是多少px，这样就是图片加载不出去容器都不会生成。不过在移动端，由于各机型分辨率相差太大，写死px是纯属无法的，终究还得靠百分比来完毕自适应：

1. 容器宽度设个50%呢，这样一行放俩容器，各占显示屏宽度一半，没难题。
2. 图表宽度设个100%取容器的小幅，没难题。
3. 容器中度没办法设置啊，因为容器宽高的参照物不雷同，而且必要是莫大与幅度一致，所以无法通过为容器高度设置百分比来落成，那就只好靠内容中度撑开了。
4. 亚洲必赢官网 ，容器的内容惊人就是图形的冲天，若图片是正方形，则图片中度与图片宽度一致，也即与容器宽度一致，看起来没难题是吗？实际上，在浏览器把图纸加载出来在此之前，图片的惊人是零，那可就不能把容器撑开了，如下图所示：

这样一来，即便图片加载速度急速，容器在图纸加载前后都会有一个转变的历程，也就是俗称的“闪烁”，而一旦图片加载不出去，全体布局就进一步难看了。
现在难题一度出去了，就是如何已毕不靠图片本身就能把容器的万丈撑开。

高于一出，记住就好，科科。

 也许你会说，left/right以父元素的width为参照物好通晓，可是top/bottom为啥也是以父元素的width为参照物的啊？

安装容器的padding-bottom/top

应用margin/padding的百分比率来缓解自适应中度的关键在于：容器margin/padding的比重参照物是父元素的大幅度，而容器的width的比重参照物也是父元素的升幅，俩质量参照物一致，那么想要把那俩属性的值统一起来就很简单了。
优化方案是那样的：给容器设置padding-top/padding-bottom跟width一致的值（百分比）。

#container { width: 50%; //父元素宽度的一半 background-color: red;
//仅为了便于演示 } .placeholder { padding-top: 50%; //与width:
50%;的值保持一致，也就是一对一于父元素宽度的一半。 }

1 2 3 4 5 6 7

#container {   width: 50%;  //父元素宽度的一半   background-color: red;  //仅为了方便演示 } .placeholder {   padding-top: 50%; //与width: 50%;的值保持一致，也就是相当于父元素宽度的一半。 }

<div id=”container” class=”placeholder”></div>

1	<div id="container" class="placeholder"></div>

结果，容器的视觉效果如下：

容器的盒子模型如下：

从盒子模型可以看看，即便容器的始末惊人为0，但由于有了跟内容宽度一致的padding，由此总体视觉效果上像是被撑开了。此方案浏览器包容性很正确，唯一的欠缺是无能为力给容器设置max-height属性了，因为max-height只得限量内容中度，而无法限制padding（我原以为设置box-sizing: border-box;可以让max-height界定padding，不过亲测无效，通晓的情人劳累告知一下缘故）。

高度自适应占位

假如有这么个场景：

如上图所示，有那般一种用来放图片的容器，图片都是正方形（为了便于举例用正方形，实际上只要固定长宽比例即可）。在PC端好办，容器的宽高都写死是多少px，那样就是图片加载不出去容器都不会转变。然则在移动端，由于各机型分辨率相差太大，写死px是纯属不容许的，终究还得靠百分比来完毕自适应：

1. 容器宽度设个50%呢，那样一行放俩容器，各占显示屏宽度一半，没难点。

2. 图片宽度设个100%取容器的增幅，没难题。

3. 容器中度没办法设置啊，因为容器宽高的参照物分化等，而且须要是惊人与幅度一致，所以不能透过为容器高度设置百分比来达成，那就只好靠内容高度撑开了。

4. 容器的始末惊人就是图表的中度，若图片是正方形，则图片中度与图片宽度一致，也即与容器宽度一致，看起来没难题是啊？实际上，在浏览器把图纸加载出来以前，图片的冲天是零，那可就不可能把容器撑开了，如下图所示：

那样一来，尽管图片加载速度连忙，容器在图片加载前后都会有一个生成的进度，也就是俗称的“闪烁”，而只要图片加载不出来，全体布局就更是难看了。现在题材早就出来了，就是哪些形成不靠图片本身就能把容器的万丈撑开。

1、高度自适应占位

给子元素/伪元素设置margin/padding撑开容器

从地点的方案看出max-height失效的原因是容器的惊人本来就是padding撑的，而内容惊人为0，max-height不知所厝起效果。那想要优化那或多或少，唯一的措施就是运用内容中度来撑开而非padding，这么些方案跟消除浮动所用的方案足够相似：给容器添加一个子元素/伪元素，并把子元素/伪元素的margin/padding设为100%，使其实际中度相当于器皿的涨幅，如此一来，便能把容器的可观撑至与幅度一致了。由于添加子元素与HTML语义化相悖，因而更推荐应用伪元素(:after)来促成此方案。

#container { width: 50%; position: relative; background-color: red;
overflow: hidden; //须要触发BFC消除margin折叠的题材 } .placeholder:after
{ content: ”; display: block; margin-top: 100%; //margin
百分比相对父元素宽度总结 }

1 2 3 4 5 6 7 8 9 10 11

#container {   width: 50%;   position: relative;   background-color: red;   overflow: hidden;  //需要触发BFC消除margin折叠的问题 } .placeholder:after {   content: ”;   display: block;   margin-top: 100%; //margin 百分比相对父元素宽度计算 }

<div id=”container” class=”placeholder”></div>

1	<div id="container" class="placeholder"></div>

那时视觉效果上与上一方案无异，重点来看望此时容器的盒子模型：

可以见到，此时容器的始末惊人与内容宽度一致，母亲再也不用担心自身一筹莫展透过max-height来界定容器高度了。
除此以外，使用margin的话需求考虑margin折叠的题材（参考），padding则无此烦恼。

设置容器的padding-bottom/top

选拔margin/padding的百分比率来缓解自适应中度的关键在于：容器margin/padding的比重参照物是父元素的肥瘦，而容器的width的比例参照物也是父元素的大幅度，俩品质参照物一致，那么想要把那俩属性的值统一起来就很简单了。优化方案是这么的：给容器设置padding-top/padding-bottom跟width一致的值（百分比）。

#container {
  width: 50%;  //父元素宽度的一半
  background-color: red;  //仅为了方便演示
}
.placeholder {
  padding-top: 50%; //与width: 50%;的值保持一致，也就是相当于父元素宽度的一半。
}

<div id="container" class="placeholder"></div>

结果，容器的视觉效果如下：

容器的盒子模型如下：

从盒子模型可以看出，固然容器的始末惊人为0，但出于有了跟内容宽度一致的padding，因而全部视觉效果上像是被撑开了。此方案浏览器包容性很科学，唯一的弱项是无法给容器设置max-height属性了，因为max-height不得不限量内容低度，而无法限制padding（我原以为设置box-sizing: border-box;可以让max-height限定padding，不过亲测无效，领会的恋人勤奋告知一下缘故）。

如若有这么个现象：

容器内部怎么着添加内容

上述方案只提及如何不看重容器内容来撑开容器，那么，在撑开容器后，如何给容器添加内容（图片、文本等）呢？
答案很不难，那就是行使position: absolute;：

#container { width: 50%; position: relative; background-color: red;
overflow: hidden; //须求触发BFC消除margin折叠的题材 } .placeholder:after
{ content: ”; display: block; margin-top: 100%; //margin
百分比绝对父元素宽度总结 } img { position: absolute; top: 0; width:
100%; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

#container {   width: 50%;   position: relative;   background-color: red;   overflow: hidden;  //需要触发BFC消除margin折叠的问题 } .placeholder:after {   content: ”;   display: block;   margin-top: 100%; //margin 百分比相对父元素宽度计算 } img {   position: absolute;   top: 0;   width: 100%; }

<div id=”container” class=”placeholder”> <img
src=””
/> </div>

1 2 3

<div id="container" class="placeholder">   <img src="http://img.arrayhuang.cn/product/miya-1060079/multiple/0.jpg@1e_415w_415h_1c_0i_1o_1x.jpg" /> </div>

成效如下：

给子元素/伪元素设置margin/padding撑开容器

从上面的方案看出max-height失效的原委是容器的惊人本来就是padding撑的，而内容惊人为0，max-height不能起效果。那想要优化那或多或少，唯一的方法就是应用内容中度来撑开而非padding，这么些方案跟消除浮动所用的方案格外相似：给容器添加一个子元素/伪元素，并把子元素/伪元素的margin/padding设为100%，使其实际中度相当于器皿的增进率，如此一来，便能把容器的可观撑至与幅度一致了。由于添加子元素与HTML语义化相悖，由此更推荐应用伪元素(:after)来贯彻此方案。

#container {
  width: 50%;
  position: relative;
  background-color: red;
  overflow: hidden;  //需要触发BFC消除margin折叠的问题
}
.placeholder:after {
  content: '';
  display: block;
  margin-top: 100%; //margin 百分比相对父元素宽度计算
} 

<div id="container" class="placeholder"></div>

此刻视觉效果上与上一方案无异，重点来探视此时容器的盒子模型：

可以看到，此时容器的始末中度与内容宽度一致，阿姨再也不用担心自身一筹莫展通过max-height来限制容器中度了。
除此以外，使用margin的话须要考虑margin折叠的题材（参考），padding则无此烦恼。

后补

容器内部如何添加内容

上述方案只提及怎么着不看重容器内容来撑开容器，那么，在撑开容器后，怎么样给容器添加内容（图片、文本等）呢？
答案很粗略，那就是使用position: absolute;：

#container {
  width: 50%;
  position: relative;
  background-color: red;
  overflow: hidden;  //需要触发BFC消除margin折叠的问题
}
.placeholder:after {
  content: '';
  display: block;
  margin-top: 100%; //margin 百分比相对父元素宽度计算
} 
img {
  position: absolute;
  top: 0;
  width: 100%;
}

<div id="container" class="placeholder">
  <img src="http://img.arrayhuang.cn/product/miya-1060079/multiple/0.jpg@1e_415w_415h_1c_0i_1o_1x.jpg" />
</div>

意义如下：

 

宽高分裂的自适应如何做？

有朋友可能会问，上边提到的都是开间与中度一致的动静，假设不相同那咋做吧？其实自适应的重中之重在于，元素的宽高非得保持一个一定的比重，比如说宽高一致比例就是1:1，宽是高的两倍那就是2:1，只要这一个比例是驾驭而且一定的，那么只需求相应地修改margin/padding的百分比率即可适应分歧的宽高比例。

后补

如上图所示，有这样一种用来放图片的容器，图片都是正方形（为了便利举例用正方形，实际上只要固定长宽比例即可）。

还有任何的宽高自适应方案吗？

本来有，比如说css3新生产的长短单位vw，就是以显示屏宽度为参照物的，只要给元素的width和height都用上vw单位，那width跟height就可以无限制设成一样的了，但是既然是css3，浏览器兼容性肯定成难点：

宽高分化的自适应怎么做？

有意中人或者会问，上边提到的都是开间与高度一致的情形，假诺不均等这怎么做呢？其实自适应的紧要在于，元素的宽高非得保持一个一定的比例，比如说宽高一致比例就是1:1，宽是高的两倍那就是2:1，只要这一个比重是显然则且一定的，那么只需求相应地修改margin/padding的百分比率即可适应不一样的宽高比例。

在PC端好办，容器的宽高都写死是有点px，那样即便图片加载不出去容器都不会扭转。可是在移动端，由于各机型分辨率相差太大，写死px是纯属不可以的，终究还得靠百分比来落成自适应：

总结

自适应的出色在于宽度，margin/padding设置百分比弥补了元素中度不可以自适应地与元素宽度保持一致的短处。

2 赞 9 收藏
评论

还有其余的宽高自适应方案吗？

当然有，比如说css3新生产的尺寸单位vw，就是以显示器宽度为参照物的，只要给元素的width和height都用上vw单位，那width跟height就足以任意设成一样的了，不过既然是css3，浏览器包容性肯定成难点：

1. 容器宽度设个50%呢，那样一行放俩容器，各占显示屏宽度一半，没难题。

2. 图表宽度设个100%取容器的增幅，没难点。

3. 容器中度无法设置啊，因为容器宽高的参照物不等同，而且需要是莫大与幅度一致，所以无法透过为容器中度设置百分比来落成，那就只可以靠内容惊人撑开了。

4. 容器的内容惊人就是图片的莫大，若图片是正方形，则图片中度与图片宽度一致，也即与容器宽度一致，看起来没难题是吧？实际上，在浏览器把图片加载出来在此此前，图片的万丈是零，那可就不可以把容器撑开了， 那样一来，即使图片加载速度高速，容器在图片加载前后都会有一个转移的长河，也就是俗称的“闪烁”，而一旦图片加载不出来，全部布局就一发难看了。

总结

自适应的精华在于宽度，margin/padding设置百分比弥补了元素中度不能自适应地与元素宽度保持一致的短处。

•  

•  

最近难题早已出去了，就是什么形成不靠图片本身就能把容器的莫大撑开。

设置容器的padding-bottom/top

行使margin/padding的百分比率来缓解自适应高度的关键在于：容器margin/padding的比重参照物是父元素的肥瘦，而容器的width的比例参照物也是父元素的增幅，俩特性参照物一致，那么想要把那俩属性的值统一起来就很简短了。

优化方案是如此的：给容器设置padding-top/padding-bottom跟width一致的值（百分比）。

1 <div id="container" class="placeholder"></div>

1 #container {
2   width: 50%;  //父元素宽度的一半
3   background-color: red;  //仅为了方便演示}
4 .placeholder {
5   padding-top: 50%; //与width: 50%;的值保持一致，也就是相当于父元素宽度的一半。
6 }

结果，容器的视觉效果如下：

容器的盒子模型如下：

从盒子模型可以看看，即使容器的情节中度为0，但出于有了跟内容宽度一致的padding，因而全体视觉效果上像是被撑开了。此方案浏览器包容性很不错，唯一的缺陷是力不从心给容器设置max-height属性了，因为max-height只可以限量内容惊人，而不可以限制padding（我原以为设置box-sizing:
border-box;可以让max-height限制padding，不过亲测无效）

给子元素/伪元素设置margin/padding撑开容器

从上边的方案看出max-height失效的原由是容器的万丈本来就是padding撑的，而内容中度为0，max-height无法起效果。那想要优化这或多或少，唯一的措施就是使用内容中度来撑开而非padding，那些方案跟消除浮动所用的方案更加相似：给容器添加一个子元素/伪元素，并把子元素/伪元素的margin/padding设为100%，使其实际高度相当于器皿的小幅，如此一来，便能把容器的莫大撑至与幅度一致了。由于添加子元素与HTML语义化相悖，因而更推荐应用伪元素(:after)来贯彻此方案。

1 <div id="container" class="placeholder"></div>

#container {
  width: 50%;
  position: relative;
  background-color: red;
  overflow: hidden;  //需要触发BFC消除margin折叠的问题
}
.placeholder:after {
  content: '';
  display: block;
  margin-top: 100%; //margin 百分比相对父元素宽度计算
}

此刻视觉效果上与上一方案无异，重点来看看此时容器的盒子模型：

可以观看，此时容器的内容中度与内容宽度一致，四姨再也不用担心自己不可以透过max-height来限制容器中度了。

别的，使用margin的话须求考虑margin折叠的难题（参考），padding则无此烦恼。

 容器内部如何添加内容

 上述方案只提及怎么样不看重容器内容来撑开容器，那么，在撑开容器后，怎么着给容器添加内容（图片、文本等）呢？

答案很粗略，那就是利用position: absolute;

1 <div id="container" class="placeholder">
2   <img src="http://img.arrayhuang.cn/product/miya-1060079/multiple/0.jpg@1e_415w_415h_1c_0i_1o_1x.jpg" />
3 </div>

 1 #container {
 2   width: 50%;
 3   position: relative;
 4   background-color: red;
 5   overflow: hidden;  //需要触发BFC消除margin折叠的问题
 6 }
 7 .placeholder:after {
 8   content: '';
 9   display: block;
10   margin-top: 100%; //margin 百分比相对父元素宽度计算
11 } 
12 img {
13   position: absolute;
14   top: 0;
15   width: 100%;
16 }

后补

 宽高不相同等的自适应如何是好？

 有意中人可能会问，上边提到的都是涨幅与高度一致的事态，如若不等同那怎么做吧？其实自适应的根本在于，元素的宽高非得维持一个永恒的百分比，比如说宽高一致比例就是1:1，宽是高的两倍这就是2:1，只要这一个比例是肯定而且一定的，那么只要求相应地修改margin/padding的百分比率即可适应差别的宽高比例。

 还有任何的宽高自适应方案吧？

 当然有，比如说css3新推出的长度单位vw，就是以屏幕宽度为参照物的，只要给元素的width和height都用上vw单位，那width跟height就可以无限制设成一样的了，不过既然是css3，浏览器包容性肯定成难点：

总结

 自适应的精髓在于宽度，margin/padding设置比例弥补了元素中度不可以自适应地与元素宽度保持一致的欠缺。