css的小demo

demo1

一個高度隨寬度變化的正方形

 

(縮小屏幕試試)

原理：margin和padding如果是用百分比設置，則是以父元素的寬度的百分比設置的。

.Square{
display: inline-block;
background:#FF0000;
width:20%;
}
.Square:before{
display: inline-block;
content:"";
padding-top:100%;
}

.Square:before的父元素可以看作是.Square,把.Square:before的padding-top設置爲100%;那麼僞元素的高度就是父元素.Square的寬度了,這時候就能把.Square的高度撐開成爲寬度大小
注意需要設置display: inline-block（IE6不支持該屬性）;