很多情况下，在移动端的设计里，会出现要求图片等高等宽，而图片的宽度又是随着不同的移动设备进行改变的，这个时候就需要用到正方形的一个实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 20
height: 0;
padding-top: 20
border: 1px solid #ccc;
background: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果如下：
宽度设置为20��先把高度设置为0，随后设置padding-top或者padding-bottom为同样的百分比，就可以实现一个正方形的样式。
padding-top 属性设置元素的上内边距（空间）。
该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。不允许指定负内边距值。
padding-bottom 属性设置元素的下内边距（底部空白）。
该属性设置元素下内边距的宽度。行内非替换元素上设置的下内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。不允许指定负内边距值。
推荐：css文档
以上就是css怎么画正方形？的详细内容，更多请关注易知道|edz.cc其它相关文章！
