CSS 盒子模型(Box Model)
组成：
内容区（content） 内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区有三个属性，width、height 和overflow。使用width和height属性可以指定盒子内容区的高度和宽度，当内容信息太多，超出内容区所占范围时，可以使用overflow 溢出属性来指定处理方法。当overflow 属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息；当为auto时，将由浏览器决定如何处理溢出部分。
填充（padding） 填充是内容区和边框之间的空间。填充的属性有五种 ，即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。使用这五种属性可以指定内容区信息内容与各方向边框间的距离。设置盒子背景色属性时，可使背景色延伸到填充区域。
边框（border） 边框是环绕内容区和填充的边界。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。border-style 属性是边框最重要的属性，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。CSS规定了dotted（点线）、dashed（虚线）、solid(实线)等九种边框样式。使用border-width属性可以指定边框的宽度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium 和thick。使用border-color属性可以为边框指定相应的颜色，其属性值可以是RGB值，也可以是CSS 规定的17个颜色名 。在设定以上三种边框属性时，既可以进行边框四个方向整体的快捷设置，也可以进行四个方向的专向设置，如border: 2px solid green 或border-top-style: solid、border-left-color: red等。设置盒子背景色属性时，在IE中背景不会延伸到边框区域，但在FF等标准浏览器中，背景颜色可以延伸到边框区域，特别是单边框设置为点线或虚线时能看到效果 。
空白边（margin） 空白边位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段。空白边的属性有五种 ，即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷空白边属性margin，其具体的设置和使用与填充属性类似。对于两个相邻的（水平或垂直方向 ）且设置有空白边值的盒子，他们邻近部分的空白边将不是二者空白边的相加，而是二者的并集。若二者邻近的空白边值大小不等，则取二者中较大的值。同时，CSS 容许给空白边属性指定负数值，当指定负空白边值时，整个盒子将向指定负值方向的相反方向移动，以此可以产生盒子的重叠效果。采用指定空白边正负值的方法可以移动网页中的元素，这是CSS 布局技术中的一个重要方法。
盒模型是有两种标准的，一个是W3C标准模型，一个是IE模型。
区别：
在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
css如何设置两种模型
这里用到了CSS3 的属性 box-sizing
/* 标准模型 */
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;为什么会出现不同模型？ 当年微软的IE浏览器占据超过80%市场份额的时候，想自己独立制定一套浏览器标准，其中就包括IE的盒模型，但是有很多公司不同意IE的做法，他们遵循的是W3C的标准来定制浏览器，也就造成了现在浏览器不同的CSS盒模型，但是仍有很多老网站采用的是老IE的标准(怪异模式)，因此很多浏览器保留了IE的怪异模式。
content-box的缺点
目前任何浏览器默认使用的都是content-box，但是这个内容盒子有一个缺点，举个栗子 假设我们想要两个子容器float:left，宽度各50%，然后给一点padding，最后让子容器并排充满父容器，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father-box{
width: 500px;
background: #0ba1b5;
}
.left-box{
width: 50%;
padding: 10px;
height: 100px;
float: left;
background: #b23e35;
}
.right-box{
width: 50%;
padding: 10px;
float: left;
height: 100px;
background:#77b55a;
}
</style>
</head>
<body>
<div class="father-box">
<div class="left-box">left-box</div>
<div class="right-box">right-box</div>
</div>
</body>
</html>我们在浏览器中运行之后发现，想象的很美好 结果却并不美好，因为两个子元素宽度超过了50%，导致了折行，于是宽度就不能设置为50%了，只能将宽度减去padding的值，在这种时候，border-sizing就派上用场了。
border-sizing的优点
border-sizing的诞生就是为了解决content-sizing的缺点，border－sizing意味着子容器的padding和border厚度都算在50%内，这样你就可以随意修改padding和border的值，而不用担心父容易被撑爆
border-box的使用场合
目前最流行的css框架几乎都采用了border－sizing，框架想要具备栅格系统，肯定要用border－sizing 通常情况下 你只需要在必须使用border－sizing元素的身上使用这个属性，其他元素都保持content－sizing就好了
子元素有padding和border，或者至少有其一，并且需要给子元素设定100%宽度（或者50%宽度等等），这时候显然需要border-box。设为border-box之后，padding和border的厚度可以随意调，并不会溢出父元素。如果是content-box，那么，宽度必然会溢出，而且，为了不溢出，你设定子元素的宽度就只能是一个定值，或者是一个计算值（比如calc(100%- 20px)）。