优化实战 第 57 期 - 重置盒模型的最佳实战

CSS 盒子模型 是视觉设计中被经常用到的一种思维模型，其由实际内容、内边距、边框、外边框四个部分组成

标准盒模型

W3C标准：盒子的大小 = width (content) + padding + border + margin

怪异盒模型

IE标准：盒子的大小 = width (content + padding + border) + margin

重置盒模型

• 重置作用

  符合现实生活中对盒子的认识，如：房子的面积并不单单指可用面积，还要包括墙壁厚度、阳台、电梯之类的空间

  易于代码编写，提升开发效率

• 老式重置方式（不推荐）

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

  通过如下示例得出结论：其破坏了CSS原有的继承性

  <header>border-box</header>
  <div class="section">
    <header>仍然是border-box</header>
  </div>
  

  .section {
    box-sizing: content-box;
  }
  

  继承规则可参阅 第 58 期 - CSS的继承性及其应用 一文

• 最佳实战（推荐）

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

  既实现了盒子模型的重置，又保留了其原有的继承性

  一起学习，加群交流看 沸点