H5C3练习总结12.12--外边距的合并，弹性盒子

1.外边距实现盒子居中对齐

让一个盒子水平居中需要满足以下条件：

<1>.必须是块级元素

<2>.盒子必须设置宽度

给左右外边距都设置auto就可以实现盒子水平居中

.header {
    width: 960px;
    margin: 0 auto;
}

2.外边距的合并

（1） 相邻块元素垂直外边距的合并

当上下两个相邻的块元素相遇时，如果上面那个块元素设置了margin-bottom而下面那个块元素设置了margin-top，则它们两个块元素的垂直间距不是margin-bottom和margin-top之和，而是两者中的较大者，这种现象叫相邻元素垂直外边距的合并也称外边距的合并。

最好的解决方案：避免就好了，相邻块元素垂直方向上设置一个外边距就行

考虑margin支持负数，实际相邻块元素垂直外边距的结果：

• 俩都是正值，取俩值中较大者
• 俩值一正一负，取俩值的和
• 俩值都是负值，取绝对值较大者

效果图：

（2）嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距和边框，则父元素的上外边距与子元素的上外边距会合并，合并后的上外边距为两者中较大的那一个，即使父元素的上外边距为0，也会发生合并。

例如，嵌套块元素，父元素和子元素同时拥有上外边距margin-top，结果父元素和子元素可能并不会出现想像中的差距，而是子元素和带着父元素一起跑。

效果图：

父元素拥有上外边距10px,子元素拥有上外边距20px，嵌套块元素垂直外边距塌陷后，父元素也拥有了20px的上外边距。

解决办法：

http://t.csdnimg.cn/0m6g7

参考上述博主，写得非常清楚！

3.弹性盒子模型（flex box）

定义：

弹性盒子由弹性容器(flex container)和弹性子元素(flex items)组成

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

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

在 CSS3 中给 display 属性增加了新的属性值 flex，如果一个元素被设置 display:flex，说明该元素为弹性布局，也就是个弹性盒子。

弹性盒模型布局：

属性：

（1）flex-direction属性（父元素属性）

指定子元素在容器中的位置

各个属性值的效果如下：

（2）justify-content属性（父元素属性）

内容对齐，把弹性项沿着弹性容器的主轴线对齐

• center：伸缩项目向主轴第一行的中间位置对齐。
• flex-start：伸缩项目向主轴第一行的开始位置对齐。
• flex-end：伸缩项目向主轴第一行的结束位置对齐。
• space-between：伸缩项目会沿主轴平均分布在一行中。
• space-around：伸缩项目会沿主轴平均分布在一行中，两端保留一半的空间。

（3）align-items属性（父元素属性）

内容对齐，把弹性项沿着弹性容器的侧轴线对齐

• center：伸缩项目向侧轴的中间位置对齐。
• flex-start：伸缩项目向侧轴的起点位置对齐。
• flex-end：伸缩项目向侧轴的终点位置对齐。
• baseline：伸缩项目根据伸缩项目的基线对齐。
• stretch：默认值，伸缩项目拉伸填充整个伸缩容器。

（4）flex-wrap属性（父元素属性）

指定弹性盒子的子元素的换行方式

（5）flex-grow属性/简写flex属性（子元素属性） 

根据弹性盒子元素所设置的扩展因子作为比率分配剩余空间（设置这个属性，子盒子宽度不再生效）

默认为0，即如果存在剩余空间也不放大

如果只有一个子元素设置，那么按照扩展因子的百分比对其分配剩余空间