关于CSS inline-block、BFC以及外边距合并的几个小问题

2022-07-17 21:28:20

CSS inline-block和BCF对于初学者来说，总是弄不太明白，下面记录下我在学习这块知识的过程中遇到的几个问题，供大家参考，有不足的地方，欢迎大家批评指正。

一、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

定义：当两个垂直外边距相遇时，将形成一个外边距。

合并的场景：

一个元素出现在另一个元素上面时；
示例：

一个元素包含另一个元素时（没有内边距或边框把它们的外边距分开）

如图效果中，父容器box和子元素box1的上外边距合并，与子元素box2的下外边距合并。

一个没有内边距和边框的空元素，它的上下外边距相遇会合并；

当我们给空元素添加边框后，变化很明显：

我们可以很明显的看到：情况一中文字距离box边框的距离是情况二中的一半。

合并后的高度为这两个外边距中高度为这两个外边距中高度值最大者。

解决方案：

1.对于一个元素出现在另一个元素上面：可以使用的方法有：

使用display:inline-block;示例如下：

使用浮动；示例如下：

2.对于父子以及空元素外边距合并，可以使用通过设置padding和border来解决；

二、去除inline-block内缝隙有哪几种常见方法?

inline-block产生间隙的情况如下：

要想清除inline-block内的缝隙，我们可以采取以下几种方法：

去除li元素之间的空格；示例如下：

负边距；示例如下：

注意第一个li与外边界之间的距离。

使用浮动；示例如下：

将li中的font-size设为0px;示例如下：

三、父容器使用overflow: auto| hidden撑开高度的原理是什么？

父容器使用overflow:auto|hidden后,会形成BFC，清除子元素浮动造成的影响，形成自己的“小宇宙”，从而把父容器撑开。

四、BFC是什么？如何形成BFC，有什么作用?

定义：BFC(Block formating context)直译为“块级格式化上下文”。是按照块级盒子布局的。W3C给出的定义如下：

浮动元素和绝对定位元素，非块级盒子的会计容器（例如inline-blocks,table-cells,和table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

如何形成BFC：

1.根元素或其它包含它的元素；

2.浮动（元素的float 不为none）;

3.绝对定位（元素的position 为absolute或fixed）;

4.行内块inline-blocks(元素的display:inline-block);

5.表格单元格（元素的display:table-cell,HTML表格单元格默认属性）；

6.overflow的值不为visible的元素；

7.弹性盒子flex boxes(元素的display:flex或inline-flex)

作用：

1.BFC可以避免外边距折叠；示例：

html:
<pre><div class="box">
    <div class="box1"></div>
    <div class="new">
      <div class="box2"></div>
    </div>
  </div></pre>
css:
<pre>.box{
  border:1px solid;
  background:#ccc;
}
.box1{
  height:100px;
  width:100px;
  background:#0000ff;
  margin:20px;
}
.box2{
  height:100px;
  width:100px;
  background:red;
  margin:20px;
}
.new{
  overflow:auto;
}</pre>

实现的效果：

2.BFC包含浮动；

3.使用BFC避免文字环绕；

4.在多列布局中使用BFC。

五、浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法？

浮动导致的父容器高度塌陷指的是子元素浮动后使得父容器没有高度；

产生原因：浮动的框会左右移动，直至它的边缘遇到包含框或者另一个浮动框的边缘。浮动框或脱离文档流，当一个元素浮动之后，文档流就表现得和浮动框不存在一样，当浮动框高度超过包含框的时候，就会出现包含框不会自动伸高来闭合浮动元素，从而出现“父容器高度塌陷”。

解决方法：

1.使用clear:left|right|both;

2.父元素也设置浮动；

3.给父元素设置overflow:hidden|auto

4.使用伪元素 :after.

参考文献：
1.How To Clear Floats Without Structural Markup
2.那些年我们一起清除过的浮动
3.【CSS】浮动和它的工作原理？清除浮动的技巧？
4.CSS中的BFC

码农公寓