标签：class css str 宽度 变化 利用 实现 根据 比较
页面布局中，我们经常需要用百分比来实现宽度自适应，但是如果这时候高度要跟宽度呈固定比例变化，该怎么办呢？
很简单，我们可以利用元素的padding或margin的百分比值是参照宽度的这一特性来实现，
即如果元素的padding或margin值是百分比值，那么，它的值是根据父元素的宽度来计算的。
所以，实现一个自适应的正方形，可以有两种写法：
可以这么写：
1 <style> 2 .box{ 3 width: 50%; 4 padding-top: 50%; 5 background-color: black; 6 } 7 </style> 8 <div class="box"></div>
也可以这么写：
1 <style> 2 .box{ 3 overflow: hidden; 4 width: 50%; 5 background-color: black; 6 } 7 .margin{ 8 margin-top: 100%; 9 } 10 </style> 11 <div class="box"> 12 <div class="margin"></div> 13 </div>
两种方法略有不同，大家可以自行比较，也可以脑洞一些其他方法。
收工！
标签：class css str 宽度 变化 利用 实现 根据 比较
原文地址：http://www.cnblogs.com/dantis/p/6846611.html
