揭秘行内元素的高度对齐

　　几个概念
　　1。行内元素
　　行内元素或者说内联元素，指的是在一行内出现的元素。比如，，等；与行内元素对应的是块状元素，指的是独占一行的元素，比如
　　，，等，关于它们细致的特性和定义，请自己百度。我用大白话来解释下。如果说整个页面容器比作一个背篓，那么行内元素就相当于每条光溜溜的鱼，不管大鱼小鱼都往里放，它们之间可以认为没有空隙，每条鱼占的空间由它自己的大小决定；而块状元素就相当于把鱼装在一个包装箱再放进背篓，每条鱼占用多少空间由它的包装箱决定，即使再小的鱼装进一个大箱子，还是占用一个大箱子的空间。这个例子只是体现出它们占用空间的特性；至于块状元素占用一行的特性，你可以想像成装鱼的箱子是长条的，是不能往上累加的；如果非要往上累加的话，那就是行内块状元素，兼有行内元素和块状元素的特性。
　　2。文档流
　　页面排版是有规则的，默认是自上而下，自左而右。凡是在这个规则之下的元素都是在文档流里的。就相当于电影院里座位安排也是按照一定的顺序来的。但是肯定有特殊情况，比如哪个富二代，哪个官二代要个专属的位子，敢不给吗。所以在页面布局里也有脱离文档流的情况，就是接下来说的三个属性。
　　2。1positon：absolute
　　2。2position：fixed
　　2。3float
　　关于以上属性的详细用法，同样在这里不做赘述，请自行百度。只要设置了这些属性的无素，就可以脱离原有的布局规则，按新的规则来寻找位置。
　　http：img0。imgtn。bdimg。comitu200851051，3718028993fm26gp0。jpg
　　元素位置
　　通过上面说的几个概念，元素的位置就可以敲定了。在文档流内的就是自上而下，自左而右依序而定。脱离文档流的不在本文讨论范畴。
　　1。高度
　　块状元素，前面说了它的占用大小是根据包装盒的大小决定的，也就是属性设置好的宽和高来的。而行内元素，本身是不具备宽高属性的，它的高度是根据元素本身的大小来定的，比如字体大小，比如内边距
　　2。对齐
　　铺垫了这么长终于要说到重点了。本文要讨论的主要是行内元素的高度对齐。因为块状元素的宽和高都是固定的，没啥争议。而左右对齐也就是靠左或靠右。只有行内元素在垂直对齐跟想像的可能有点出入。
　　2。1行内元素是默认对齐顶部吗
　　可以说是，也可以说不是。因为行内元素简单来说也是按照自上而下自左而右排列的。但是呢，随便找一段文字都看得出来，文字的顶部是留有空隙的，每一行文字之间也是有空隙的。相对父元素，它是顶部对齐；相对内部文字，它是基线对齐。
　　2。2文字的位置由什么决定
　　明确的说，文字的位置由三个元素决定，分别是字号，行高，基线。
　　2。21字号
　　字号越大，文字占的高度越大
　　2。22行高
　　块状元素的行高就是高度，但是文字不一样，文字是不占满整个容器高度的，记得小学时用的作业本吧，四线三格。整个书写行高度用四条线分成三份，行高指的是最顶到最底。
　　2。23基线
　　上面说到的行高分成三份，有些文字只用中间一份，比如x，a，c这些字母，有些占上面两份，比如b，q；有些就占下面两份，比如p，还有三份全占的。文字的占用规则自有其一套体系，咱们可以认为字母x占用空间的底部就是基线。同一行的行内元素默认的垂直对齐方式就是基线对齐。可以这样理解，每行内假想一个字母x，后面出现的行内元素都是默认以自身基线对齐字母x的底部，然后上下延伸，最终行内最顶点到最底点就成为了整行的行高。
　　3。实例axcbdpf观察高度观察高度
　　3。1纯文字
　　注意字母x底部位置
　　3。2加入input
　　字母x与input的中心线是垂直对齐的，与input框内文字底部对齐，说明input的基线是x的底部。
　　3。2令第一个input垂直对齐方式为bottom对齐
　　设置verticalalign：bottom；后，第一个input会寻找行内高度最大值的元素，然后底部与其对齐。
　　3。3令第二个input垂直对齐方式为bottom对齐
　　设置verticalalign：bottom；后，第二个input会寻找行内高度最大值的元素，因为第一个input已经是底部对齐，所以两个input元素都与文字的底部对齐了。
　　ps：input的默认属性是inlineblock，是具有块状元素和行内元素特性的，所以可以与行内元素在同一行，并且可以设置高度。总结
　　对齐的原理是弄明白了，但是在开发中并不常用到行内元素的垂直对齐。真要涉及到对齐布局，用flex或者多套用几个p要方便的多。不过，在现有项目上如果对齐出现了问题，可以参考这篇文章，分析问题出在哪里。