一、 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 场景
- 如何合并
- 元素的margin-top与其第一个常规文档流的子元素的margin-top（父子）
- 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top（兄弟）
- 高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom（自身）
- 如何不让相邻元素外边距合并
- 创建了新的BFC的元素（例如浮动元素或者'overflow'值为'visible'以外的元素）与它的子元素的外边距不会折叠
- 浮动元素不与任何元素的外边距产生折叠（包括其父元素和子元素）
- 绝对定位元素不与任何元素的外边距产生折叠
- inline-block元素不与任何元素的外边距产生折叠
- 范例
范例
二、去除inline-block内缝隙有哪几种常见方法?
产生缝隙的根本原因是，因为继承了行内元素的特性，所以元素之间会有一个空白符，跟普通文本符是一样的，因此要消除缝隙就是要消除这个空白文本符；
四种主要方法
三、父容器使用overflow: auto| hidden撑开高度的原理是什么？
- 原理是因为父容器形成了一个BFC，BFC相当于是一个闭合的大容器，是一个独立的布局环境，影响子元素，而不受外界元素的影响，在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。而形成一个BFC的条件之一就是
overflow: auto| hidden，当形成BFC后就可以闭合浮动，使脱离文档流的元素，回到容器中，便将整个高度撑开了；
四、BFC是什么？如何形成BFC，有什么作用?
- W3C解释BFC：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
- 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
- BFC的应用：
- BFC第一个应用就是在清除浮动
- BFC第二个应用就是可以使浮动后文字不绕着图片，就是将p标签生成一个BFC的空间，这样就是一个独立的，不会受旁边的img影响；(overflow:auto)
- BFC第三个应用就是使div之间的上下margin不折叠，给每个div外在包裹一个div并且让它形成BFC的空间；(overflow:auto)
五、浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
- 实际上并不能说是父容器塌陷，因为原本父容器的高度就是由里面的子元素撑开的，当里面的子元素浮动后脱离了正常的文档流，父容器的高度自然就没有了，就出现了所谓的“塌陷”的情况；
- 解决方法：
主要的三种方法
六、以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after{
content: ''; /*空字符*/
display: block; /*因原来是行内元素现需要形成块级元素*/
clear: both; /*清除浮动*/
}
.clearfix{
*zoom: 1; /*css hack兼容IE6\7*/
}```
- 区别：
1. 利用BFC是闭合浮动，并不是清除浮动，是将脱离正常文档流的纳入一个新的BFC中，这个BFC就是父容器，有了子元素后高度自然就被撑开了；
2. clearfix实际就是利用伪元素:after,相当于给父容器的最下面添加了一个display:block的伪元素，它clear:both；就可以清除父容器中子元素浮动带来的影响。这里就是传统意义的清除浮动；
**本博客版权归本人和饥人谷所有，转载需说明来源**
网友评论