快速理解W3C盒模型和IE盒模型的区别

1、CSS盒模型概述

1. CSS 盒模型规定了元素框处理元素内容（content）、内边距（padding）、边框 （border）和 外边距 （margin）的方式.
2. CSS盒模型分为W3C盒模型和IE盒模型

 2、通过代码直观感受以下两者区别

• 定义两个div

<div id="border-box">我是IE盒模型(border-box)</div>
<div id="content-box">我是w3c盒模型(content-box)</div>

• 给这两个div设置宽高、背景颜色以及采用哪种盒模型 

#border-box {
    width: 200px;
    height: 200px;
    box-sizing: border-box; //采用IE盒模型
    background-color: yellow;
    margin-bottom: 10px;
}
#content-box {
    width: 200px;
    height: 200px;
    box-sizing: content-box; //采用W3C标准盒模型
    background-color: yellow;
}

 

• 结果如下 

•  给两个div加上边框

#border-box {
    border: 10px salmon solid;
}
#content-box {
    border: 10px salmon solid;
}

•  结果如下

• 给两个div加上内边距

#border-box {
    padding: 50px;
}
#content-box {
    padding: 50px;
}

• 结果如下

 

---

总结：可以看到，IE盒模型的width是conteng+padding+boder的宽度，height是conteng+padding+boder的高度，所以width: 200px;height: 200px;是内容加内边距加边框的宽高；而W3C标准盒模型的width是content的宽度，height是content的高度，width: 200px;height: 200px;是内容的宽高，内边距和边框会在保证内容宽高不变的情况下加在外围的。

                                                                     W3C标准盒模型的宽和高 

                                                                               IE盒模型的宽和高