摘要
有时我们会遇到这样的需求，制作一个自适应页面的方形元素，这时我们就要借助百分比进行布局了。如果我们在布局的过程中不做处理采用常规的布局，往往得到的结果并不是我们想要的。原因在于：高度的百分比是相对于父级的高进行计算的。
我们在制作网页的过程中，很多时候为了某些特定需求需要借助百分比进行宽、高布局。用过百分比的人都知道，设置百分比的元素是相对于父级进行计算的。所以，我们在使用百分比设置宽、高的过程中要注意其父级宽和高的设置。
有时我们会遇到这样的需求，制作一个自适应页面的方形元素，这时我们就要借助百分比进行布局了。如果我们在布局的过程中不做处理采用常规的布局，往往得到的结果并不是我们想要的。原因在于：高度的百分比是相对于父级的高进行计算的。
为了实现自适应页面的方形元素，很多朋友可能会借助JS来解决。对于这种解决方案，笔者也是认同的。
今天，笔者介绍一种更为巧妙的布局方式，仅仅借助CSS(CSS黑科技)就能让百分比的值达到统一。
- E {
- position: relative;
- width: 100%;
- height: 0;
- padding-top: 100%;
- }
- E F {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- }
看到这样的代码，有些人可能有点不解。为什么我们要设置E元素的height为0，而给padding-top百分百呢？
原因是这样的：padding的百分比是相对于父级的宽来设置的，通过这种方式，我们便达到了宽和高的统一。这时，我们只要把需要的元素定位到父元素上就好了。
