html盒子的宽度怎么设置,用【CSS】如何实现当盒子的宽度为百分比的时候，让盒子的高度始终等于盒子的宽度，保持正方形的状态...

一、PC端和移动端的屏幕分辨率多种多样，当盒子的宽度为百分比时，让宽度和高度始终保持相等的方法

效果图：

代码：

1

2

3

4

5

说明：

1、将盒子的宽度设置为自己需要的百分比，这里以16%为例；

2、将盖盒子的高度设置为100%；

3、通过伪类控制高度 (**************)

ul li::before{ content: ""; padding-top: 100%; vertical-align: middle; display: block;}

4、盒子里面的内容一定要定位，如例子中的span(******************)

ul li span{ position: absolute; top: 50%; left: 50%;

-webkit-transform: translate(-50%, -50%);

-moz-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

-o-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);}

5、这样就实现了，无论设备的分辨率怎么变化，这个盒子始终都是正方形的宽度啦！！！！！！