【前端】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显示。