5.6盒子属性

124 阅读1分钟
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div{
			/* 最大宽度max-width 最小宽度min-width */
			/* 最大高度 max-height 最小高度 min-height */
			max-width: 500px;
			min-width: 200px;
			width: 200px;
			height: 200px;
			/* 上下左右外边距都为10px 盒子和盒子之间距离 外边距 */
			margin: 10px;
			/* 上下外边距10px 左右外边距为20px */
			margin: 10px 20px;
			/* 上外边距为10px 左右外边距为15px 下外边距为25px */
			margin: 10px 15px 25px;
			/* 顺时针 上外边距 右外边距 下外边距 左外边距 */
			margin: 10px 15px 25px 30px;
			/* 盒子内部内容到边框距离 内边距 */
			padding: 10px;
			/* border: 1px solid blue; */
			background-color: red;
			/* 圆角边框 50%圆型 */
			/* border-radius: 50%; */
			/* 完整写法 border-radius:5px 5px 5px 5px/5px 5px 5px 5px 
				前面四个属性代表的是水平方向的圆角边框 
				后面四个属性代表的是垂直方向的圆角边框
			*/
			border-radius: 50%;
			/* 上右下左水平半径 5 15 25 5 / 上右下左垂直半径 */
			border-radius: 5px 15px 25px 5px/25px 20px 15px 5px;
		}
	</style>
</head>
<body>
	<div>我是一个div</div>
</body>
</html>