input高度_揭秘行内元素的高度对齐

几个概念

1. 行内元素

行内元素或者说内联元素，指的是在一行内出现的元素。比如,,等；与行内元素对应的是块状元素，指的是独占一行的元素，比如

,

,等，关于它们细致的特性和定义，请自己百度。我用大白话来解释下。如果说整个页面容器比作一个背篓，那么行内元素就相当于每条光溜溜的鱼，不管大鱼小鱼都往里放，它们之间可以认为没有空隙，每条鱼占的空间由它自己的大小决定；而块状元素就相当于把鱼装在一个包装箱再放进背篓，每条鱼占用多少空间由它的包装箱决定，即使再小的鱼装进一个大箱子，还是占用一个大箱子的空间。这个例子只是体现出它们占用空间的特性；至于块状元素占用一行的特性，你可以想像成装鱼的箱子是长条的，是不能往上累加的；如果非要往上累加的话，那就是行内块状元素，兼有行内元素和块状元素的特性。

2. 文档流

页面排版是有规则的，默认是自上而下，自左而右。凡是在这个规则之下的元素都是在文档流里的。就相当于电影院里座位安排也是按照一定的顺序来的。但是肯定有特殊情况，比如哪个富二代，哪个官二代要个专属的位子，敢不给吗。所以在页面布局里也有脱离文档流的情况，就是接下来说的三个属性。

2.1 positon:absolute

2.2 position:fixed

2.3 float

关于以上属性的详细用法，同样在这里不做赘述，请自行百度。只要设置了这些属性的无素，就可以脱离原有的布局规则，按新的规则来寻找位置。
http://img0.imgtn.bdimg.com/it/u=200851051,3718028993&fm=26&gp=0.jpg

元素位置

通过上面说的几个概念，元素的位置就可以敲定了。在文档流内的就是自上而下，自左而右依序而定。脱离文档流的不在本文讨论范畴。

1. 高度

块状元素，前面说了它的占用大小是根据包装盒的大小决定的，也就是属性设置好的宽和高来的。而行内元素，本身是不具备宽高属性的，它的高度是根据元素本身的大小来定的，比如字体大小，比如内边距。。。

2. 对齐

铺垫了这么长终于要说到重点了。本文要讨论的主要是行内元素的高度对齐。因为块状元素的宽和高都是固定的，没啥争议。而左右对齐也就是靠左或靠右。只有行内元素在垂直对齐跟想像的可能有点出入。

2.1 行内元素是默认对齐顶部吗

可以说是，也可以说不是。因为行内元素简单来说也是按照自上而下自左而右排列的。但是呢，随便找一段文字都看得出来，文字的顶部是留有空隙的，每一行文字之间也是有空隙的。相对父元素，它是顶部对齐；相对内部文字，它是基线对齐。

2.2 文字的位置由什么决定

明确的说，文字的位置由三个元素决定，分别是字号，行高，基线。

2.21 字号

字号越大，文字占的高度越大

2.22 行高

块状元素的行高就是高度，但是文字不一样，文字是不占满整个容器高度的，记得小学时用的作业本吧，四线三格。整个书写行高度用四条线分成三份，行高指的是最顶到最底。

2.23 基线

上面说到的行高分成三份，有些文字只用中间一份，比如x，a,c这些字母，有些占上面两份，比如b,q;有些就占下面两份，比如p,还有三份全占的。文字的占用规则自有其一套体系，咱们可以认为字母x占用空间的底部就是基线。同一行的行内元素默认的垂直对齐方式就是基线对齐。可以这样理解，每行内假想一个字母x,后面出现的行内元素都是默认以自身基线对齐字母x的底部，然后上下延伸，最终行内最顶点到最底点就成为了整行的行高。

3. 实例

a x c b d p f 观察高度 观察高度

3.1 纯文字

注意字母x底部位置

3.2 加入input

字母x与input的中心线是垂直对齐的，与input框内文字底部对齐，说明input的基线是x的底部。

3.2 令第一个input垂直对齐方式为bottom对齐

设置vertical-align: bottom;后，第一个input会寻找行内高度最大值的元素,然后底部与其对齐。

3.3 令第二个input垂直对齐方式为bottom对齐

设置vertical-align: bottom;后，第二个input会寻找行内高度最大值的元素，因为第一个input已经是底部对齐，所以两个input元素都与文字的底部对齐了。
ps: input的默认属性是inline-block,是具有块状元素和行内元素特性的，所以可以与行内元素在同一行，并且可以设置高度。

总结

对齐的原理是弄明白了，但是在开发中并不常用到行内元素的垂直对齐。真要涉及到对齐布局，用flex或者多套用几个div要方便的多。不过，在现有项目上如果对齐出现了问题，可以参考这篇文章，分析问题出在哪里。