标准盒子模型

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。w3c组织建议吧网页上元素看成是一个个盒子。盒模型主要定义四个区域：***内容（content）***、***内边距（padding）、边框（border）、外边距（margin）。***转换到我们日常生活中，可以拿红酒来对比，红酒=内容，内边距=盒子中的填充物，边框=盒子的厚度，外边距=两个红酒之间的距离。通常我们设置的宽和高是指“红酒”content的宽度，一整个盒子还包含了“填充物”、盒子与盒子的距离。
（1）content：width、height
					行内元素设置宽高不生效
					百分比    占父元素的百分比
（2）padding：边框
		border-style：solid |dashed |dotted |double;
		边框 的样式：实线  虚线       点状线   双线（至少为3xp）
		默认3px   黑色
		border-color：；边框的颜色
		border-width：；边框的宽度
		简写：border：1xp solid red;
		border-top: ; 上边框、
		border-bottom：；下边框
		border-left：；左边框
		border-right：；右边框
（3）margin：外边距     盒子与盒子之间的距离     可以取负值
         margin：value；四周的距离
		 margin：value1 value2； 上下   左右
		 margin：value1 value2 value3；  上   左右   下
		 margin：value1 value2 value3 value4；上  右    下   左
		 盒子水平居中
		 margin：0 auto；
		 外边距合并：
		 垂直方向上，外边距相撞，取较大值
		 （浮动后不合并）
		 解决margin-top问题：（第一个块级子元素）
		 1.父元素加overflow：hidden；
		 2.父元素加border：1px solid transparent；
		 3.父元素或者子元素浮动
		 4.父元素加padding-top：1px；
（4）padding：内边距  内容距边框的距离     不可以取负值
    padding：value；四周的距离
	padding：value1 value2； 上下   左右
	padding：value1 value2 value3；  上   左右   下
	padding：value1 value2 value3 value4；上  右    下   左

padding 会撑大容器