對于上面的三層，咱們大概都比較熟悉了。下面的兩層中，使用者自定義樣式一般也就是改一改字号大小和字型樣式，也沒甚好說的。而最有的說的就是浏覽器的預設樣式。
不同浏覽器的預設樣式多少有些差別，特别是老版本的浏覽器之間，現在進階浏覽器越來越向統一的标準靠攏，對前端程式猿來說是一件好事情。雖然有些許差異，但是絕大部分還是相同的，我先把代碼粘貼出來 ，具體的解讀咱們慢慢道來（隻說重點，比較容易的或者不常用的就不說了）。
浏覽器預設樣式
在解讀代碼之前，我先把我看浏覽器預設樣式最大的體會給大家說一下，這個是非常重要的。就是要先從理念上重新認識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來渲染視圖樣式。
——多好的設計：指責單一，開放封閉！
為何預設情況下p、h1、ul、div都是block顯示，就是這裡定義的。是以，不要再說div天生就是block——這句話應該換成：浏覽器預設樣式天生規定了div是block——是以才導緻了div是block！是預設樣式規定的，不是浏覽器的核心規定的。
沒有設定block的元素，預設為inline顯示。
我們在使用display時，常用的值一般是：inline/block/inline-block，用不到list-item。那這裡的list-item到底有什麼作用？我們不妨親自試一試：
看到沒有，出現了ul-li中的效果了吧，如果再加一個margin-left是不是就跟ul-li一樣了？
是以，ul-li為什麼會預設顯示成那種樣子？——list-item才是“罪魁禍首”。
先給出一個快速思考題：<table>和<div>在容器尺寸上最大差別是什麼（隻是容器尺寸，不考慮内容差別）？請在兩秒鐘内說出答案。
答案是——div寬度和父容器相同，table寬度根據内容而定——即table具有“包裹性”。
舉一個例子：
上圖中，第一個div預設是block，寬度撐滿整個頁面。第二個div設定了display:table，寬度根據内容而定。這就是“包裹性”。而提到“包裹性”，又不得不讓我想到float和absolute。具體怎樣這裡無法細說，後面的文章會詳細講到，有興趣的可以先查着。
各位思考一下，你們做的項目中，哪些地方想要這種“包裹性”，而不是寫死寬度或者用js計算寬度？如果想不到，我給大家截個圖提醒一下。如下圖：
上面的截圖中，我們看到了眼花缭亂的好多display，而且都是和table相關的。從字面意思上我們能看出，這是浏覽器為了渲染一個完整的表格，而需要的許多顯示方式（PS：看似一個簡單的表格，渲染規則就這麼多，這就提醒我們思考問題的嚴謹性和邏輯性）。
這裡的大部分都是我們一直都不會用到的，用不到的了解即可，沒必要深究。但是這個table-cell我們卻能用得到，而且是用它來幹一件很重要的事情——多列布局。
多列布局在css中有多重要就不用我說了吧，傳統模式下大家都使用float來解決這一問題，但是float寫出來的東西代碼複雜，寬度調整不靈活，浏覽器相容性有問題。是以才有了新方案——table-cell，注意，IE6、7不行！
簡單舉個例子：
記得我剛學html時候，不會用div + css做多列布局，我就用table做多列布局。而今，你可以用table-cell，像用table一樣做多列布局，做出來的效果和table做出來的效果是一模一樣的。
在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.4倍計算，不管文字的高度如何，可适應任何變化；
情況2：永遠按照1.4em計算，随着em的值改變，不管文字高度如何（此時文字高度可能已經通過絕對的px值該表了大小，而不是随em改變的）；
情況3：就是25px，絕對的。
相信看到這裡大家會發現，通過一個line-height我能能窺探到的道道有很多。如果大家看懂了這三種情況，從軟體設計和系統擴充的角度說，當然我們都會選擇第一種。
大家在設定文字高度或者與文字有關的距離，如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！
上圖中，标注了在整個html中，哪些元素設定了粗體/斜體。重點還是一個思維轉換的問題：h1不是天生的粗體，而是設定了font-weight:bolder的樣式而已……
這裡需要提一句題外話：<b>和<strong>有啥差別？<i>和<em>有啥差別？——不知道的話自己去查查吧，看到許多面試題考這個。
我相信最初學習使用inline-block的朋友都有一個困惑：inline-block到底是個啥？這時候如果你非常勤奮好學的話，你就去網上查資料，然後做各種實驗。——精神可嘉，行為不可取。
學習還是有捷徑的。看看浏覽器預設樣式告訴你的捷徑：button、input就是inline-block！這樣以點播你就會一下子明白，最起碼能給你一個很好的形象的概念。看看button和input的表現，你就知道inline-block是什麼樣子了：
能被父容器居中、能設定高度寬度和margin、不會像table或div那樣占一正行……——這就是inline-block——記得這是浏覽器預設樣式告訴你的。
這裡我提出自己的一個疑問。如上圖，浏覽器預設樣式中，對br是這樣設定的。
這裡的br:before{content:”A”}，” A”并沒有顯示出來啊？
<br>的換行到底是誰導緻的，是css還是浏覽器？
希望知道答案的朋友，不吝賜教，給我和大家分享一下，謝謝了。
大家看着是不是很過瘾？反正我寫着是挺過瘾的，雖然打字、寫代碼、畫圖很累，不過很有成就感——再有你們的鼓勵就更好啦！
首先，我覺得浏覽器預設樣式非常重要，所有詳細解讀其中的重點，希望能給大家帶來一些啟發。沒有解讀到的就是一些比較容易了解的，或者不常用的（例如列印的樣式設定），可以直接去看看源碼。
其次，這裡面也包含了我的一個疑問，很慚愧沒有看明白。即便是一時半會兒解決不了，給别人分享一下，讓你知道了一個疑問，對你來說，應該也是一個收獲。
-------------------------------------------------------------------------------------------------------------