寫(xiě)代碼只是程序猿干的事情，但word這樣日常辦公軟件幾乎沒(méi)一個(gè)坐在辦公室工作的人都會(huì)，只是熟悉的程度不一樣擺了。在長(zhǎng)篇圖文排版中，我們的圖片是不能夠來(lái)浮動(dòng)的，一般的使用嵌入型，原因大家經(jīng)常使用word都應(yīng)該知道，當(dāng)然也許有更加高階的使用方法。

就在這個(gè)地方，我們會(huì)發(fā)現(xiàn)一個(gè)現(xiàn)象，就是當(dāng)我們先把文檔寫(xiě)完再排版（當(dāng)然有的人也習(xí)慣一邊寫(xiě)一邊排版），設(shè)置行距的時(shí)候很多時(shí)候設(shè)置為固定多少磅，比如我記得寫(xiě)本科畢業(yè)論文的時(shí)候我們學(xué)校要求正文是小四字體行距固定值20磅，實(shí)際上這個(gè)約束對(duì)于不懂原理的人是一個(gè)坑，后續(xù)我們會(huì)說(shuō)到這點(diǎn)。當(dāng)我們用格式刷刷完一頁(yè)后，發(fā)現(xiàn)里面的圖片就出問(wèn)題了?？聪旅娴膶?duì)比：

上面的圖片是沒(méi)有設(shè)置固定行距的時(shí)候（未排版時(shí)候的），接下來(lái)就是設(shè)置固定值20磅的時(shí)候。

這里就出現(xiàn)這個(gè)問(wèn)題，當(dāng)然熟悉word的朋友應(yīng)該知道怎么修正這個(gè)問(wèn)題，那就是把圖片的行距設(shè)為相對(duì)的，比如一倍行距或者雙倍行距等等。

——————————-分割線——————————-

那么這里跟CSS有神馬關(guān)系呢？其實(shí)對(duì)于word的排版，我們可以這樣說(shuō)，從理論上講word能排的版式我們用css樣式都能做到，而且會(huì)更加靈活。這里我們就聊聊line-height在設(shè)置行高這個(gè)點(diǎn)，實(shí)際上這個(gè)屬性還有其他的大作用，以后有時(shí)間再討論吧。

毫無(wú)疑問(wèn)，line-height這個(gè)屬性是css中最常用的一個(gè)屬性之一，很多寫(xiě)過(guò)css的朋友都會(huì)心里想，這個(gè)東西太簡(jiǎn)單了，我?guī)缀跆焯煸谟?，這么簡(jiǎn)單的東西沒(méi)必要分析了。如果你也是這樣認(rèn)為，那么很抱歉，那只能說(shuō)明你沒(méi)有真正掌握css，更可怕的是你根本沒(méi)有想過(guò)讓自己更加深入的掌握。實(shí)際上line-height這個(gè)屬性除了我們用于設(shè)置行高外還有其他的用途，這里且不說(shuō)其他的用途，我們就說(shuō)高于設(shè)置行高。

就我所知，line-height可以用5種不同的方式來(lái)表示它的值，分別是normal、數(shù)值、固定值、百分比、繼承，對(duì)于不屑這些基礎(chǔ)原理的你不知道是否理解不同表示方式間的區(qū)別。而對(duì)于很多人而言用得最多的莫過(guò)于固定值了（其實(shí)固定值也有多重表述方式，比如pt、px、em等）。我們聽(tīng)說(shuō)過(guò)一句話，叫做存在即合理，而我覺(jué)得在這里是存在即意義，而且是非常重要的意義、無(wú)可替代的意義。

實(shí)際上，我告訴你，你習(xí)慣性的使用固定值來(lái)表示的方式有點(diǎn)兒極端了，在某些場(chǎng)合下會(huì)出問(wèn)題的。比如說(shuō)你在固定布局的網(wǎng)頁(yè)上面使用固定值來(lái)寫(xiě)一個(gè)固定大小的按鈕我覺(jué)得事沒(méi)有問(wèn)題，但現(xiàn)在隨著其他布局方式的流行，你就不能再停留聽(tīng)到line-height就想到用固定值的時(shí)候了。

這里就舉一個(gè)例子吧，現(xiàn)在很多網(wǎng)站是UGC模式，也就是用戶原創(chuàng)內(nèi)容，而用戶對(duì)內(nèi)容的排版是不太一樣的習(xí)慣，同時(shí)他們也不會(huì)像我們一樣知道怎么樣排版出非常標(biāo)準(zhǔn)化的版面。有的人喜歡大字體有的人喜歡小的字體，而且一篇文章中也會(huì)有大有小?？聪旅娴膶?duì)比似乎就能體會(huì)到了：

對(duì)于第一個(gè)段落而言似乎是剛剛好，而對(duì)于第二個(gè)段落而言似乎就太難看了，看到這里我看你還敢不敢隨便一味的使用固定值來(lái)表示了（當(dāng)然比如字號(hào)啥的固定了使用固定值也沒(méi)太大關(guān)系，比如自己的博客，每篇文章字號(hào)啥的都差不多，我覺(jué)得還是可以用固定值的）。而normal從字面意義上我們就能知道是一個(gè)默認(rèn)或者正常的自動(dòng)的值，一般的為內(nèi)容本身高度是1.1-1.2倍的樣子（比如在Chrome中14px的字體的段落默認(rèn)的行高是16px，30px的字體對(duì)應(yīng)的行高是34px）。對(duì)于繼承，我總結(jié)的基本規(guī)律就是，如果父級(jí)（含祖先）設(shè)定了值就繼承，否則就是默認(rèn)的值，當(dāng)然如果他本身設(shè)定了值那就是根據(jù)它本身的了。

