[CSS]面试题：box-sizing的作用 (IE盒模型和W3C标准盒模型)

Posted 2020-12-18 skybiubiu

 

介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）

（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分

IE盒模型和W3C标准盒模型的区别：

（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding

（2）IE盒模型：属性width，height包含content、border和padding，指的是content + padding + border

在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为content-box，即标准盒模型； 如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE 盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。