CSS 盒子模型（Box Model）

• 盒模型的组成：由content（内容区域），padding（内边距），border（边框），margin（外边距）组成。
• 盒模型有两种标准：一种是标准盒子模型（W3C盒子模型），另一种是IE盒子模型（怪异盒子模型）。
• 两种标准的区别：这两种标准对容器的 height 和 width 的计算方式不同，
  标准盒子模型只包括 content，
  IE盒子模型为 content + padding + border 。
• 可以通过CSS属性 box-sizing 来对这两种标准进行切换，
  当值为 content-box 时为标准盒子模型，
  值为 border-box 时为IE盒子模型。
• 盒模型的作用：当对一个文档进行布局的时候，浏览器的渲染引擎会根据盒模型标准将所有元素表示为一个个矩形的盒子。

版权声明：本文为CSDN博主「瓜冬瓜」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42561383/article/details/90609465