css盒子模型 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
<!-- 		css盒子模型组成：
		conter  > padding  > border > margin
		物品         填充物      包装盒     盒子与盒子之间的间距
		conter 内容区域 width和height组成
		1.padding 内边距（内填充）  
		只写一个值  30px(上下左右)
		写二个值    30px 50px(上下，左右)
		写四个值   10px 20px 30px 40px（上 右 下 左）
		单一样式只能写一个值
			padding-left
			padding-top
			padding-right
			padding-bottom
		2.margin外边距（外填充）
		只写一个值  30px(上下左右)
		写二个值    30px 50px(上下，左右)
		写四个值   10px 20px 30px 40px（上 右 下 左）
		单一样式只能写一个值
			margin-left
			margin-top
			margin-right
			margin -bottom
	注意：
		1.背景颜色会填充到margin以内的区域（不包括margin）
		2.文字在content中添加（width，height）
		3.padding不能为负数，margin能负数(如果选择负数，即使上下左右有盒子依然可以填充)
-->
	 	<style>
			body{
				width: 1000px;
				height: 1000px;
			}
			#Hz_01{
				width: 100px;
				height: 100px;
				background-color: red;
				border: 10px dashed #0000FF;
				/* padding-left: 100px; */
				padding: 100px 20px 30px 100px;
				background: url(../11/2.jpg);
			}
			#Hz_02{
				width: 100px;
				height: 100px;
				background-color: #000000;
				margin-top: 10px;
				margin: 10px 20px 30px 40px;
				margin: -40px;
			}
		</style>
	</head>
	<body>
		<div id="Hz_01">这是一个盒子（padding）</div>
		<div id="Hz_02">这是二个盒子（margin）</div>
	</body>
</html>

　　

posted on 2022-01-05 18:29  爱前端的小魏  阅读(31)  评论(0)    收藏  举报

导航