css3中的弹性盒与怪异盒

首先讲一下什么是弹性盒：

弹性盒布局模型（Flexible Box Layout）是 CSS3 规范中提出的一种新的布局方式， 弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。

说的简单点就是具有自适应的布局称为弹性盒布局。

那么如何进行布局呢？首先我们需要在父元素上加 display:box(老版本)或者display:flex(新版本).. 然后我们给每个子元素设置 box-flex:1;这样每个子元素就均分了父元素的宽度；当然你如果给某个子元素设置 box-flex:2；那他所占比例就大一点；另外要注意点，在使用弹性盒布局时，你也可以给子元素设置具体宽度，那么其他子元素就会用剩下的宽度进行布局；

弹性盒默认是水平布局的，可万一我们需要垂直布局怎么办呢，那就需要在父元素上加 box-orient:vertical;此外我们还可设置盒子的排列顺序 box-direction:reverse(逆序)。

再说一点，由于是具体宽度和弹性盒子一起布局，可能会出现父元素空间多余的情况，这个时候还可利用box-align 和 box-pack来进行样式改变.

然后讲一下怪异盒：

根据我自己的理解，怪异盒子就是和我们标准盒子模型相反的， 盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子 总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

要使用怪异盒子首先得给父元素加 box-sizing:border-box;然后你就可以尽情使用它了，不用计算子元素的宽高，因为他的margin，border 都在自己里面。

注：以上都存在兼容性问题，需要在属性前面加上 -webkit(谷歌兼容) 或者-moz(火狐兼容)