4：CSS盒子模型

一. 盒子

CSS处理网页时，认为每个元素都包含在一个不可见的盒子里，把所有的元素想象成盒子，那么我们对网页的布局就相当于是摆放盒子，我们只需要将相应的盒子放到网页中相应的位置即可完成网页的布局。

二. 盒子模型

一个盒子我们会分为四个部分

内容区（content）
内边距（padding）
边框（border）
外边距（margin）

三. 内容区（content）

内容区指的是盒子中放置内容的区域，如果没有为元素设置内边距和边框，则内容区的大小和盒子大小一致。width和height两个属性设置的就是内容区的大小，但是width和height属性只能用于块级标签。

举例：

<!DOCTYPE html>
<html>
	<head>
		<title> 标题 </title>
		<meta charset='UTF-8'/>
		<style type="text/css">
			div {
				width:300px;
				height:300px;
				background-color:yellow;
			}
		</style>	
	</head>
	<body>
		<div> 
			div中的文字
		</div>
	</body>
</html>

四. 内边距（padding）

内边距指的是元素内容区与边框以内的空间，分别设置上、左右、下四个方向的内边距：

padding:10px 20px 30px

分别设置上下内边距为10px，左右内边距为20px：

padding:10px 20px

同时设置上下左右四个方向的内边距为10px：

padding:10px

同时提供了单独设置四个方向的属性

左：padding-left
右：padding-right
上：padding-top
下：padding-bottom

注意：width和height不包含padding的大小，只代表内容区的大小

举例：

<!DOCTYPE html>
<html>
	<head>
		<title> 标题 </title>
		<meta charset='UTF-8'/>
		<style type="text/css">
			div {
				width:300px;
				height:300px;
				background-color:yellow;
				padding:20px;
			
			}
		</style>	
	</head>
	<body>
		<div> 
			div中的文字
		</div>
	</body>
</html>

五. 边框（border）

使用border属性设置盒子的边框，分别设置了边框的宽度为1px、颜色为red和样式为solid

border:1px red solid

分别设置四个方向的边框

左：border-left
右：border-right
上：border-top
下：border-bottom

边框除了实线外还有其他的样式：

none（没有边框）
dotted（点线）
dashed（虚线）
solid（实线）
double（双线）
……

举例：

<!DOCTYPE html>
<html>
	<head>
		<title> 标题 </title>
		<meta charset='UTF-8'/>
		<style type="text/css">
			div {
				width:300px;
				height:300px;
				background-color:yellow;
				padding:20px;
				border:5px #0F0 solid
				
			}
		</style>	
	</head>
	<body>
		<div> 
			div中的文字
		</div>
	</body>
</html>

六. 外边距（margin）

外边距是元素边框与周围元素相距的空间，使用margin属性可以设置外边距，用法和padding类似，同时也提供了四个方向的margin-top/right/bottom/left。当将左右边距设置为auto时，浏览器会将左右外边距设置为相等。

举例：

<!DOCTYPE html>
<html>
	<head>
		<title> 标题 </title>
		<meta charset='UTF-8'/>
		<style type="text/css">
			div {
				width:300px;
				height:300px;
				background-color:yellow;
				padding:20px;
				border:5px #0F0 solid;
				margin:5px 10px 15px 20px;
			}
		</style>	
	</head>
	<body>
		<div> 
			div中的文字
		</div>
	</body>
</html>