CSS2.1中提出了盒模型的概念，盒模型高度提炼了所有元素的基本特征，即标准盒模型，CSS3中进一步扩展，提出了弹性盒模型的概念 
什么是盒模型，我们可以先直观的看一个东西 
打开Chrome浏览器，F12打开开发者工具 
 
我们能看到这个东西 
margin,padding,border，平常我们在设置这些属性的时候就是盒模型的一个应用~ 
盗一张图来说明 
 
Margin(外边距) - 清除边框外的区域，外边距是透明的 
Border(边框) - 围绕在内边距和内容外的边框 
Padding(内边距) - 清除内容周围的区域，内边距是透明的 
Content(内容) - 盒子的内容，显示文本和图像

以实际的例子说来说明：

<!doctype html><html><head><meta charset="UTF-8"><title>box</title><style type="text/css">body{    color:#FFF;  /*文字为白色*/
    background:#edf5f9; /*浅灰蓝色*/
    position:relative;}.box{    position:absolute;    background:#2980B9;  /*深蓝色*/}h1{    background:#3498DB;  /*浅蓝色*/}}</style></head><body>
  <div class="box">
    <h1>box</h1>
  </div></body></html>1234567891011121314151617181920212223242526272829

这段代码准备了一个类名为box的div元素，以及div元素中的h1元素 
效果： 
 
最外面的，最浅的灰蓝色是body的背景颜色，不用管，设置这个只是想修改body的默认白色属性，以便观察盒子~ 
蓝色的就是box类设置的背景颜色，浅蓝色就是h1设置的背景颜色~ 
现在来设置padding属性 
修改h1的代码：

h1{    background:#3498DB;  /*浅蓝色*/
    padding:20px;}1234

 
浅蓝色部分增加了~从文字到h1的边界的距离增加了，也就是内边距增大了，这是padding属性 
现在来设置margin属性 
修改h1的代码：

h1{    background:#3498DB;  /*浅蓝色*/
    padding:20px;    margin:20px;}12345

 
明显看到，深蓝色部分变大变宽了，是h1的边界到div的边界增大了，也就是外边距增大了，这是margin属性 
现在来设置border属性 
修改h1代码

h1{    background:#3498DB;  /*浅蓝色*/
    padding:20px;    margin:20px;    border:5px solid #FFF;}123456

 
可以明显的看到浅蓝色和深蓝色中间多了一层白色的边框，这就是h1的边框，这是border属性 
然后我们来说说盒子的大小问题 
我们先修改h1的代码

h1{    background:#3498DB;  /*浅蓝色*/
    padding:20px;    margin:20px;    border:5px solid #FFF;    width:120px;    height:120px;}12345678

添加高度和宽度属性~ 
效果如图： 
 
我们F12打开开发者工具，查看盒模型 
 
可以清楚的看到盒子的大小为210x210 
可是我们设置的是120x120啊，为什么变了，这就是为什么我们要学习盒模型的原因。。 
这个210是20的margin,5的border,20的padding,左右两边加起来x2，总共90，加上120就变成210了… 
所以width和hegiht属性只作用了content区域… 
为了解决这种每次设置长宽都要计算的问题，就需要用box-sizing属性~ 
修改h1的代码:

h1{    background:#3498DB;  /*浅蓝色*/
    padding:20px;    margin:20px;    border:5px solid #FFF;    width:120px;    height:120px;    box-sizing:border-box;}123456789

 
再看效果就OK了~ 
添加了一个box-sizing属性，这个属性定义了盒模型中元素的组成元素。默认的box-sizing属性是content-box，宽高属性不计入内边距及边框的数值。变为border-box之后，元素先减去边框和内边距才计算内容。 
另外，设置绝对定位是为了触发BFC机制来清楚浮动，更好的观察盒模型。 
BFC：块级格式化上下文 
简单的来说，在BFC中，元素布局不受外界的影响，利用这个来消除浮动元素对非浮动元素的影响，以及块级元素和行内元素的影响。

关于IE盒子模型 
其实，IE盒子模型与标准盒模型差不多，区别在于：计算方式 
这里盗两张图 
 
 
可以很明显的发现，两张图的区别在width和height

标准盒子模型中，width和height是content的长与宽 
而IE盒子模型中，width和height是content+padding+border区域的长与宽

很明显，与刚刚说的box-sizing属性相对应 
content-box 对应标准盒子模型 
border-box 对应IE盒子模型

em….怎么说呢，感觉就是W3C的一群大佬骂了很久IE的盒子模型最后发现IE的盒子模型还挺好的，就在Html5加入了box-sizing属性…..

弹性盒子是 CSS3 的一种新的布局模式。 
CSS3 弹性盒子，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

  1. box-align 定义子元素在盒子内垂直方向上的空间分配方式 
    2.box-direction 定义盒子的显示顺序 
    3.box-flex 定义子元素在盒子内的自适应尺寸 
    4.box-flex-group 定义自适应子元素群组 
    5.box-lines 定义子元素分列显示 
    6.box-ordinal-group 定义子元素在盒子内的显示位置 
    7.box-orient 定义盒子分布的坐标轴 
    7.box-pack 定义子元素在盒子内水平方向的空间分配方式 
    不过弹性盒子的属性还存在兼容性问题.. 
    所以用弹性盒子写代码可能会比较头疼，各主流浏览器都有各自的私有属性… 
    比如说webkit引擎的chrome和safari，他们的属性都带有-webkit前缀，比如说-webkit-box-orient 
    IE就算了，IE根本不支持这个…. 
    开启弹性盒模型只需要设置display:flex就OK了 
    然后再去设置具体的属性

原文：http://blog.youkuaiyun.com/qq_33858965/article/details/77969174?locationNum=4&fps=1