【筆記】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