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的属性值

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

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

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

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