30-CSS-08-CSS(CSS的盒子模型)



实际网页开发中,用div+css较多,即用div在网页中划分出若干区域,然后用CSS设置每个区域的样式,这些区域就被称之为“盒子”。
(可以想象成九宫格排列方式,详见桌面图解文件vedio30CSS08)


对于盒子模型,其属性如下:


(1)边框:border
上边框:border-top
下边框:border-bottom
左边框:border-left
右边框:border-right


(可以统一设置盒子边框样式,即通过border,也可以上下左右分开设置不同的样式。)


(2)内边距:padding
上内边距:padding-top
下内边距:padding-bottom
左内边距:padding-left
右内边距:padding-right
(同样可以统一设置,也可以分别设置,也可以直接一次性在padding指定2、3、4个值,详见示例代码)


(3)外边距:margin
上外边距:margin-top
下外边距:margin-bottom
左外边距:margin-left
右外边距:margin-right
(同样可以统一设置,也可以分别设置,也可以直接一次性在margin指定2、3、4个值,详见示例代码)





============================================================================================================


【示例】

<html>
<head>
	<style type="text/css">
		div{
			border:#09F solid 1px;	/*设置所有盒子边框样式(因为都是<div>标签)*/
			height:100px;	/*设置所有盒子高度*/
			width:200px;	/*设置所有盒子宽度*/
		}
		
		#div_1{	/*id选择器*/
			background-color:#F90;	/*设置第一个盒子的背景颜色*/
			padding:20px;	/*设置第一个盒子内边距为20,这里由于盒子中文字太少,所以实际效果看不出是上下左右都相距20,必须文字够多才能看出效果*/




/*padding:20px 100px;这里意思是文字内容上、下内边距均为20,左、右内边距均为100*/


/*padding:20px 100px 200px;这里意思是文字内容上内边距为20,左、右内边距均为100,下内边距为200*/


/*padding:20px 100px 200px 300px;这里意思是文字内容上内边距为20,右内边距均为100,下内边距为200,左内边距为300*/


/*如果padding:后面只指定一个值,就是上、下、左、右内边距统一;如果指定2个值,其中第一个值是上、下内边距,第二个值是左、右内边距;如果指定3个值,其中第一个值是上内*/
/*边距,第二个值是左、右内边距,第三个值是下内边距;如果指定4个值,第一个是“上”,第二个是“右”,第三个是“下”,第四个是“左”,即顺时针方向。*/


			margin:50px;	/*设置第一个盒子的外边距为50,这里也可以指定2、3、4个值,和padding一模一样*/


/*【注意】这里若将margin设置为0px,按理说应该跟网页最顶端“无缝连接”,但是依然有空白,因为<body>中默认与顶部有距离,解决办法可以将<body>的margin设置为0px即可,即在*/
/*style和/style之间写代码body{margin:0px}*/
		}
	
		#div_2{
			background-color:#0CF;
		}
		
		#div_3{
			background-color:#3F0;
		}
	</style>
</head>
<body>
	<div id="div_1">
	第一个盒子11
	</div>


	<div id="div_2">
	第二个盒子22
	</div>
	
	<div id="div_3">
	第三个盒子33
	</div>
</body>
</html>






你可能感兴趣的:(30-CSS-08-CSS(CSS的盒子模型))