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不支持该属性）;