demo1
一个高度随宽度变化的正方形
(缩小屏幕试试)
原理:margin和padding如果是用百分比设置,则是以父元素的宽度的百分比设置的。
.Square{ display: inline-block; background:#FF0000; 20%; } .Square:before{ display: inline-block; content:""; padding-top:100%; }
.Square:before的父元素可以看作是.Square,把.Square:before的padding-top设置为100%;那么伪元素的高度就是父元素.Square的宽度了,这时候就能把.Square的高度撑开成为宽度大小
注意需要设置display: inline-block(IE6不支持该属性);