关于行框盒子与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移动了。