1.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
边距合并出现的场景
- 元素自身外边距合并：盒模型包括 外边距→边框→内边距→内容 逐层包裹的结构，当元素没有内容，内边距，边框时候，垂直外边距就会相遇从而合并）。
- 相邻元素外边距合并：相邻元素，上下边距如果相遇就会产生合并。
- 父元素与子元素外边距合并：当没有边框或者内边距包裹的话，父子元素的垂直边距就会相遇 从而产生合并，只有普通文档流的块级框才会发生垂直外边距的合并，行内框，浮动框，和绝对定位框不会发生合并。
如何合并？
- 两者为正的时候，取更大值
- 一正一负的时候，取相加值
- 两者为负时，取更小值
如何不让相邻元素外边距合并？
- 让相邻元素处于不同的BFC中，形成各自的世界来隔绝相互的影响。
1.png
- 让相邻元素嵌套在不同的父容器上，添加内边距或者边框来隔绝两者外边距的合并。
2.png
- 转化为浮动，绝对定位框或者行内框（垂直外边距的合并只对普通文档流块级框才有效果）
3.png
2.去除inline-block内缝隙有哪几种常见方法?
- 把元素写在一行紧挨着，这样浏览器就不会解析空格。
- 使用浮动
- 使用负边距
3.父容器使用overflow: auto| hidden撑开高度的原理是什么？
使用overfl:auto|hidden 都会形成BFC，从而拥有了自己的领域，而这个领域的高度，浮动元素一样是参与计算的，所以就撑开了高度。
4.BFC是什么？如何形成BFC，有什么作用?
BFC是什么
BFC(块级格式化上下文)，即一个独立的空间或者领域，内部元素与外部元素互不干涉
如何形成BFC
根元素（当我们初始在html里输入内容超过屏幕高度时会产生滚动条，符合形成BFC）
overflow（不为visible）
float ( 不为none )
position（fixed或absolute）
display:inline-block|table|table-cell|table-captaion|inline-flex|flex;
(以上都会形成BFC)
ie7及以下版本：*zoom:1;（触发haslayout）
有什么作用
BFC可以清除元素浮动外部元素的影响，撑开高度防止高度塌陷，也可以隔绝子元素和父元素的垂直外边距合并，当然相邻元素也可以。
5.浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
浮动导致子元素脱离了正常的文档流，使父元素无法掌控从而导致高度的塌陷。
解决方法：
- 父容器形成BFC建立自己的领域，从而获得控制权，孙悟空即使再牛逼也逃不过五指山
- 清除浮动带来的影响，可以在父容器内添加额外的标签，然后清除浮动。或者利用伪类
:after来清除浮动带来的影响，方法原理一样。
本篇文章版权归咸鱼和饥人谷所有，转载须说明来源
网友评论