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类似；但是它的继承计算方法因其值的设定不同而大不同。

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

body{font-size: 16px; line-height: 120%;}
h1{width: 400px; font-size: 32px;}
p{width: 400px; font-size: 16px;}
<body>
    <h1>What does the size of the font translate to exactly?</h1>
    <p>What does the size of the font translate to exactly? What does the size of the font translate to exactly?</p>
</body>

结果：

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生效

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

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。程序为：

<html>
<head>
    <meta charset="utf-8" />
    <title>vertical align</title>
    <style>
        .line{
            position: absolute;
            height: 0;
            width: 100%;
            left: 27px;
            border: none;
            line-height: 0;
            margin: 0;
            padding: 0;
        }
        .line.top{border: 1px solid red; top: 20px;}
        .line.middle{border: 1px solid yellow; top: 42px;}
        .line.base{border: 1px solid blue; top: 54px;}
        .line.bottom{border: 1px solid orange;top: 60px;}
    </style>
</head>
<body>
    <div class="my" id="my" style="position:relative;">
        ![](http://upload-images.jianshu.io/upload_images/1975863-895b73c88e218a66.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        hgaXx你好
        <!--span class="dot"></span -->
        <p class="line top"></p>
        <p class="line middle"></p>
        <p class="line base"></p>
        <p class="line bottom"></p>
    </div>
    <span>x</span>
    <p style="line-height:0; border: 1px solid #ccc;">ga</p>

    <script>
        var _ele = document.getElementById("testImage");
        var _myEle = document.getElementById("my");
        console.log(_ele.offsetTop);
        console.log(_myEle.offsetTop);
    </script>
</body>
</html>