CSS 盒子模型：标准盒模型与 IE 盒模型区别

什么是 css 盒子模型

盒子，封装周围的 HTML 元素，它包括：width、height、padding、border、margin。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
页面渲染时，dom 元素所采用的布局模型。可通过 box-sizing 进行设置
width 和 height：内容的宽度、高度（不是盒子的宽度、高度）。盒子的内容，显示文本和图像。
padding：内边距。清除内容周围的区域，内边距是透明的。
border：边框。围绕在内边距和内容外的边框。
margin：外边距。清除边框外的区域，外边距是透明的。

盒模型是有两种标准的，一个是标准模型，一个是 IE 模型

W3C 盒子模型（标准盒模型）

IE 盒模型（怪异盒模型）

标准盒模型与 IE 盒模型区别

标准模型中，盒模型的宽高只是内容（content）的宽高，
IE 模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高，在 IE6/5 的低版本 IE 中

一些注意点

根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。
但 IE5 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
IE8 及更早 IE 版本不支持设置填充的宽度和边框的宽度属性。
解决 IE8 及更早版本不兼容问题可以在 HTML 页面声明 <!DOCTYPE html> 即可。
假如不用 doctype 声明，那么各个浏览器会根据自己的标准去解析网页，即 ie 浏览器会采用 ie 盒子模型去解析盒子模型，而 Chrome 浏览器会采用标准 w3c 盒子模型解析盒子，
使用 doctype 声明，那么所有浏览器都会采用标准 w3c 盒子模型解析盒子，网页就能在各个浏览器统一显示。
在使用 doctype 声明情况下，设置属性 box-sizing:border-box 就可以定义使用 ie 盒模型。盒子模型主要适用于块级元素
body 标签也有 margin：很多人以为 body 标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是 document，即浏览器。而 body 是 document 的儿子。浏览器给 body 默认的 margin 大小是 8 个像素，此时 body 占据了整个页面的一大部分区域，而不是全部区域。

css 如何设置两种模型：（css3 的属性 box-sizing）

通常情况下，在不设置 box-sizing 时，默认 box-sizing:content-box;

/*标准模型*/
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;

代码示例

::: demo [vanilla]

<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div style="display: flex;justify-content: space-around">
      <div
        id="div1"
        style="flex-shrink: 0;width: 100px;height: 100px;padding: 20px;margin: 30px;background: lightcyan;border: 3px solid red;box-sizing: content-box"
      ></div>
      <div
        id="div2"
        style="flex-shrink: 0;width: 100px;height: 100px;padding: 20px;margin: 30px;background: lightcyan;border: 3px solid red;box-sizing: border-box"
      ></div>
    </div>
    <script>
      const div1 = document.getElementById('div1');
      const div2 = document.getElementById('div2');
      div1.innerHTML =
        'content-box:<br>offsetWidth:' +
        div1.offsetWidth +
        ' clientWidth:' +
        div1.clientWidth;
      div2.innerHTML =
        'border-box:<br>offsetWidth:' +
        div2.offsetWidth +
        ' clientWidth:' +
        div2.clientWidth;
    </script>
  </body>
</html>

{
  "show": true
}

:::