问答
一、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例。
- 场景：
- 必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
- 没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
- 都属于垂直方向上相邻的外边距
- 如何合并：两者间距取相对大的外边距。如果有正负就两值相加。
- 如何不让相邻元素外边距合并？
- ①兄弟
-
兄弟display:inline-block
兄弟display:inline-block -
float
兄弟float -
兄弟BFC
兄弟BFC
- ②父子不合并
-
父子border和padding
父子border和padding -
隔代外边距合并
隔代外边距合并
- ③高度为0并且最小高度也为0，不包含常规文档流的子元素合并。
自身没有padding或border导致外边距合并 - 注：这时候我们也可以在box2形成BFC来解决这个问题。形成方法如上兄弟可见。
-
父子例子
父子例子
二、去除inline-block内缝隙有哪几种常见方法?
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
参考
三、父容器使用overflow: auto| hidden撑开高度的原理是什么？
触发BFC（块级格式化上下文），BFC在计算高度时，浮动元素也参与计算。
四、BFC是什么？如何形成BFC，有什么作用?
- BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。
- 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
- 作用：
-
阻止垂直外边距（margin-top、margin-bottom）折叠。
阻止垂直外边距（margin-top、margin-bottom）折叠 -
包含浮动
包含浮动 -
BFC不会重叠浮动元素
BFC不会重叠浮动元素
五、浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法？
- 当容器内所有元素浮动时，浮动元素不参与高度计算。导致了父元素高度为0.
- 解决方法：
-
clear
clear -
构建BFC
overflow
注：构建BFC还可以给父元素设置 position:absolute| display:inline-block| table-cell| table-captions| overflow:hidden/auto|
-
直接给父元素设置高度。
设置高度 -
给父元素设置float
父元素float - 在ie6 7下就是触发haslayout,如*zoom:1
六
Paste_Image.png
- 这是用clear：both清除浮动，为了良好的语义化，所以我们添加伪元素after，一般设了浮动，后面最好直接加一个这个语句。
- content:''（行内元素） 必须存在，即使添加的是空文本。否则不能成功清除浮动。
- display:block使得添加的文本变成块级元素。经试验如果是行内元素会撑不起来，inline-block只能撑起一部分，一半都不到。
- clear:both是对自己起作用，两边不允许有浮动元素，所以它自己被挤到了下面。
- 后面的*zoom 1本来是为了检查页面的标签是否闭合;现在用的少则是对ie6 7触发haslayout后面的值其实除了normal都可以。
和BFC的区别：这是清除浮动（怎么清除呢？对自己产生作用，把自己这个块元素挤到最下面），BFC是包含浮动（怎么包含呢？BFC在计算高度的时候回把浮动元素计算进去）。
京公网安备 11010502036488号