Html-标准盒子模型和怪异盒子模型

标准盒子模型css盒子模型 又称框模型 (Box Model)，是CSS中一个重要概念，文档中的每个元素被描绘为矩形盒子，所有文档元素都生成一个矩形框，这称为元素框(element box)，它描述了一个元素在文档布局中所占的空间大小，而且，每个框影响着其他元素框的位置和大小。

盒子模型包含了 元素内容（content）、内边距（padding）、边框（border）、外边距（margin） 几个要素。

标准盒子模型：

标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

标准模式下，一个块的宽度 = width+padding(内边距)+border(边框)+margin(外边距)；

IE 盒子模型：

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

怪异模式下，一个块的宽度 = width+margin(外边距) （即怪异模式下，width包含了border以及padding)；

---

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

CSS3 box-sizing

box-sizing:content-box; 将采用标准模式的盒子模型标准

box-sizing:border-box; 将采用怪异模式的盒子模型标准

box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的> 值。