参考博客： blog.csdn.net/prdslf00100… www.jianshu.com/p/1ccbe1300…

从一个问题出发

从一个问题开始。幽灵空白节点哪里来的？

答案： 1、这个幽灵空白距离是基线到底边。基线到底边是有一定距离的。而这个距离多少是一个字母半边距。

那么你一大堆问题又来了。那么问题来了。基线是什么。哪里的基线。盒子和基线的区别？且听我一一道来。

知识点

知识点1 3中标签

知识点1 ：我们知道3中标签。块级标签： div。

行内标签：span

行内块标签：input, img,

知识点2 3种盒子

2.1、内联盒子： inline- boxes

内联盒子 = 行内元素盒子+行内块元素盒子。

对于行内元素，元素内联盒子的高度刚好等于line—height的值。因此我们有了第一个公式 line-height = fontsize + 上下边距。

对于行内块元素，元素行内框的高度则恰好等于内容区的高度，因为行间距不能应用到替换元素。

2.2、 “行框盒子” line-boxes 对于line-boxed的行高，则行内元素，行内块元素最上的顶边到最下的底边的距离；

如果只有行内元素。那么就是行内元素的line-height。

如果只有行内块元素。那么就是行内块元素的高度。

此时你会惊讶幽灵节点哪里来的？

行高 = 顶边（行内元素、行内块元素）+ 底边（行内元素、行内块元素）。

也就是说这么藏着行内元素的底边距离。而底边距 = (lineheight- fontisze)/2 。

是对的。是因为浏览器给外面默认了字体大小宽度。我们只需要把底边距为0即可。 lineheight和fontsize都为0即可。

那我们怎么把这个行内元素距离弄没有呢。设置字体,那就是为0.

或者呢，我们把这个lineheight设置的足够小。小于这个字体就ok。我们知道，谷歌浏览器默认字体小时12px；

如果是13px，那么就是开始大了

但是如果既有行内元素，也有行内块元素。那么就是两个。

2.3、包含块盒子：containing boxes：

知识3、基线

搞懂了，幽灵节点之后，还需要了解基线。

1、行内元素的基线，比如一个文本，它的基线是大部分字母的对齐线，就是字母X的下边线；

2、行内块状元素的基线

如果行内块状元素中有流内容，其基线就是正常流中，最后一行元素的基线；字母就是元素的基线。 div inline-block 。

行内块状元素中有流内容，但是其overflow属性值不是visible（是hidden或者其他）；

行内块状元素没有流内容。 那么，此时 行内块状元素的基线则是 此元素的外边距盒子的底边。

总结：要么是文字下边线，要么是盒子外边距底边。。

3、行框（行盒子）的基线：对于一行有多个行内元素，或者行内块元素来说。那么基线应该是什么呢？

一个行框中，最大的/最高的行内框（内联盒子）决定的；此行盒中的其他的较小的行内元素，将会以此行盒基线，为参照；

（既：找出行盒中最高的元素，根据这个元素的对齐方式。确定基线位置，其他元素再进行参照）；

4、对齐方式

父元素基线 === 最大高度lineheight 元素基线。

我们一般都会给父元素div设置vertain-align，会遗传给子元素。子元素也是给最大高度lineheight元素基线。而为不会给其他非子元素进行设置，容易乱套。

如果对baseline元素进行vertain-align：如果是top。其他的元素靠顶部站。如果是bottom其他的元素靠底部站。

如果是 -- ·baseline ：其他元素和父元素基线对齐。

text-top
使元素的顶部与父元素的字体顶部对齐。

text-bottom
使元素的底部与父元素的字体底部对齐。

middle
使元素的中部与父元素的基线（下边的）加上父元素 x-height(上边距+下边距/2中间的) 的一半对齐。

sub
使元素的基线与父元素的下标基线对齐。
super
使元素的基线与父元素的上标基线对齐。

没有基线的元素，使用外边距的下边缘替代。没有中部的元素，使用外边距的下边缘替代。

使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。
使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是属性的百分比。可以是负数。

5.垂直居中

元素vertain -align:middle = (父元素的一半 +父元素的基线/2) 父元素中心不等于父元素基线。因此有几种办法消除误差？

1、设置font-siez等于0 2、字体设置成为伪元素，

height:24px;
line-height:24px;
1 .误区1，想要垂直居中，只需要设置一个比当前font-size大的line-height就可以
2 .误区2，这种实现的是近似居中,多行文字居中也是可以实现。但是这个我试不出来。所以去网上搜了下实现方法

1 .首先单个文本内实现是没戏了，哎好像是可以的啊，甚至高度不确定也是可以的
div{
        background-color: thistle;
        font-family: simsun;
        font-size: 20px;
        height: 200px;
        width:200px;
        display: inline-flex;
        align-items: center;
      }

div {
    background-color: thistle;
    font-family: simsun;
    font-size: 20px;
    /* height: 200px; */
    width: 200px;
    line-height: 1.5;
    padding: 20px 0px;
    display: inline-flex;
    align-items: center;
}
//没有高度也可以

2 .table，table-cell模拟表格，子元素设置vertical:middle可以垂直居中
3 .脱离文档流，div固定宽高，top50%，margin-top负高度的一半
4 .先让p变成一个内联元素，父元素的line-height决定了内联元素的高度。这里line-height作用的是幽灵节点。其实子元素也有自己的行高，然后子元素使用vertical-align来实现居中对齐

垂直居中： 1、包含关系：行高 === 父盒子高度。 (记得字体高度设置为0.)

文字居中：

单行文本。方法1、line-height. 方法2、display tell:::display: table-cell; vertical-align: middle

方法3： padding。方法4：绝对定位：margin。

方法5：固定高度：margin.负值。方法6：不固定高度：translate。

方法7：最后一个：flex布局。

内联盒子。line-heigt。行框盒子。 vertain-align。垂直居中。