关于行框盒子与vertical-align（一）

vertical-align属性是css常用属性，在刚刚接触到他时，他是这么跟我介绍自己的

vertical-align: baseline; 元素放置在父元素的基线上

这句话一直误导了我很长时间，我潜意识中以为他所说的父元素就是子元素使用vertical-align属性的元素，在每次vertical-align属性出现bug时我还傻敷敷的在想，这个父元素的基线到底在哪呢？inlin、block、inline-block元素的基线到底是怎么确定的呢？这对齐位置怎么跟我想象中的不一样呢？

唉。。。。一言难尽。。。

直到后来看了张鑫旭等一票大神对于vertical-align深入理解的教程和博客后，发现我大错特错，vertical-align: baseline;真正的作用其实是

vertical-align: baseline; 设置该属性的元素的基线与元素所在的行框盒子(line box)的基线对齐。

我diao~

css真是博大精深

吓得我赶紧把相关知识整理了一下，免得以后犯迷糊

基线中线底线与顶线

行框盒子模型

内容区域content area

底线和顶线包裹的区域，行内元素可以通过设置background-color属性显示出来

可以近似理解为上图中文字选中时底色区域的大小

内容区的大小 只与文字大小和字体有关，在simsun字体下其高度近似于字体大小。

如果你的行高是定值，在字体增大导致content area高度超过行高后，它就会撑大下面要说的内联盒子inline box的高度

内联盒子inline boxes

在没有其他因素影响的时候，inline boxes高度就等于content area高度（line-height要设为零，因为行高默认值normal会设定合适大小的行高），而设定行高则可以增加或者减少inline boxes的高度。

即：将行距的值（行高 - 字体尺寸）除以2，并分别增加到content area的上下两边。我们经常通过设置行高与容器高度一致从而使单行文字垂直居中就是利用了这个原理，其实真正被居中的是content area

那设置行高后，行高===inline boxes高？？？

非也，上面说过如果你的字体够大导致content area突破了行高的限制，或者插入了一张高度大于行高的图片，就会把inline boxes的高度撑开，但并不会影响行高

inline水平的标签元素和直接写在父标签里的文字都会形成inline boxes

line box的高度会影响下面所说的行框盒子line boxes的高度

行框盒子line boxes

行框盒子line boxes就像包裹住一行内容的一个虚拟的矩形框，由一个个inline boxes组成

其高度等于本行内所有inline boxes高度的最大值

一个块级元素的内容高度是由一个一个line boxes堆起来的，对于内容只有一行的，块级元素的内容高度即为line boxes的高度

vertical-align

vertical-align: baseline

默认属性，上面说了该属性的作用是将设置该属性的元素的基线与元素所在的行框盒子(line boxes)的基线对齐。

那么基线位置如何确定呢

对于line boxes里的inline boxes来说

inline-block元素的基线是正常流中最后一个line boxes的基线,除非这个元素里面没有

line boxes或者本身’overflow’属性不是’visible’,这种情况下其基线是margin底边缘

如img图像标签引入的图片的基线就是图片底部， textarea标签也是底部，没有任何元素的inline-block水平元素也是底部

inline水平元素的基线就是它内部文字的基线

那么line boxes的基线位置如何确定呢？

其实只需想象其内部有一个看不见的x在就可以了，其基线就是看不见的字母x的基线，且基线的位置是不会变的

如下我们在div元素中写了一个x，用它模拟上面所提到的看不见的字母x，两者效果是一样的

<div style="">
    x
    <span style="">xspan1</span>
    <input style="">
</div>复制代码

将span的vertical-align设为bottom之后你会发现input输入框的中心线是和div里x的底部对齐的，和span里的x底部就会有偏移。

position: absolute和float会直接使元素脱离文档流，可以当做它没有被包含在line boxes里,vertical-align不起作用，也不能用来判断基线位置

vertical-align: middle

元素中垂线与父元素的基线加上小写x一半的高度值对齐

经常用于inline-block元素的垂直居中对齐

但是由于字体不同，1/2x的位置也是不一样的，宋体有些下沉

并且随着字体尺寸的增大这个bug会变得越来越明显，可以给文字包裹一层标签单独设置字体尺寸然后设父元素字体大小为零，可以解决这个bug

基线的位置不会变，设置vertical-align改变的是元素自身的对齐方式改变的是元素位置

有的时候你会发现在给元素设置了vertical-align值后，他自己不动反而是相邻元素的位置改变了

其实并不是

如下

<div style="line-height: 100px;background: #f1faf1;">
    <div style="display: inline-block;
                height: 40px;
                vertical-align: middle;
                width: 100px;
                background: bisque;">
    </div>
    <span style="vertical-align: middle;">xxxx</span>
</div>复制代码

设置父元素行高100px将line boxes高度撑开后分别设置inline-block级元素div和inline级元素span 的对齐方式为vertical-align: middle;两元素乖乖自己上下移动对齐的

<div style="line-height: 100px;background: #f1faf1;">
    <div style="display: inline-block;
                height: 40px;
                width: 100px;
                background: bisque;">
    </div>
    <span style="vertical-align: middle;line-height: 140px;">xxxx</span>
</div>复制代码

我们将span的行高设为140px,再设置其对齐方式

这时span自己没有动，他旁边的div发生了移动

其实，并不是div发生了移动，移动的还是span，只不过这时line boxes的高度是由span撑开决定的，所以视觉上就像是div移动了。

转载于:https://juejin.im/post/5cc7a2e65188252dd9185248