## 盒模型（box model）  <div style="height:200px;width:200px;margin:0 auto;border:2px solid blue;"> <div style="border:2px solid red;height:100px;width:100px;margin:30px;padding:10px"> 这是里面的内容 </div> </div> 盒模型是CSS中一个重要概念，文档中的每个元素被描绘为矩形盒子。渲染引擎的目的就是判定大小，属性。盒模型属性有： margin：外边距 padding：内边距 border：边框 content：内容 >[success]### 一、标准盒模型  * css设置的width为内容的宽度。 * div的实际宽度=*width*+*padding-left*+*padding-right*+*boder-left*+*boder-right* >[info]### 二、IE盒模型  * css设置的width就是div实际的宽度。 * 内容宽度=*width*-（*padding-left*+*padding-right*+*boder-left*+*boder-right*） >[warning]### 三、css指定盒模式 box-sizing: content-box | border-box | inherit content-box，默认属性，遵从标准盒模型。 border-box，使用IE盒模型。 http://blog.csdn.net/cc7756789w/article/details/50910612 * IE杂项（Quirks模式，IE5.5）默认用IE盒模型。 * IE6、IE7浏览器不支持box-sizing属性。 * IE8+及其它主流浏览器默认为标准盒模型，可设置box-sizing: border-box定义成IE盒模型。