当div的宽度为百分⽐时，如何设置⾼与宽相等
今天做了⼀个demo，其中要⽤到圆形，⾸先想到的就是给⼀个div设置宽等于⾼，再加上border-radius等于宽的⼀半就好了
div {
width: 200px;
height: 200px;
border-radius: 100px;
}
但是如果div的宽度是百分⽐，继承的是⽗元素的宽度的百分⽐时，⾼度该如何设置为等于宽呢？
div {
width: 20%;
height: 0; // 设置⾼为0，让padding撑起⾼
div border属性
padding-bottom: 20%; /* 让div的⾼等于宽 */
border-radius: 50%;
}
此时将padding-top/padding-bottom设置为百分⽐时，是基于⽗元素宽度，正好和width相等；在使⽤border-radius=50%，就实现了⾃适应的圆形。

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