CSS---盒模型

盒模型：由外边距、边框、内边距和内容四部分组成。 标准盒模型：盒模型 = 边框 + 内边距 + 内容 怪异盒模型：盒模型 = 内容

	外边距margin：一个元素边框以外到另一个元素之间的距离。
	
	边框border：元素四周的边界。
	
	内边距padding：边框到内容之间的距离。
	
	内容content：宽度width和高度height
	
	margin的bug：
	1、上元素的下外边距和下元素的上外边距会重合
		最终按照值较大的进行渲染
	解决：能用内边距就不用外边距，能给下外边距就不给上外边距
	2、第一个子元素的上外边距和容器的上外边距会重合
		最终按照值较大的进行渲染
	解决：触发bfc，块级格式化上下文 block format context
		a、脱离文档流(浮动、定位)
		b、给容器添加边界(边框、内边距)
		
	写法：上外边距margin-top
		  下外边距margin-bottom
		  左外边距margin-left
		  右外边距margin-right
		  
	缩写：
		margin：1个值 表示上右下左
				2个值 第一个值表示上下 第二个值表示左右
				3个值 第一个值表示上 第二个值表示左右 第三个值表示下
				4个值 分别表示上、右、下、左
	
	块元素水平居中 左右自动auto
	
	
	
	内边距：写法和缩写同写外边距
	注意：标准盒模型下，内边距增加，盒模型则变大，如果
		  想要保持盒模型的大小，则应从内容部分减去相应的大小，
		  或者把盒子变成怪异的盒模型
		  
		  标准盒模型 ->怪异盒模型 box-sizing: border-box;
		  怪异盒模型 ->标准盒模型 box-sizing: content-box;
		  
		  
	padding的bug：
		行元素上下内边距只对背景有效，对位置大小无效
	
	边框：border 由粗细border-width、
				   样式border-style、
				   颜色border-color三部分组成
				   
				   上边框border-top
				   右边框border-right
				   下边框border-bottom
				   左边框border-left

	上边框的颜色：border-top-color
	下边框的粗细：border-bottom-width
	左边框的样式：border-left-style