CSS 盒模型

盒模型

CSS 盒模型又被称为框模型，包含元素内容 (Content)、内边距 (padding)、边框 (border)、外边距 (margin)

CSS 外边距叠加时会发生合并，使用 BFC 可以有效解决没必要的边距重合

box-sizing: content | border-box | inherit

• content-box： box-sizing 的默认值，可以使设置的宽度与高度应用到元素的内容框，盒子的 width 仅包含内容 (content)
  • 盒子总宽度 = margin + padding + border + width;
• border-box： 怪异盒模型计算方式，设置的 width 包含除 margin 外的边框、内边距、内容框的总宽度，即 width = content + padding + border
  • 盒子总宽度 = margin + width
• inherit： 规定从父元素继承 box-sizing 的属性值

标准盒模型与 IE 盒模型

标准盒模型也就是我们上文中提到的默认值方式 content-box，而 IE 盒模型，也就是我们常说的怪异盒模型，它的计算宽度方式就是 border-box 的计算方式，

在 IE 浏览器中 IE9 以下（IE6.IE7.IE8）的版本触发怪异模式，其他浏览器中会默认为 W3c 标准模式。原因是 doctype 协议缺失

如果我们定义了完整的 doctype 的标准文档类型，那么无论是哪种模型情况，最终都会触发标准模式。

小结

这应该是我的博客中最短的一篇，但是并不影响它的重要性，甚至可能在之后的日子里我还会发布很多这样的文章来补充我的知识盲区，欢迎关注！