盒子模型

盒子模型

盒子模型也叫框模式

1、使用width来设置盒子内容区的宽度，使用height来设置盒子内容区的高度

2、为元素设置边框：要为一个元素设置边框必须指定三个样式

		border-width:边框宽度
		border-color:边框颜色
		border-style:边框样式
		
三个样式缺一不可（不同浏览器默认的边框样式不一样）

3、width和height只是设置盒子内容区的大小，而不是盒子的大小，盒子可见框的大小由内容区和边框共同决定

4、为四个边框分别设置
例如：border-width:10px 20px 30px 40px;(顺时针顺序为四个边框设置)
（如果只设置三个值分别为：上、左右、下 左右边框会一样）
（如果指定两个值分别为：上下、左右）
（如果指定一个值分为：上下左右）
5、除了border-width，css还提供了四个border-xxx-width，xxx的值可能是top right left bottom

6、设置边框（线）样式：
可选值：none：默认值 没有边框

			solid：实线
			dotted：点状线
			dashed：虚线
			double：双线
	例如：border-style: double;
	（style也可以分别指定四个边框样式）

7、 内边距：指的是盒子的内容区和盒子边框之间的距离
一共有四个方向的内边距：

		padding-top
		padding-left
		padding-right
		padding-top
		
	（写在父元素样式之中）
盒子的大小由内容区、内边距和边框共同决定	

8、外边距：当前盒子与其他盒子之间的距离

			margin-top
			margin-left
			margin-right
			margin-bottom
	

(margin还可以设置为auto，auto一般只设置给水平方向的margin)

*如果只指定，左外边框或右外边距的margin为auto则会将外边距设置为最大值
*垂直方式外边距设置为auto，则默认为0
*如果将左右外边距同时都设置为auto，则会将两侧的外边距设置为相同的值（相当于在父元素中水平居中）

垂直外边距的重叠：
- 在网页中垂直方向的相邻外边距会发生外边距的重叠
- 所谓的外边距重叠指兄弟元素直接的相邻外边距会取最大值而不是取和为子元素设置一个上边