很多情况下,在移动端的设计里,会出现要求图片等高等宽,而图片的宽度又是随着不同的移动设备进行改变的,这个时候就需要用到正方形的一个实现。
<!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其它相关文章!