資訊專欄INFORMATION COLUMN
摘要：而依然有效的原因是瀏覽器默認樣式的優(yōu)先級低于外聯(lián)內(nèi)部樣式。例如第二，瀏覽器默認樣式還為設置了，這個值是對英文比較友好，中文狀態(tài)下就顯得有點擁擠。
上一節(jié)介紹了樣式的五種來源，咱們再通過一張圖回顧一下。
對于上面的三層，咱們大概都比較熟悉了。下面的兩層中，用戶自定義樣式一般也就是改一改字號大小和字體樣式，也沒甚好說的。而最有的說的就是瀏覽器的默認樣式。
不同瀏覽器的默認樣式多少有些區(qū)別，特別是老版本的瀏覽器之間，現(xiàn)在高級瀏覽器越來越向統(tǒng)一的標準靠攏，對前端程序猿來說是一件好事情。雖然有些許差異，但是絕大部分還是相同的，我先把代碼粘貼出來 ，具體的解讀咱們慢慢道來（只說重點，比較容易的或者不常用的就不說了）。
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul,center,
dir, hr, menu, pre{ display: block}
/* 以上按照block顯示，沒有規(guī)定的則按照默認的inline顯示 */
li { display: list-item}
/* 程序猿常用的display值是：inline/block/inline-block，很少用到 list-item
list-item到底是什么樣的顯示效果，可以通過例子驗證。。。。
第一，你可以不用ul-li，而用其他標簽實現(xiàn)list-item的效果
第二，要意識到，瀏覽器對待html只是把它當作一個dom樹，至于顯示成什么效果，是通過瀏覽器默認的css實現(xiàn)的，即樣式全部通過css設計，和html無關(guān) */
head { display: none}
table { display: table }
/* display:table 和 block 最大的區(qū)別在于：包裹性。 提到包裹性，就不得不提一下float和absolute*/
tr { display: table-row}
thead { display: table-header-group}
tbody { display: table-row-group}
tfoot { display: table-footer-group}
col { display: table-column}
colgroup { display: table-column-group}
td, th { display: table-cell; }
/* 與table相關(guān)的其他display值，研究的意義不大，但是table-cell值得一說。
table-cell是多列布局的最新解決方案，比使用float更加有效（不兼容IE6、7）
實際上table-cell是要依賴其他table相關(guān)的display，但是瀏覽器會為我們做這些工作，不必手動填寫 */
caption{ display: table-caption}
th { font-weight: bolder; text-align: center}
/* 標題默認設置了粗體和文字居中 */
caption{ text-align: center}
body { margin: 8px; line-height: 1.12}
/* 不同瀏覽器的margin不一樣，所以要設置【 *{margin:0} 】
line-height:1.12 針對英文沒問題，但是中文看起來很別扭
另外，1.12是一個相對值（即1.12em），與文字有關(guān)的距離設置最好用相對值*/
h1{ font-size: 2em; margin: .67em 0}
h2{ font-size:1.5em; margin: .75em 0}
h3{ font-size: 1.17em; margin: .83em 0}
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin:1.12em 0}
/* em是相對單位，1em就是一單位，瀏覽器默認的一單位是16px，
可以通過 body{font-size:20px} 來修改一單位的值
p的字體大小是1em，h1是2em，h2是1.5em，等等
另外，與文字相關(guān)的距離值，最好用相對單位，例如 line-height:1.4; margin:.5em等等，這樣做的好處就是當自定義了1em的絕對px時，line-height也會跟著變 */
/* 注意，如果我們自己寫css【 * {margin:0} 】，可以把p、h1、h2等標簽的margin覆蓋掉
我們都知道，*選擇器的權(quán)重是最低的，但是它卻能覆蓋掉標簽選擇器，說明瀏覽器已經(jīng)在這里面做了手腳
瀏覽器沒有讓默認樣式和用戶自定義樣式“公平競爭”，而是優(yōu)先用戶自定義樣式 */
h5{ font-size: .83em; margin: 1.5em 0}
h6{ font-size: .75em; margin: 1.67em 0}
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder}
/* 這里可以看到哪些標簽文字是加粗的 */
blockquote { margin-left: 40px; margin-right: 40px}
i, cite, em,
var, address { font-style: italic}
/* 這里可以看到哪些標簽是斜體 */
pre, tt, code,
kbd, samp { font-family: monospace}
pre{ white-space: pre}
button, textarea,
input, object,
select { display:inline-block; }
/* 不知道inline-block是什么樣子的？或者不知道inline-block有什么特性？
在這里看看哪些標簽是inline-block，就知道inline-block的用處了
具體inline-block的用途，我們會在后面詳細介紹，此處只是點出來 */
big { font-size: 1.17em}
small, sub, sup { font-size: .83em}
sub{ vertical-align:sub}
sup { vertical-align: super}
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle}
td, th { vertical-align: inherit }
s, strike, del { text-decoration: line-through}
hr {border: 1px inset}
/* 為什么
默認是那么個難看的樣子，特別是IE下，這就是罪魁禍首 */
ol, ul, dir,
menu, dd { margin-left: 40px}
ol {list-style-type: decimal}
/* ul 和 ol 在默認情況下都會有一篇左邊的間距，在這里可以看到為何會有間距，以及間距的具體大小是多少。
*/
ol ul, ul ol,
ul ul, ol ol { margin-top: 0;margin-bottom: 0}
u, ins { text-decoration: underline}
br:before {content: "A"}
/* ？？？？？？？？？？？？？ */
:before, :after { white-space: pre-line }
/*
為何能實現(xiàn)換行？瀏覽器得到html的br標簽，只會解析成一個dom節(jié)點而已，
而“換行”這一功能是通過這里實現(xiàn)的？？？？？ */
center{text-align: center}
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em}
:link, :visited { text-decoration: underline}
:focus {outline: thindottedinvert}
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override}
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override}
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed}
*[DIR="rtl"] { direction:rtl; unicode-bidi: embed}
/* 這些標簽或?qū)傩远疾怀Ｓ?*/
@media print{
h1{ page-break-before:always}
h1, h2, h3,
h4, h5, h6{ page-break-after: avoid}
ul, ol, dl { page-break-before: avoid}
/* 對于打印頁面時的設置，不常用 */
/* 以下都是按照標簽選擇器來的，標簽選擇器比類、id選擇器的權(quán)重都低。
所以，用戶自定義的樣式，無論是用標簽、類還是id，都能覆蓋默認的標簽選擇器 */
瀏覽器默認樣式
1.理念上的轉(zhuǎn)變
在解讀代碼之前，我先把我看瀏覽器默認樣式最大的體會給大家說一下，這個是非常重要的。就是要先從理念上重新認識html和css。
以前我都是認為瀏覽器自身本來就認識各種html標簽，并且會根據(jù)規(guī)則設置標簽的樣子，例如p是block顯示，ul有margin-left，h1粗體顯示……以前以為這些標簽默認的顯示方式和css無關(guān)，是瀏覽器自己干的，css設置網(wǎng)頁樣式是加載之后又渲染的。
現(xiàn)在知道這種想法是錯誤的。其實瀏覽器加載了html之后只為一件東西——生成dom樹，瀏覽器把html變?yōu)閐om樹結(jié)構(gòu)，就完成了對html的結(jié)構(gòu)化。至于后來對視圖的渲染，p是block、br換行，那是整合了css之后的事情。而瀏覽器整合css又是另一個路線，和解析html是分開的。這里的“css”就包含了瀏覽器默認樣式。
可以結(jié)合下圖理解：
一句話，瀏覽器將載入的html變?yōu)閐om樹，但是此時沒有任何顯示樣式。所以顯示的樣式，都是css定義的，瀏覽器只會通過css來渲染視圖樣式。
2.block元素為何默認情況下p、h1、ul、div都是block顯示，就是這里定義的。所以，不要再說div天生就是block——這句話應該換成：瀏覽器默認樣式天生規(guī)定了div是block——所以才導致了div是block！是默認樣式規(guī)定的，不是瀏覽器的內(nèi)核規(guī)定的。
沒有設置block的元素，默認為inline顯示。
3.display:list-item我們在使用display時，常用的值一般是：inline/block/inline-block，用不到list-item。那這里的list-item到底有什么作用？我們不妨親自試一試：
看到?jīng)]有，出現(xiàn)了ul-li中的效果了吧，如果再加一個margin-left是不是就跟ul-li一樣了？
所以，ul-li為什么會默認顯示成那種樣子？——list-item才是“罪魁禍首”。
4.display:table先給出一個快速思考題：
