1、margin合并问题
块级元素的上边距和下边距有时会合并或者折叠为一个外边距
捕获到的重要信息
- 只发生在块级元素，但不包括浮动元素和绝对定位元素
- 只发生在和当前文档流方向的相垂直的方向上（由于默认文档流是水平流，因此发生margin合并的就是垂直方向）
会出现外边距合并的三种基本情况
1、相邻元素之间
第一行
第二行
p {margin: 1em 0;}
第一行和第二行之间的间距还是1em，因为第一行的margin-bottom和第二行的margin-top合并了
2、父元素和它第一个或最后一个子元素之间
- 当父元素和它第一个子元素之间没有边框、内边距、行内内容或者清除浮动将两者的margin-top分开
- 同样的当父元素和最后一个子元素之间没有边框、内边距、行内内容、height、min-height/max-height将两者的margin-bottom分开，那么这时，两个外边距就会合并，子元素的外边距就会溢出到父元素外面（父元素的外边距为两者之和，子元素的外边距为0）
在默认状态下，下面三种设置是等效的
3、空的块级元素
当一个块级元素中不包含任何内容时，并且在其margin-top和margin-bottom之间没有边框、内边距、行内内容、height、min-height将两者分开，此时外边距会合并
.father {overflow:hidden;}.son {margin:1em 0;}
此时.father所在的这个父级<div>元素高度仅仅是1em，因为.son这个空<div>元素的margin-top和margin-bottom合并在一起了
margin合并的计算规则
- 正正取大值：取大的那个值
- 正负值相加：取计算后的值
- 负负最负值：取绝对负值最大的值
margin合并的意义
1、兄弟元素的margin合并
使图文信息的排版更加舒服自然，保证元素上下间距一致
2、父子margin合并的意义
在页面中任何地方嵌套或直接放入任何空标签，都不会影响原来的块状布局
3、自身margin合并的意义
可以避免不小心遗落或者生成的空标签影响排版和布局
阻止以上margin合并的发生
1、阻止margin-top的合并（满足一个条件即可）
- 父元素设置为块状格式化上下文元素（比如overflow:hidden）
- 父元素设置border-top值
- 父元素设置padding-top值
- 父元素和第一个子元素之间添加内联元素进行分隔
2、阻止margin-bottom合并
- 父元素设置为块状格式化上下文元素
- 父元素设置border-bottom值
- 父元素设置padding-bottom值
- 父元素和最后一个子元素之间添加内联元素进行分隔
- 父元素设置height、min-height或max-height
3、阻止空标签margin合并
- 设置垂直方向的border
- 设置垂直方向的padding
- 里面添加内联元素
- 设置height或者min-height
以上需要注意的地方
- 以上情况的组合会产生更复杂的外边距合并
- 即使某一外边距为0，这些规则仍然适用，所以就算父元素的外边距为0，还是会出现第二种情况
- 如果参与合并的外边距中包含负值，合并后的外边距等于最大的外边距与最小的外边距之和
- 如果所有参与合并的外边距都为负值，合并后的外边距等于最小的外边距的值
2、深入理解margin:auto
margin:auto的填充规则
- 如果一侧定值，一侧auto，则auto为剩余空间大小
此时.son的左边距为20px、右边距为80px
- 如果两侧auto，则平分剩余空间
margin:auto的隐藏用法
为块级元素自适应左中右对齐和内联元素使用text-align控制左中右对齐相呼应
3、为什么容器定高、元素定高、margin:auto却无法垂直居中
默认文档流是水平方向
解决方案
-
使用writing-mode改变文档流的方向
.father{
height:200px;writing-mode:vertical-lr;
}
.son{height:100px;margin:auto;
}
此时.son就是垂直居中对齐的，但是水平方向就无法auto居中
-
绝对定位元素的margin:auto居中
.father{ width:300px; background-color:#999; height:200px; position:relative; }.son { width:200px; background-color:#ccc; height:100px; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;}
IE8以及以上版本浏览器才支持，但却是最好用的块级元素垂直居中对齐方式