line-height和vertical-align

line-height

在开发时，我们经常用到line-height，如设定height和line-height同样的值实现位置垂直居中；但是line-height有一些很奇特的地方需要我们注意，本文加以总结：

1. line-height的默认值

不同的浏览器不同，但是在chrome和firefox下测到的结果是1.2。

Paste_Image.png

2. line-height的继承特性：

line-height可以有6种值：120%、1.2、20px、inherit、normal、initial。
line-height可以在font进行同font-size一同设置： font： 120px/1.2。
line-height的继承特性比较坑，首先要指出的其具有继承特性，和font-size类似；但是它的继承计算方法因其值的设定不同而大不同。

1. 百分比:
   如： 120%。 子元素继承的是父元素的fontSize*line-height，而不是120%。

body{font-size: 16px; line-height: 120%;}
h1{width: 400px; font-size: 32px;}
p{width: 400px; font-size: 16px;}

    
What does the size of the font translate to exactly?
    
What does the size of the font translate to exactly? What does the size of the font translate to exactly?

结果：

Paste_Image.png

h1比较拥挤，说明其line-height是16*1.2，而不是120%。

2.数值：
如 1.2， 那么子元素继承的1.2。
把上述代码的120%改成1.2， 得到如下图所示：

Paste_Image.png

h1显示正常，说明h1的line-height为1.2.

3.像素值
如： 20px; 这种情况下和1相同，就不多说了。

vertical-align

对vertical-align一直不是很明白，在使用的时候心里没底，经常出错。今天抽空看了几篇讲解的文章，自己做了个demo，算是初步了解。后续有更加深刻的了解，再补充上。

什么条件下vertical-align生效

1. 原生就具有inline或者inline-block属性的元素（table-cell也算），如：图片、按钮、单复按钮、单行/多行文本框等。
2. 手动设置为inline-block属性。
3. 父元素的行高足够（如果不够，没法正确显示）

vertical-align的基本参数

值	描述
长度	通过距离升高（正值）或降低（负值）元素。'0cm'等同于'baseline'
百分值 – %	通过距离（相对于line-height值的百分大小）升高（正值）或降低（负值）元素。'0%'等同于'baseline'
baseline	默认。元素的基线与父元素的基线对齐。
sub	降低元素的基线到父元素合适的下标位置。
super	升高元素的基线到父元素合适的上标位置。
top	把对齐的子元素的顶端与line box顶端对齐。
text-top	把元素的顶端与父元素内容区域的顶端对齐。
middle	元素的中垂点与 父元素的基线加1/2父元素中字母x的高度对齐。
bottom	把对齐的子元素的底端与line box底端对齐
text-bottom	把元素的底端与父元素内容区域的底端对齐。
inherit	采用父元素相关属性的相同的指定值。

这里特别要强调的是百分值是基于line-height的。另外这里所说的baseline和我们初学英语字母是所用的四线格相似，如下面的两个图，我们可以对比展示四条在css中很重要的线条:

base_line

base_line_test

上图中的蓝线就是baseline；黄线是vertical-align为middle是的中间线，其高度为：baseline+1/2(小写x的高度)；红线是text-top对应的top line；橙色为text-bottom对应的botton line。 程序为：

    
    
    


    

        ![](http://upload-images.jianshu.io/upload_images/1975863-895b73c88e218a66.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        hgaXx你好
        
        

        

        

        

    
    x
    
ga