上一節《css知多少（3）——樣式來源與層疊規則》介紹了樣式的五種來源，咱們再通過一張圖回顧一下。

　　

　　對于上面的三層，咱們大概都比較熟悉了。下面的兩層中，用戶自定義樣式一般也就是改一改字號大小和字體樣式，也沒甚好說的。而最有的說的就是瀏覽器的默認樣式。

　　不同瀏覽器的默認樣式多少有些區別，特別是老版本的瀏覽器之間，現在高級瀏覽器越來越向統一的標準靠攏，對前端程序猿來說是一件好事情。雖然有些許差異，但是絕大部分還是相同的，我先把代碼粘貼出來 ，具體的解讀咱們慢慢道來（只說重點，比較容易的或者不常用的就不說了）。

1．理念上的轉變

　　在解讀代碼之前，我先把我看瀏覽器默認樣式最大的體會給大家說一下，這個是非常重要的。就是要先從理念上重新認識html和css。

　　以前我都是認為瀏覽器自身本來就認識各種html標簽，并且會根據規則設置標簽的樣子，例如p是block顯示，ul有margin-left，h1粗體顯示……以前以為這些標簽默認的顯示方式和css無關，是瀏覽器自己干的，css設置網頁樣式是加載之后又渲染的。

　　現在知道這種想法是錯誤的。其實瀏覽器加載了html之后只為一件東西——dom樹，瀏覽器把html變為dom樹結構，就完成了對html的結構化。至于后來對視圖的渲染，p是block、br換行，那是整合了css之后的事情。而瀏覽器整合css又是另一個路線，和解析html是分開的。這里的“css”就包含了瀏覽器默認樣式。

　　可以結合下圖理解（第二節的圖）：

      

　　一句話，瀏覽器將載入的html變為dom樹，但是此時沒有任何顯示樣式。所以顯示的樣式，都是css定義的，瀏覽器只會通過css來渲染視圖樣式。

　　——多好的設計：指責單一，開放封閉！

2．block元素

　　

　　為何默認情況下p、h1、ul、div都是block顯示，就是這里定義的。所以，不要再說div天生就是block——這句話應該換成：瀏覽器默認樣式天生規定了div是block——所以才導致了div是block！是默認樣式規定的，不是瀏覽器的內核規定的。

　　沒有設置block的元素，默認為inline顯示。

3. display: list-item

　　

　　我們在使用display時，常用的值一般是：inline/block/inline-block，用不到list-item。那這里的list-item到底有什么作用？我們不妨親自試一試：

      

　　看到沒有，出現了ul-li中的效果了吧，如果再加一個margin-left是不是就跟ul-li一樣了？

　　所以，ul-li為什么會默認顯示成那種樣子？——list-item才是“罪魁禍首”。

4. diplay:table

　　

       先給出一個快速思考題：<table>和<div>在容器尺寸上最大區別是什么（只是容器尺寸，不考慮內容區別）？請在兩秒鐘內說出答案。

       答案是——div寬度和父容器相同，table寬度根據內容而定——即table具有“包裹性”。

       舉一個例子：

 　　

       上圖中，第一個div默認是block，寬度撐滿整個頁面。第二個div設置了display:table，寬度根據內容而定。這就是“包裹性”。而提到“包裹性”，又不得不讓我想到float和absolute。具體怎樣這里無法細說，后面的文章會詳細講到，有興趣的可以先查著。

       各位思考一下，你們做的項目中，哪些地方想要這種“包裹性”，而不是寫死寬度或者用js計算寬度？如果想不到，我給大家截個圖提醒一下。如下圖：

      

5. display: table-cell

　　

　　上面的截圖中，我們看到了眼花繚亂的好多display，而且都是和table相關的。從字面意思上我們能看出，這是瀏覽器為了渲染一個完整的表格，而需要的許多顯示方式（PS：看似一個簡單的表格，渲染規則就這么多，這就提醒我們思考問題的嚴謹性和邏輯性）。

　　這里的大部分都是我們一直都不會用到的，用不到的了解即可，沒必要深究。但是這個table-cell我們卻能用得到，而且是用它來干一件很重要的事情——多列布局。

　　多列布局在css中有多重要就不用我說了吧，傳統模式下大家都使用float來解決這一問題，但是float寫出來的東西代碼復雜，寬度調整不靈活，瀏覽器兼容性有問題。所以才有了新方案——table-cell，注意，IE6、7不行！

　　簡單舉個例子：

      

　　記得我剛學html時候，不會用div + css做多列布局，我就用table做多列布局。而今，你可以用table-cell，像用table一樣做多列布局，做出來的效果和table做出來的效果是一模一樣的。

6. body樣式

　　

　　在body中，定義了兩個樣式，如上圖。

　　第一，在默認情況下，頁面中的文字不會直接頂到瀏覽器的邊框，這就是因為默認樣式為body設置了margin的緣故。這里需要注意個問題，不同瀏覽器為body設置的margin值可能不一樣，因此大家都知道在css中用 *{margin:0} 來解決這一兼容性問題。

