行高，顧名思義是一行文字的高度，而從規範上來說則是兩行文字基線之間的距離。行高是作用在每乙個行框盒子(line-box)上的，而行框盒子則是由內聯盒子組成，因此，行高與內聯元素可以說是非常緊密，行高直接決定了內聯元素的高度（注意：這裡的內聯元素不包括替換元素）；對於塊級元素和替換元素，行高是無法決定最終高度的，只能決定行框盒子的最小高度。
字母x在css裡面扮演著乙個很重要的角色，因為字母x的下邊緣就是基線所在的位置。而x-height指的就是字母x的高度，ex是乙個尺寸單位，其大小是相對字母x的來計算的，即1ex就表示1個字母x的高度。如下圖所示：
我們在平時的開發中很少用到ex，因為ex是個相對單位。對於相對的東西，我們總是感覺很難控制，但這並不表明ex就一點用處都沒有。我們可以利用ex就是乙個x-height的特性來實現圖示與文字的垂直居中，這樣如論字型大小如何變化，都不會影響垂直居中的效果。**如下：
.icon-arrow我是一段文字
normal
normal為line-height的預設值，但並不是乙個固定的值，而是會受font-family的影響，對於「微軟雅黑」，其值為1.32；而對於「宋體」，其值為1.141。由於不同作業系統，不同瀏覽器所使用的字型不一樣，所以最終line-height的具體值會不一樣，因此這個屬性作用不大。
數字我們可以設定line-height: 1.5。其意思是說line-height的最終大小為 1.5* font-size，一般建議使用該值來設定line-height。
長度長度用的最多的就是px與em，em跟數字一樣，都是相對於font-size來計算的。
百分比百分比也是相對於font-size來計算的。
相信細心的小夥伴已經發現了，數字，em以及百分比都是相對於font-size來計算的，既然這樣，為什麼還要多此一舉設定另外兩個屬性呢。原因就在於它們的繼承方式是不一樣的。對於數字，父元素設定了1.5，則子元素也是會繼承1.5。但如果父元素設定的是1.5em，假設父元素font-size是20px，則父元素line-height是30px，同時子元素的line-height也是30px，也就是說子元素繼承的是父元素計算後的line-height值。因此，這也是為什麼上面推薦使用數字而不是em或百分比的原因了。
很多開發人員開還原設計圖的時候，往往沒有考慮到行距的影響，因此開發出來的頁面很多時候都與設計圖不符合，總會差那麼幾個畫素。那麼什麼是行距呢，我們可以想象一下在文字排版的時候，如果行與行之間的間距為0，則文字是會緊緊貼在一起的，因此，行距就是用來協助排版的。行距的計算為：line-height - em-box，em-box指的是1em的大小，因此行距可以表示為：line-height - font-size，假設line-height為1.5，font-size為20，則行距為：
1.5*20 - 20 = 10，則最終行距為10，而這個行距會平均作用於文字的上邊和下邊。但em-box我們是無法感知這個盒子在哪的，而內容區域我們則可以理解為我們選中文字後的背景色所在區域，而當字型是宋體的時候，內容區域和em-box是等高的，因此我們可以利用此揪出ex-box的藏身之處。如下圖所示：
正是因為行距的存在，我們給元素設定margin值時，要減去相應的半行距值，這樣才能比較精確地還原設計圖。
大部分時候，我們設定line-height，都是為了垂直居中對齊。但這裡的居中，只能說是近似居中，從上面的圖可以看出：行距是上下均分的，但是內容區域不是，一般來說，文字都是偏下的。我們平時設定字型一般都是12-20畫素，這麼小的畫素值，給出line-height值後，由於上下相差不大，因此感覺上是垂直居中的。line-height除了可以作為單行文字的居中對齊外，多行文字也是可以的，**如下：
.box
.text
這是一段很長很長的文字，這是一段很長很長的文字，這是一段很長很長的文字，這是一段很長很長的文字，這是一段很長很長的文字
前面的文章有說過，每乙個行框盒子前面都有乙個看不見的，規範稱之為「strut」的東西。我們給.box設定了line-height為400px，則這個「strut」的line-height也會繼承為400px。然後我們給.text設定inline-block，這樣我們就可以重置.box設定的line-height，又因為ineline-block保持了內聯特性，因此我們可以設定vertical-align以及產生「strut」，從而實現近似垂直居中對齊。
參考：《css世界》
CSS深入理解之relative
總結 1 position absolute 他的意思是絕對定位，預設上溯父級元素，找第乙個不是 static 的元素，以其為 absolute 的基準。如果設定trbl並且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由trbl決定。2 pos...
CSS深入理解之border
總結自慕課網 個人理解 width屬性具有繼承性，假設父元素100px 子元素設定50 則為50px 而border width不具有繼承性，如果使用百分比，瀏覽器解析時應該向誰作為參考物件呢，所以只能用指定大小來確定。類似不支援百分比的有 outline,border shadow,text sh...
CSS深入理解之float
float 屬性定義元素在哪個方向浮動。產生之初這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定乙個明確的寬度 否則，它們會盡可能地窄。讓設定的標籤產生浮動效果，就是脫離原來頁面的標準輸...