深入理解行内元素的布局

摘要：看上面的例子我们也能看出来，实际上一个内联元素是有两个高度的高度实际渲染的那个高度和高度实际区域占空间的高度也就是。

前言

总括： 本文通过实例讲解CSS中最大的难点之一，行内元素的布局，主要是挖掘line-height和vertical-align两个属性在布局方面的使用。

原文博客地址：深入理解行内元素的布局

知乎专栏&&简书专题：前端进击者（知乎）&&前端进击者（简书）

博主博客地址：Damonare的个人博客

白茶清欢无别事，我在等风，也在等你。?

正文

讲道理line-height和vertical-align 这对基是十分低调的，日常开发中碰到的很多莫名其妙的bug很大一部分都是这俩货搞出来了的，但很少有人知道这对基的罪恶，因为可能花式改写一下CSS代码问题就解决了。实际上搞明白这俩东西才能让我们在布局工作中游刃有余。本文接下来就通过这对基的关系来了解内联元素具体的布局问题~we are刨根问底拦不住~?

​ 读这篇文章之前请确定您有以下知识基础:

line-height的数字值是和font-size大小相关的；

vertical-align的百分比值是和line-height值相关的；

引出vertical-align

首先来看一个?：

  Xx

.test {
      background: red;
}
img {
    width: 50px;
    height: 50px;
}
span {
    background: white;
}

下面无实例内容的话戳这里

如上可证明，inline元素的高度决定者是line-height，并不是文字内容撑开的。✌️

CSS规范里对line-height的默认值有这么一句话：

We recommend a used value for "normal" between 1.0 to 1.2.

只是推荐...?是不是说实际上各个浏览器对于line-height的默认值实现不一定是一样的，但都介于1.0-1.2之间。具体各大浏览器的实现值待查证。这里需要记住line-height的默认值是啥就OK。

IFC

在之前的博文CSS的盒子模型里面，有拓展过相关知识，简短的介绍了下BFC和IFC，相较于BFC，IFC要复杂得多，规范里IFC的篇幅也要比BFC多得多。

简要总结下BFC，即块级元素可能会触发块级格式上下文(BFC)，在块级格式上下文中，块级盒子竖直方向排列，不受上下文外部元素影响，自成一方世界。块容器盒指的是那些包含元素的盒子，块容器盒可能包含其它块级盒，也可能生成一个行内格式上下文(IFC)。?

但块容器盒要么只包含行内盒，要么只包含块级盒。但通常会同时包含两者。在这种情况下，将创建匿名块盒来包含毗邻的行内级盒。

看个?：

//demo1

  Some inline text 
  
followed by a paragraph
 
  followed by more inline text.

// demo2

  Some inline text 
  followed by a paragraph 
  followed by more inline text.

如上，demo1将创建两个匿名块盒，一个包含 p前面的文本 (Some inline text)， 一个包含 p 后面的文本(followed by more inline text)。

demo2将生成一个行内格式上下文，生成一个匿名行盒(line box)，里面包含两个匿名行内盒(inline box)，Some inline text 和followed by more inline text.和一个span行内盒。

OK，至于怎么触发块级格式上下文请看块格式化上下文。这里只为了说明IFC而介绍下BFC。

当元素的 CSS 属性 display 的计算值为 inline, inline-block 或 inline-table 时，称它为行内级元素。
行内级元素生成行内级盒(inline-level boxes)，参与行内格式化上下文(inline formatting context)。同时参与生成行内格式化上下文的行内级盒称为行内盒(Inline boxes)。

规范里IFC文字很多，提炼下我们需要的：

如果一个矩形区域，包含着一些排成一条线的盒子，称为line box。
一个line box的宽度，由他的包含块(containg block)和floats的存在情况决定。line box的高度，由你给出的代码决定。(line-height)，即所有inline box的最大高度差。
当盒子的高度小于父级盒子高度时，垂直方向的对齐"vertical-align"属性决定。

Vertical-align(2)

在上面的vertical-align(1)中主要了解了什么是baseline，以及它是如何确定的。我们继续研究这个属性，看下面说明表格：

值	描述
baseline	默认。元素放置在父元素的基线上。
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。

除了baseline我们已经很了解之外，其它几个属性我们貌似也能看懂，唯一的问题可能是父元素的顶端低端都是什么鬼？?需要确定一下，好的再次拿我们第一个例子来讲解，但我们需要变一下，加点东西进去：

  
    Xx
  

.demo {
  background: red;
}
.line-box {
  background: blue;
  line-height: 200px;
}
.line-box img {
  vertical-align: text-bottom;
  width: 50px;
}
.line-box span {
  margin-left: 20px;
  color: yellow;
}

实例

上面例子中，我们更改了Xx的对齐方式，发现了很奇特的现象?，当Xx设置为text-bottom或是text-top的时候父元素(ling box)被撑大了?，但这另一方面这也证明了，父元素的基线和中线等并不是由文本Xx决定的，谁决定的呢？前面提过的那个空白节点决定的！?这个空白节点实际上是理解内联元素布局的重点！不知道它的存在，很多问题是搞不清楚的。那么这个空白节点又到底是怎么影响布局的呢？前面说过基线的决定着是小写字母x，这个时候问题就来了，可能你早就想问了，不同字体下面的小写字母x底部边缘肯定是有区别的啊，好，我们在研究下font-family。

Font-family

我们再来看一个?:

下面没示例内容请戳这