css中重难点整理(vertical-align)

一、vertical-align

在学习vertical-align的时候，可能会很困惑。即使网上有一大推文章讲veitical-align,感觉看完好像懂了，等自己布局的时候用到vertical-align的时候好像对它又很陌生。这就是我在布局的时候遇到的问题。

本来vertical-align就很不好理解，网上又有很多大佬把它和line-height放在一起讲，我觉得这是造成学习这个属性困惑的原因之一。其实我认为这两个属性关系不大。

我希望看这篇文章的时候都默认了解了基本的知识点，比如行高是什么，vertical-align的官方定义，line box（行盒），inline-level 的基线，inline-level 默认基线对齐。如果对这些还不明白可以去MDN上，或者我推荐的这篇文章css vertical-align你真的很了解嘛？ 仔细看看，因为这里没有介绍基本含义，只是记录我当时踩的坑。

我知道 vertical-align默认是基线对齐，也明白一个img底下为啥会多出来空白内容，而我们修改了vertical-align属性值，空白就会消失。

我疑惑的点是，我们对inline-level设置的vertical-align到底是和父元素的什么对齐，当时我有以下几点想法，但都证明是错误的。

1、inline-level设置的vertical-align始终和父元素的baseline对齐；

例如：inline-level设置了vertical-align:top;那结果应该是inline-level的top去和父元素的baseline对齐，经验证并不对

2、inline-level设置的vertical-align始终和父元素对应的子元素的vertical-align去对齐

例如：inine-level设置了vertical-align:top;那结果应该是inline-level的top和父元素的top对齐，经验证也不对。

3、元素的对齐方式始终是基线对齐，inline-level设置的vertical-align行盒相对自己来说行盒的基线就是自己设置的vertical-align的值
例如：inline-level设置了vertical-align:top;行盒的基线就变成了top，然和在将inline-level和行盒的top对齐，毋庸置疑这也是错误的。

我也不知道我在学习vertical-align怎么会有这么多错误的想法，之所以记录下来，是想让自己知道学习知识点不要过多的想当然，要仔细去看看官方到底是怎么定义的。

之所以会有这么多错误的想法，是因为vertical-align的每个值的含义区别很大,真正理解每个值的含义，那就能明白vertical-align的各种现象了。

重点来了

看W3C对vertical-align给出的定义：

官方文档的翻译：vertical-align会影响行内级块元素在一个行盒中垂直方向的位置。

我把那篇文章有两句重点的地方粘过来了

一定要仔细去看vertical-align每个值的含义

baseline
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent’s baseline.
将框的基线与父框的基线对齐。 如果框没有基线，则将底部边距边缘与父级的基线对齐。

middle
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
将框的垂直中点与父框的基线加上父框 x 高度的一半对齐。

sub
Lower the baseline of the box to the proper position for subscripts of the parent’s box. (This value has no effect on the font size of the element’s text.)
将框的基线降低到父框下标的适当位置。 （此值对元素文本的字体大小没有影响。）

看这个例子

.box{
   
        width: 300px;
        height: 200px;
        text-align: center;
        background-color: orange;
    }
    .box img{