html如何实现正⽅形的单项选择,css实现正⽅形
css实现正⽅形
如果仅仅是设置width 和 height的话，这个问题就不⽤说了，这⾥考虑的问题主要是padding的百分⽐是相对于谁来说的
元素的padding 和 margin百分⽐都是想对应⽗元素的width(⽗元素必须有width这个值 否则往上查知道body)来说的， 如下通⽤的css 正⽅形⽅案
相对于⽗元素width
.container {
width: 100px;
height: 100px;
}
.square {
width: 100%;
padding-bottom: 100%;
background: red;
margin属性值可以为百分比}
可以设置⾼度，利⽤伪元素
.square {
width: 100px;
background: green;
}
.square:after {
content: '';
display: block;
padding-bottom: 100%;
}
设置⼀个伪元素，伪元素⽤的是利⽤ padding-bottom撑起⽗元素的⾼度，padding相对⾼度为 ⽗元素的 width
不同单位 相对于视⼝ ⽽且利⽤vw
.container {
width: 5%;
height: 5vw;
background: red;
}

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