也就是line的優(yōu)先級(jí)是：固定值/百分比/數(shù)值>繼承>normal。

到這里那么就落到了一個(gè)問(wèn)題上，那就是最高優(yōu)先級(jí)的固定值/百分比/數(shù)值他們之間的差別了。首先就是固定值和百分比（數(shù)值）的區(qū)別，這個(gè)很好區(qū)分，固定值就是一個(gè)固定的，而后面兩個(gè)是相對(duì)的。舉例說(shuō)明：

我擁有100萬(wàn)人民幣，我在國(guó)企上班，我不貪污，總是這么多。

小明擁有100萬(wàn)，我所擁有的是他的1.5倍，我的錢(qián)根據(jù)小明的來(lái)改變。

小明擁有100萬(wàn)，我所擁有的是他的150%，我的錢(qián)根據(jù)小明的來(lái)改變。

五年后：

我擁有100萬(wàn)人民幣，我依然國(guó)企上班，我不貪污，還是這么多。

小明擁有200萬(wàn)，我所擁有的是他的1.5倍，這幾年做生意小明幫我打拼賺錢(qián)啦。

小明擁有200萬(wàn)，我所擁有的是他的150%，這幾年做生意小明幫我打拼賺錢(qián)啦。

看上面這個(gè)例子，我們可以很明顯的區(qū)別第一個(gè)和后面兩個(gè)得出的結(jié)論完全不一樣，前者永遠(yuǎn)都是100萬(wàn)，而后兩個(gè)從150萬(wàn)變成了300萬(wàn)，顯然是不一樣的。到這里，有的人肯定會(huì)說(shuō)，我知道了，數(shù)值和百分?jǐn)?shù)表示都一樣的，例子中不是就說(shuō)明了。

但你忘記了一句經(jīng)典的話么？叫做藝術(shù)來(lái)源于生活但高于生活，在這里我覺(jué)得技術(shù)來(lái)源于生活而驅(qū)動(dòng)生活；因此我們的技術(shù)并不完全等同于我們的日常實(shí)例的。那么他們之間到底有什么區(qū)別呢。還是用貼出演示的代碼及對(duì)應(yīng)的效果對(duì)比來(lái)說(shuō)明吧。

<style type="text/css">
.d1{line-height:1.5; font-size:30px;}
.d2{line-height:150%; font-size:30px;}
p{font-size:16px;}
</style>
<div class="d1">
     div1中的內(nèi)容
     <p class="p1">
          段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落
     </p>
</div>
<div class="d2">
     div2中的內(nèi)容
     <p class="p2">
         段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段
     </p>
</div>

上面這個(gè)例子可以說(shuō)明其中有什么不一樣了，d1的行高是30*1.5=45(px)，d2的行高是30*150%=45(px)，而p是繼承div的值，那么兩個(gè)div的行高是相同的，而兩個(gè)div下的子元素p的行高卻為啥相差了這么多呢。實(shí)際上差別就在這里，就是在繼承方式上面的不同。

對(duì)于p1來(lái)講，他只是繼承了父級(jí)div中關(guān)于行高描述的1.5，也就是把1.5給繼承下來(lái)了，于是p1的行高=1.5*16px=24px

對(duì)于p2來(lái)講，他則是繼承了父級(jí)div中整個(gè)關(guān)于行高描述的值，即45px，于是p2的行高=d2的行高=45px。

那么到這里，如果說(shuō)有一個(gè)這樣的需求，一篇文章中，使用.content選擇器來(lái)包含所有的內(nèi)容，我們需要不管是什么內(nèi)容，不管字大字小，統(tǒng)統(tǒng)1.5倍的行高。那么這個(gè)下面可能有div、p、dl、li、ul等等很多各不相同的元素，不同元素瀏覽器給它的css默認(rèn)屬性值也是不同的，那么我們應(yīng)該使用1.5還是150%呢，答案是顯然的。

.content{line-height:1.5;}

也就是使用1.5，當(dāng)然你也可以使用如下代碼

.content *{line-height:150%;}

但是你說(shuō)是使用*好呢，還是不使用好呢，你說(shuō)吧!

好了就到這里吧，有時(shí)間繼續(xù)分享line-height其他用途的分析，當(dāng)然也可以是CSS其他屬性的深入分析，當(dāng)然還可以是php、js等等。對(duì)于這些，很多朋友可能會(huì)說(shuō)，干嘛沒(méi)事做這么分析來(lái)分析去，我只要知道這個(gè)屬性的基本用途就好了，我照樣能寫(xiě)出非常華麗麗的頁(yè)面。對(duì)！你是能！但你想過(guò)沒(méi)有，深入理解后你的效果會(huì)更高！你的頁(yè)面會(huì)更加華麗麗、兼容性更強(qiáng)，當(dāng)然需要你付出更多的學(xué)習(xí)研究成本。