css实现正⽅形div的3种⽅式⽹上百度了⼏种可以按照百分⽐画⽅框的⽅法
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!
html实现用户注册登录代码</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.画⼀个正⽅形表格

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。