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;

}

可以设置高度，利用伪元素

.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;

}