css實現正方形div的3種方式
阿新 • • 發佈:2019-01-05
1.CSS3 vw 單位
1vw = 1% viewport width
<div class="vw">hello,viewport</div>
.vw {
width: 50%;
height: 50vw;
background: #ccc;
}
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%;
}
利用vw,margin,padding