IFC思维解决前端布局问题：空隙、对齐与垂直调整实例-优快云博客

本文链接：https://blog.youkuaiyun.com/zx442008375/article/details/120251244

IFC思维解决问题案例

1，inline-block(例如img)元素底部空隙问题

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        width: 200px;
      }

      div {
        width: 300px;
        border: 1px solid #000;
      }

      span {
        background: orangered;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="./Moshify/images/example.jpg" alt="" />
      <span>x</span>
    </div>
  </body>
</html>

可以看到，img元素与div底部有一段空隙，

这个空隙是由于如下原因造成的：

**个人觉得：**IFC为文本节点预留下边距造成的（可以从图2看到就算没有文本节点存在，间隙依然存在）
IFC特性下，内联元素的基线默认对齐。inline-block元素的基线就是其margin box的底部，与文本节点的基线（x的底部）对齐，导致了下面被撑开一段距离（x的基线到其下边距底部的距离）

解决方案：

将img元素的display属性修改为block，让其独占一行，这样就无需再为该行预留文本节点下边距
将img元素的vertical-align修改为top/middle/bottom，这样会改变其所属line box的基线，而由于基线默认对齐，文本节点会从原来底部的位置搬离至合理的位置。
将div容器的line-height设置为0，这样会移除其内部的文本节点的上下边距，进而不会撑大div了。
将div容器的font-size设置为0，这样会”直接移除掉”其内部的文本节点，原理同设置line-height为0。

2，inline-block元素的水平空隙问题

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 400px;
        background: #d1dddb;
      }

      .content {
        width: 100px;
        height: 100px;
        background: #85b8cb;
        display: inline-block;
      }

      .empty {
        width: 100px;
        height: 100px;
        background: #1d6a96;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="content"></div>
      <div class="empty"></div>
    </div>
  </body>
</html>

可以看到两个inline-block之间有一段空隙，这是由于两个div标签之间的换行符造成的，这个换行符会被解析为DOM中的文本节点。可以想象这是一行文字，由于white-space为normal默认转换多个空白符/换行符为一个空白符导致的。

解决办法：

    <div class="container">
      <div class="content"></div><!-- 注释去空格 
      --><div class="empty"></div>
    </div>

注释节点是不会被渲染的，所以最终渲染的效果会和如下代码一样，两个div标签之间没有空白符也没有换行符，这样就不会有水平空隙了。

    <div class="container">
      <div class="content"></div><div class="empty"></div>
    </div>

3，inline-block元素的垂直对齐问题

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 600px;
        background: #424041;
      }

      .content {
        width: 100px;
        height: 100px;
        background: #e1dcd9;
        display: inline-block;
      }

      .empty {
        width: 100px;
        height: 100px;
        background: #8f8681;
        display: inline-block;
      }

      span{
        color:#e1dcd9;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="content">
        content
      </div>
      <div class="empty"></div>
      <span>x</span>
    </div>
  </body>
</html>

可以看到，含有内联元素的inline-block元素和不含内联元素的inline-block元素垂直方向上错位了，但是可以发现第一个盒子的内联元素的基线与第二个盒子的基线、文本节点的基线对齐了。

问题原因

IFC特性下，内联元素垂直方向上默认基线对齐。
没有内容的inline-block元素的基线是margin box的底部。
有内容的inline-block元素的基线是其内部最后一行内联元素的基线。
所以由于基线对齐，三个元素才会以这样的形式来在垂直方向上分布（同时容器div被撑大了）。

解决方案

给第二个盒子增加一个空白节点&nbsp或者空白内容的伪元素。
给第一个盒子设置vertical-align为top或者给第二个盒子设置vertical-align为bottom

<div class="empty">&nbsp</div>

.empty::after{
    content: "content";
    opacity: 0;
}

.content {
    width: 100px;
    height: 100px;
    background: #e1dcd9;
    display: inline-block;
    vertical-align: top;
}

.empty {
    width: 100px;
    height: 100px;
    background: #8f8681;
    display: inline-block;
    vertical-align: bottom;
}