line-height和vertical-align

line-height 在开发时,我们经常用到line-height,如设定height和line-height同样的值实现位置垂直居中;但是line-height有一些很奇特的地方需要我们注意,本文加以总结:
1. line-height的默认值 不同的浏览器不同,但是在chrome和firefox下测到的结果是1.2。
line-height和vertical-align
文章图片
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?【line-height和vertical-align】What does the size of the font translate to exactly? What does the size of the font translate to exactly?

结果:

line-height和vertical-align
文章图片
Paste_Image.png h1比较拥挤,说明其line-height是16*1.2,而不是120%。
2.数值:
如 1.2, 那么子元素继承的1.2。
把上述代码的120%改成1.2, 得到如下图所示:
line-height和vertical-align
文章图片
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中很重要的线条:

line-height和vertical-align
文章图片
base_line
line-height和vertical-align
文章图片
base_line_test
上图中的蓝线就是baseline;黄线是vertical-align为middle是的中间线,其高度为:baseline+1/2(小写x的高度);红线是text-top对应的top line;橙色为text-bottom对应的botton line。 程序为:
vertical align - 锐客网.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; }![](http://upload-images.jianshu.io/upload_images/1975863-895b73c88e218a66.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) hgaXx你好

    推荐阅读