line-height
在開發(fā)時(shí)吩案，我們經(jīng)常用到line-height棚赔，如設(shè)定height和line-height同樣的值實(shí)現(xiàn)位置垂直居中；但是line-height有一些很奇特的地方需要我們注意徘郭，本文加以總結(jié)：
1. line-height的默認(rèn)值
不同的瀏覽器不同靠益，但是在chrome和firefox下測(cè)到的結(jié)果是1.2。
2. line-height的繼承特性：
line-height可以有6種值：120%崎岂、1.2捆毫、20px、inherit冲甘、normal、initial途样。
line-height可以在font進(jìn)行同font-size一同設(shè)置： font： 120px/1.2江醇。
line-height的繼承特性比較坑，首先要指出的其具有繼承特性何暇，和font-size類似陶夜；但是它的繼承計(jì)算方法因其值的設(shè)定不同而大不同。
- 百分比:
如： 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>
結(jié)果：
h1比較擁擠宏胯，說明其line-height是16*1.2羽嫡，而不是120%。
2.數(shù)值：
如 1.2肩袍， 那么子元素繼承的1.2杭棵。
把上述代碼的120%改成1.2， 得到如下圖所示：
h1顯示正常氛赐，說明h1的line-height為1.2.
3.像素值
如： 20px; 這種情況下和1相同魂爪，就不多說了。
vertical-align
對(duì)vertical-align一直不是很明白艰管，在使用的時(shí)候心里沒底滓侍，經(jīng)常出錯(cuò)。今天抽空看了幾篇講解的文章牲芋，自己做了個(gè)demo撩笆，算是初步了解尔破。后續(xù)有更加深刻的了解，再補(bǔ)充上浇衬。
什么條件下vertical-align生效
- 原生就具有inline或者inline-block屬性的元素（table-cell也算）懒构，如：圖片、按鈕耘擂、單復(fù)按鈕胆剧、單行/多行文本框等。
- 手動(dòng)設(shè)置為inline-block屬性醉冤。
- 父元素的行高足夠（如果不夠秩霍，沒法正確顯示）
vertical-align的基本參數(shù)
| 值 | 描述 |
|---|---|
| 長度 | 通過距離升高（正值）或降低（負(fù)值）元素。'0cm'等同于'baseline' |
| 百分值 – % | 通過距離（相對(duì)于line-height值的百分大幸涎簟）升高（正值）或降低（負(fù)值）元素铃绒。'0%'等同于'baseline' |
| baseline | 默認(rèn)。元素的基線與父元素的基線對(duì)齊螺捐。 |
| sub | 降低元素的基線到父元素合適的下標(biāo)位置颠悬。 |
| super | 升高元素的基線到父元素合適的上標(biāo)位置。 |
| top | 把對(duì)齊的子元素的頂端與line box頂端對(duì)齊定血。 |
| text-top | 把元素的頂端與父元素內(nèi)容區(qū)域的頂端對(duì)齊赔癌。 |
| middle | 元素的中垂點(diǎn)與 父元素的基線加1/2父元素中字母x的高度對(duì)齊。 |
| bottom | 把對(duì)齊的子元素的底端與line box底端對(duì)齊 |
| text-bottom | 把元素的底端與父元素內(nèi)容區(qū)域的底端對(duì)齊澜沟。 |
| inherit | 采用父元素相關(guān)屬性的相同的指定值灾票。 |
這里特別要強(qiáng)調(diào)的是百分值是基于line-height的。另外這里所說的baseline和我們初學(xué)英語字母是所用的四線格相似茫虽，如下面的兩個(gè)圖刊苍，我們可以對(duì)比展示四條在css中很重要的線條:
上圖中的藍(lán)線就是baseline；黃線是vertical-align為middle是的中間線濒析，其高度為：baseline+1/2(小寫x的高度)正什；紅線是text-top對(duì)應(yīng)的top line；橙色為text-bottom對(duì)應(yīng)的botton line悼枢。 程序?yàn)椋?/p>
<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;">
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>
