【前端】CSS盒子模型

盒子模型

IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在標準兼容模式下使用的是W3C的盒模型標準。

• 盒子模型組成爲：margin、border、padding、content。
• CSS盒子模型分爲：標準W3C盒子模型，IE盒子模型。二者最大不一樣在於對於css的width和height的大小設置。下面所說的width和height是css中的寬高。

IE盒子模型

IE盒子模型的width = contentWidth + padding-left + padding-right + border-left + border-right
IE盒子模型的height = contentHeight + padding-top + padding-bottom + border-top + border-bottom

意味着IE盒子的width和height的大小是上述屬性相加的最大總和。若content的大小、padding大小、border的大小總和大於css設置的寬高。例如增長padding寬度大小使得盒子寬度大於設置的寬度會將content的大小被壓縮，最終content大小會變爲0。box的總寬度會大於設置的width大小。

#ie_box {
        margin: 30px;
        width: 200px;
        height: 200px;
        background-color: bisque;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px;
        border: 5px solid brown;
    }

標準W3盒子模型

W3盒子模型的width = contentWidth
W3盒子模型的height = contentHeight
W3盒子模型大小計算就簡單多，css設置的width和height就是content內容大小。padding、border的大小並不會影響content的大小。

#w3_box {
        margin: 30px;
        width: 200px;
        height: 200px;
        background-color: bisque;
        padding: 10px;
        border: 5px solid brown;
    }

小結

對於ie和w3兩種盒子模型，相比較而言w3盒子模型會比ie盒子模型更好用些，也不容易混淆css中的width和height，同時也方便計算盒子的實際寬高大小，也不會出現ie盒子模型因爲屬性設置超出預設寬高而擠壓content顯示。