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

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

上面的圖片是沒有設置固定行距的時候（未排版時候的），接下來就是設置固定值20磅的時候。

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

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

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

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

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

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

這里就舉一個例子吧，現(xiàn)在很多網(wǎng)站是UGC模式，也就是用戶原創(chuàng)內容，而用戶對內容的排版是不太一樣的習慣，同時他們也不會像我們一樣知道怎么樣排版出非常標準化的版面。有的人喜歡大字體有的人喜歡小的字體，而且一篇文章中也會有大有小?？聪旅娴膶Ρ人坪蹙湍荏w會到了：

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

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

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

我擁有100萬人民幣，我在國企上班，我不貪污，總是這么多。

小明擁有100萬，我所擁有的是他的1.5倍，我的錢根據(jù)小明的來改變。

小明擁有100萬，我所擁有的是他的150%，我的錢根據(jù)小明的來改變。

五年后：

我擁有100萬人民幣，我依然國企上班，我不貪污，還是這么多。

小明擁有200萬，我所擁有的是他的1.5倍，這幾年做生意小明幫我打拼賺錢啦。

小明擁有200萬，我所擁有的是他的150%，這幾年做生意小明幫我打拼賺錢啦。

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

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

<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中的內容
     <p class="p1">
          段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落
     </p>
</div>
<div class="d2">
     div2中的內容
     <p class="p2">
         段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段
     </p>
</div>

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

對于p1來講，他只是繼承了父級div中關于行高描述的1.5，也就是把1.5給繼承下來了，于是p1的行高=1.5*16px=24px

對于p2來講，他則是繼承了父級div中整個關于行高描述的值，即45px，于是p2的行高=d2的行高=45px。

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

.content{line-height:1.5;}

也就是使用1.5，當然你也可以使用如下代碼

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

但是你說是使用*好呢，還是不使用好呢，你說吧!

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