正方形 css,CSS实现自适应的正方形

总体思路：由于height是不固定的，所以不能直接使用height值。因此转换思路使用width值来实现正方形的height赋值。

所以理论上只要能够将宽度属性应用在高度属性的方法都可以。

方案一：CSS3 vw 单位

.placeholder {

width: 50%;

height: 50vw;

background:green;

}

image.png

方案二：设置垂直方向的 padding 撑开容器

在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对 父元素宽度 的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了：

.placeholder {

width: 50%;

padding-bottom: 50%;

background:green;

}

但有一个问题，当内容有高度时，会高度溢出：

image.png

显然这就不是一个正方形了。结局方案是：

.placeholder {

height: 0;

}

方案三：利用伪元素的 margin(padding)-top 撑开容器

这个其实和方案二思路一样，只不过使用伪元素副作用更小。

.placeholder {

width: 50%;

background:green;

}

.placeholder:after {

content: '';

display: block;

padding-top: 100%; /* margin 百分比相对父元素宽度计算 */

}

但它其实同样存在内容溢出的问题，这时候可以把内容放在另外的块中，使用绝对定位来消除空间占用。