css怎么画正方形?

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

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

<!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其它相关文章!

推荐阅读