【笔记】css 实现宽度自适应屏幕 高度自适应宽度

如果说宽高自适应屏幕尺寸那么大家可能会想到

div{
    width: 100%;
    height: 100%
}

但是如果我要自适应屏幕尺寸的同时还要变成正方形呢？（高度和宽度相等而高度不能写死）

那就要实现如下的黑科技了

div{
    width: 100%
    height: 0
    padding-top: 100% /* padding 设置为100% 的时候会等于其父容器的宽度 */

}

根据w3c 标准，当padding值为 100% 时 其相等于元素自身包含块的宽度，所以把padding-top 或者 padding-bottom 为 100% 的时候，元素的高度便会被pading 撑开，而且！它的高度等于它包含块的宽度！！ 黑科技啊

上面的代码例子展示了如何让一个元素宽度适应的屏幕的同时其高度也会随着宽度一起变化实现正方形

如若要在它内部放置子元素并且和他的宽高相等就需要把子元素浮动或绝对定位，脱离文档流，这样子元素才不会被设置好的 padding 影响

有关padding 百分比值的解释可以看看这篇文章

http://www.cnblogs.com/linguoguo/p/4942034.html