　　之前已經提到過，*選擇器的級別要低于body標簽選擇器，但是*{margin:0}依然有效的原因，就是瀏覽器偷偷的做了優先級的手腳。如果在正常情況下，*選擇器在遇到標簽選擇器時，是不會起作用的，及時它是“后加載”的。例如：

      

　　第二，瀏覽器默認樣式還為body設置了line-height，line-height這個值1.12是對英文比較友好，中文狀態下就顯得有點擁擠。Line-height是具有繼承性的，在body中設置了，body下面所有的文字都會繼承生效。

　　另外注意，這里的line-height: 1.12是一個相對值，即是文字高度的1.12倍?？吹竭@里，我們在寫line-height的時候，也一定要注意使用相對值，不要使用絕對值。如下：

      

　　上圖是編寫line-height的三種形式，大家覺得哪種形式最好？區別是什么？

1. 情況1：永遠按照文字的1.4倍計算，不管文字的高度如何，可適應任何變化；
2. 情況2：永遠按照1.4em計算，隨著em的值改變，不管文字高度如何（此時文字高度可能已經通過絕對的px值該表了大小，而不是隨em改變的）；
3. 情況3：就是25px，絕對的。

　　相信看到這里大家會發現，通過一個line-height我能能窺探到的道道有很多。如果大家看懂了這三種情況，從軟件設計和系統擴展的角度說，當然我們都會選擇第一種。

7. em和px

　　大家在設置文字高度或者與文字有關的距離，如p的margin、line-heigt（上文剛講完，不再贅述），會用em還是用px？——反正我之前不熟悉css時候，都是用px。因為px是固定大小，一目了然?！斎?，它也不利于擴展。

　　因此，我們推薦大家用em。而且瀏覽器的默認樣式也建議我們這樣書寫：

　　

　　如上圖，它設置了h1字體大小2em、縱向margin是0.67em，h2字體大小1.5em、縱向大小0.75em……p的縱向margin是1.12em，字體大小1em（上圖中沒有，但在整個文件中有）

　　em是什么？——em是一個瀏覽器識別的長度單位，但是它不是絕對的、固定的，而是相對的。大家都知道px是一個絕對的長度單位制，它永遠不會改變。瀏覽器默認情況下令1em === 16px。現在你知道為何p默認是16px了吧。而且你還知道了h1是p高度的兩倍，h2是p高度的1.5倍……（你知道的越來越多了。。。）

　　當然，我們可以通過css修改1em的值。

　　

　　由于font-size和margin都是通過em來定義的，當em被修改時，不管字體大小修改，margin值也會跟著修改。這就是em好用之處！

　　從現在開始，與字體大小有關的css，全部都用em！

8. 粗體和斜體

　　

　　上圖中，標注了在整個html中，哪些元素設置了粗體/斜體。重點還是一個思維轉換的問題：h1不是天生的粗體，而是設置了font-weight:bolder的樣式而已……

　　這里需要提一句題外話：<b>和<strong>有啥區別？<i>和<em>有啥區別？——不知道的話自己去查查吧，看到許多面試題考這個。

9. inline-block

　　

　　我相信最初學習使用inline-block的朋友都有一個困惑：inline-block到底是個啥？這時候如果你非常勤奮好學的話，你就去網上查資料，然后做各種實驗?！窨杉?，行為不可取。

　　學習還是有捷徑的?？纯礊g覽器默認樣式告訴你的捷徑：button、input就是inline-block！這樣以點播你就會一下子明白，最起碼能給你一個很好的形象的概念。看看button和input的表現，你就知道inline-block是什么樣子了：

　　能被父容器居中、能設置高度寬度和margin、不會像table或div那樣占一正行……——這就是inline-block——記得這是瀏覽器默認樣式告訴你的。

10. <br>樣式的疑問？？

　　

　　這里我提出自己的一個疑問。如上圖，瀏覽器默認樣式中，對br是這樣設置的。

1. 這里的br:before{content:”A”}，” A”并沒有顯示出來?。?/li>
2. <br>的換行到底是誰導致的，是css還是瀏覽器？

　　希望知道答案的朋友，不吝賜教，給我和大家分享一下，謝謝了。

11. 總結

　　大家看著是不是很過癮？反正我寫著是挺過癮的，雖然打字、寫代碼、畫圖很累，不過很有成就感——再有你們的鼓勵就更好啦！

　　

　　首先，我覺得瀏覽器默認樣式非常重要，所有詳細解讀其中的重點，希望能給大家帶來一些啟發。沒有解讀到的就是一些比較容易理解的，或者不常用的（例如打印的樣式設置），可以直接去看看源碼。

　　其次，這里面也包含了我的一個疑問，很慚愧沒有看明白。即便是一時半會兒解決不了，給別人分享一下，讓你知道了一個疑問，對你來說，應該也是一個收獲。

---------------------------------------------------------------

本系列的目錄頁面：http://www.rzrgm.cn/wangfupeng1988/p/4325007.html

-------------------------------------------------------------------------------------------------------------

學習作者教程：《前端JS高級面試》《前端JS基礎面試題》《React.js模擬大眾點評webapp》《zepto設計與源碼分析》《json2.js源碼解讀》

也歡迎關注我的開源項目——wangEditor，簡潔易用的web富文本編輯器

-------------------------------------------------------------------------------------------------------------