<div style="height: 30% width: 100% background-color: yellowposition: relative">
<div style="background-color: red width: 30%padding-top: 30%height: 0">
<b style="color: blackfont-size: 34px">通过padding实现的正方形</b></div>
<div style="position: absoluteright:0top:0background-color: pinkwidth: 50%height: 100%">
<div style="background-color: blue height: 25vw width: 50%">
<b style="color: whitefont-size: 34px">通过vw,vh实现的正方形</b></div>
</div>
</div></body>
1.根据padding属性实现正方形。
图中的左侧就是通过padding实现的正方形
padding的属性可能的值有四种类型:
用JQ来设置高度,你可以参考这个有点类似http://zhidao.baidu.com/link?url=w0xGkp-Jf7ghcNcp8jR2GOkMxqIqWaV2q8y0XOida4AcC80fCVsMQ-YGwuW8krn4SUulHjc5bh4ZC5-gYE4wvK