CSS的inline、inline-block

CSS inline、inline-block

本文将介绍内联布局中，内容的布局方式及相关原理。

inline box 与 line box

对于行框、内联框，标准文档中有个很经典的图。

附上本身的一段代码，方便理解。

<div style="width: 200px; margin: auto;">
    这是一段代码，又长又好看的代码。
    <span style="color: red">这是inline box</span>
    这又是一段代码，又长又好看的代码。
</div>

上图中：蓝色区域表明inline box，表示一个行内的元素框；红色区域表明line box，每一行的区域均可以表示line box；绿色区域表明root inline box，表示行内区域内不被元素包裹的内容，这里表示没有任何元素包裹的文字。

baseline基线

在内联模型中，涉及到垂直方向的对齐，都离不开基线的定义。咱们一般所说的基线：就是英文字母'x'的下边缘线。(以下图baseline红线)

其中涉及到一个概念叫作“x-height”，所指的就是字母'x'的高度。也就是median(中线)与基线之间的距离。

值得注意的是，最多见的vertical-align: middle，所指示的位置不是median，而是1/2 x-height的高度。

对于inline-block元素来讲，它的基线取决于元素自己的特性，在该元素中没有行内子元素（注意是DOM树的子元素，有块子元素不算或者块子元素中有行元素这个行元素算）的时候或者overflow不为visible，该inline-block的基线为margin-bottom的下边界。不然，以该元素中最后一个行框子元素的基线为该元素的基线。

以下图：第一个inline-block元素没有行内子元素，它的基线为margin-bottom的下边界；第二个有行内元素（内容），基线以x字母正常基线。vertical-align默认以baseline基线对齐，出现下图效果。

而当两个inline-block都没有行内元素时，就会出现另一种结果了，以下图所示：

vertical-align

line-height行高的定义就是两基线的间距；vertical-align的默认值就是基线。这二者之间有着密切的关系。

只有一个元素属于inline或是inline-block，vertical-align才会起做用。

这里须要引伸另一个概念：行替换元素。替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。行替换元素即：浏览器显示的内容，在经过控制台审查元素时，看不到实际内容的行内元素。好比<img>图片，呈现出来就是对应src的图片，可是审查元素下只有<img>标签，看不到图片（只有一个url）。

行替换元素在实际中会产生出现一段空白的问题，以下图所示：

其实这种状况跟上面两个inline-block的状况同样，本质上，是vertical-align和line-height一块儿产生的影响，那么有什么方法解决呢？

• 方法一： 让vertical-align失效

前面也说了，vertical-align对块级元素无感，因此当没有后面的'zhaodao88.com'文字时，只要让图片display设置为block就能够了。

img { display: block; }

• 使用其余vertical-align值（适合后面有跟文字的场景）

只要不是默认值: baseline，其余都是能够的:bottom...

• font-size控制line-height（适合后面没有跟文字的场景，毕竟font-size会影响字体大小）

下面的空隙高度，其实是文字计算后的行高值和字母x下边缘的距离。所以，只要行高足够小，实际文字占据的高度的底部就会在x的上面，下面没有了高度区域支撑，天然，图片就会有容器底边贴合在一块儿了。而line-height又受到font-size的影响，所以只须要在父元素上将font-size设置为0就可。

div { font-size: 0; }

垂直居中

若是想要垂直居中，第一反应利用vertical-align: middle来实现。啪啪啪一段代码来看看效果

div { line-height: 85px; }
img { vertical-align: middle; }

这就是传说中的居中吗？上下间距相差太大了吧？！！
毫无疑问，这又是vertical_align和line-height搞的鬼。

由于middle是相对于x字符的中心点来讲的，而实际上字符内容区域是并非x的高度（比方说图上的h就比x高出一截）就是这一截致使了这种状况。

所以，要想彻底垂直居中，回顾上面消除空白段的方法。

一、可使用设置font-size: 0的方式（适合后面没有跟文字的场景，毕竟font-size会影响字体大小）来实现真正意义上的垂直居中。

二、若是既要消除图片跟文字之间的空隙，又要跟文字，那么文字可使用一个行内标签包裹：

<style>
div {
    background-color: #cccccc;
    margin: 100px 300px 0;
    line-height: 85px;
    height: 85px;
    font-size: 0;
}
img {
    vertical-align: middle;
}
span {
    vertical-align: middle;
    font-size: 16px;
}
</style>
<div><img src="https://profile.csdnimg.cn/3/3/0/3_wuchen092832">
    <span style="background-color: #ffffff">zhaodao88.com</span>
</div>

三、使用一个空的行内标签。将空标签的line-height设为div的高度。

<style>
    div {
        background-color: #cccccc;
        margin: 100px 300px 0;
        height: 85px;
        font-size: 0;
    }
    img {
        vertical-align: middle;
    }
    span {
        vertical-align: middle;
        font-size: 16px;
    }
    .none {
        line-height: 85px;
    }
</style>
<div><img src="https://profile.csdnimg.cn/3/3/0/3_wuchen092832">
    <span style="background-color: #ffffff">zhaodao88.com</span>
    <span class="none"></span>
</div>

参考

https://www.w3.org/TR/2020/WD...

https://www.zhangxinxu.com/wo...