html怎么用五个div做正方形_css怎么画正方形？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言

很多情况下，在移动端的设计里，会出现要求图片等高等宽，而图片的宽度又是随着不同的移动设备进行改变的，这个时候就需要用到正方形的一个实现。

div{

width: 20%;

height: 0;

padding-top: 20%;

border: 1px solid #ccc;

background: red;

}

效果如下：

宽度设置为20%，先把高度设置为0，随后设置padding-top或者padding-bottom为同样的百分比，就可以实现一个正方形的样式。

padding-top 属性设置元素的上内边距(空间)。

该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。不允许指定负内边距值。

padding-bottom 属性设置元素的下内边距(底部空白)。

该属性设置元素下内边距的宽度。行内非替换元素上设置的下内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。不允许指定负内边距值。