一.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
1.当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并
2.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
如图示，两个div的上外边距都变成了200px
3.一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并
如果这个外边距遇到另一个元素的外边距，它还会发生合并:
注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
- 如何合并？
1.两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2.两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3.两个外边距一正一负时，折叠结果是两者的相加的和。 - 如何不让相邻元素外边距合并？
1.设置一个是浮动的，垂直margin不会被折叠
3.设置绝对定位（position:absolute），垂直margin不会被折叠
4.设置display:inline-block的元素，垂直margin不会被折叠
5.设置了overflow属性的元素和它的子元素之间的margin不会被折叠（overflow取值为visible除外）
二.去除inline-block内缝隙有哪几种常见方法?
1.去掉标签段之间的空格
如图，div之间有空隙
去掉标签间的空格后，空隙消失
可以写成一行：
也可以进行上下拆分：
2.使用负边距
3.使用font-size:0，再设置单独需要的font-size值
4.设置元素浮动
三.父容器使用overflow: auto| hidden撑开高度的原理是什么？
overflow: auto| hidden;后，触发了BFC，BFC元素里面的子孙元素，不会影响外部元素的布局，所以高度会重新计算。
四.BFC是什么？如何形成BFC，有什么作用?
1.BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于* 从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
2.哪些元素会生成BFC?
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
3.作用 -
自适应两栏布局
如图，浮动aslide，但main的左边依然会与包含块的左边相接触
如图，通过触发main生成BFC， 来实现自适应两栏布局
-
清除内部浮动
如图，父元素不能包含住div
为达到清除内部浮动，我们可以触发contain生成BFC，那么contain在计算高度时，内部的浮动元素child也会参与计算
- 防止垂直 margin 重叠
两个div之间的距离为50px，margin重叠了。
在div外面包裹一层容器，并触发该容器生成一个BFC。那么两个div便不属于同一个BFC，就不会发生margin重叠了。
五.浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
- 浮动元素脱离文档流，父元素由于没有了元素而产生高度塌陷
解决方法：
1、在父容器中加入overflow: hidden/auto;
2、使父容器 float或display:inline-block；
3、在父容器中添加高度；
4、在父容器末尾增加一个div，用来清除浮动 - 使用解决方法有：
1.给父元素添加高度
2.父元素也浮动
3.令父元素形成为BFC
4.在父元素末尾增加一个div，设置clear：both；来清除浮动
5.使用如下代码
.clearfix:after{
content: ''; display: block; clear: both;
}
.clearfix{
*zoom: 1;
}
六.以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
原因：在父容器的最后添加一个内容为空的元素，该元素存在于文档流中并且清除左右浮动的元素。父元素虽然感知不到浮动元素,但是可以感知本元素,而本元素又必须在浮动元素的下方，所以父元素高度就不会坍塌
与BFC区别：BFC使父容器本身形成一个可以包含浮动元素的独立的空间，上述方法只是撑开了内容，并没有形成独立的空间
网友评论