css盒模型

一、什么是盒模型
（1）概念：盒模型是css布局的基石，它规定网页元素如何显示以及元素间的相互关系；css定义所有的元素都可以拥有像盒子一样的外形和平面空间；CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
（2）作用：盒模型能够控制元素与元素，元素和内容之间的位置关系。
（3）盒模型的组成：content（内容区），padding（填充区），border（边框），margin（外边界区）。
二、盒模型的属性

padding用法
	1.padding是在盒子里面，在盒子与内容之间
	2.padding的作用：控制子元素在父元素里面的位置关系
	3.padding会把盒子撑大
	4.如果想让盒子保持原有的大小：在宽高的基础上减掉（如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉）
	5.给单一方向添加padding：padding-top/bottom/left/right
	6.padding的设置方法：
	padding：30px 四周
	padding：20px 30px 上下 左右
	padding：10px 30px 50px 上 左右 下
	padding：10px 20px 30px 50px上下左右
	7.padding不会对背景图的位置造成影响

margin用法（外边界）	1.作用：控制元素与元素之间的间距。
	2.margin在元素外围，不会撑大元素的大小
	3.给单一方向添加margin：margin-left/right/top/bottom
–	4.margin设置方法：
	margin：30px 四周
	margin：10px 30px 上下 左右
	margin：10px 30px 50px 上 左右 下
	margin：10px 30px 20px 50px上右下左
	5.margin：0 auto让当前元素在父元素里面左右居中
	6.margin中常出现的bug：两个上下相邻的元素上下的margin值不会叠加，按照较大值设定；如果给父元素和第一个子元素没有浮动的情况下，给第一个子元素添加margin-top，会错误的放在父元素上面

三、标准盒模型的大小计算
（1）元素的总宽度=width+padding+border+margin

（2）元素的总高度=heigh+padding+border+margin