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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章