css面试题5： 盒模型

标准的盒模型

在标准的盒模型中，你设置的width和height其实就是content box。加上padding和border一起决定了这个盒模型的宽度和高度，也就是盒模型的宽度offWidth = width + padding *2 + border *2

// 如下代码，计算div1的offsetWidth是多大
<style>
#div1 {
      width: 350px;
      height: 150px;
      margin: 25px;
      padding: 25px;
      border: 5px solid black;
  }
</style>
<div id="div1"></div>

上面代码中div的宽度= 350 + 252 + 52 = 410px; 高度 = 210px (150 + 252 + 52)

IE盒模型

在IE盒模型中，所有的设置的宽度就是可见的宽度，所以盒子content box的实际宽度=设置的宽度-padding-border

默认情况下，浏览器是会使用标准的盒模型，如果想使用IE盒模型，则需要设置box-sizing: border-box;

    html {
      box-sizing: border-box;
    }
    *, *::before, *::after {
      box-sizing: inherit;
    }