## 盒模型（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盒模型。