css3 盒模型

css3 盒模型
定义：事先定义盒模型的尺寸解析方式
法规则如下：box-sizing: content-box | border-box | inherit
content-box：默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/ height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），
也就是element width/height = border + padding + content width / height
border-box：重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），
也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，
这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）。
inherit：使元素继承父元素的盒模型模式
伸缩布局：

CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、
调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。Flexbox布局常用于设计比较复杂的页面，
可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。
Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。
例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，
浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。
综合而言，Flexbox布局功能主要具有以下几点：
第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
第五，可以控制元素在页面上的布局方向；
第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。
也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。