网上百度了几种可以按照百分比画方框的方法
1.CSS3 vw 单位
1vw = 1% viewport width
<div class="vw">hello,viewport</div>
.vw {
width: 50%;
height: 50vw;
background: #ccc;
}
实测不管用(chrome,版本 49.0.2623.110)
2.padding-bottom
<div class="placeholder"></div>
.placeholder {
width: 100%;
padding-bottom: 100%;/* padding百分比相对父元素宽度计算 */
height: 0;//避免被内容撑开多余的高度
}
这个确实管用,但是没有办法在里面写字了
3,padding-bottom+:after+absolute
<div class="square">
<div class="content">
Hello!
</div>
</div>
.square {
width: 50%;
background: #ccc;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
}
这个方法不错,而且还能在里面写字
我还想到了其他几种方法:
1.利用js计算出方块(笨方法)
2.画一个正方形表格