資訊專(zhuān)欄INFORMATION COLUMN
摘要：而依然有效的原因是瀏覽器默認(rèn)樣式的優(yōu)先級(jí)低于外聯(lián)內(nèi)部樣式。例如第二，瀏覽器默認(rèn)樣式還為設(shè)置了，這個(gè)值是對(duì)英文比較友好，中文狀態(tài)下就顯得有點(diǎn)擁擠。
上一節(jié)介紹了樣式的五種來(lái)源，咱們?cè)偻ㄟ^(guò)一張圖回顧一下。
對(duì)于上面的三層，咱們大概都比較熟悉了。下面的兩層中，用戶(hù)自定義樣式一般也就是改一改字號(hào)大小和字體樣式，也沒(méi)甚好說(shuō)的。而最有的說(shuō)的就是瀏覽器的默認(rèn)樣式。
不同瀏覽器的默認(rèn)樣式多少有些區(qū)別，特別是老版本的瀏覽器之間，現(xiàn)在高級(jí)瀏覽器越來(lái)越向統(tǒng)一的標(biāo)準(zhǔn)靠攏，對(duì)前端程序猿來(lái)說(shuō)是一件好事情。雖然有些許差異，但是絕大部分還是相同的，我先把代碼粘貼出來(lái) ，具體的解讀咱們慢慢道來(lái)（只說(shuō)重點(diǎn)，比較容易的或者不常用的就不說(shuō)了）。
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顯示，沒(méi)有規(guī)定的則按照默認(rèn)的inline顯示 */
li { display: list-item}
/* 程序猿常用的display值是：inline/block/inline-block，很少用到 list-item
list-item到底是什么樣的顯示效果，可以通過(guò)例子驗(yàn)證。。。。
第一，你可以不用ul-li，而用其他標(biāo)簽實(shí)現(xiàn)list-item的效果
第二，要意識(shí)到，瀏覽器對(duì)待html只是把它當(dāng)作一個(gè)dom樹(shù)，至于顯示成什么效果，是通過(guò)瀏覽器默認(rèn)的css實(shí)現(xiàn)的，即樣式全部通過(guò)css設(shè)計(jì)，和html無(wú)關(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值得一說(shuō)。
table-cell是多列布局的最新解決方案，比使用float更加有效（不兼容IE6、7）
實(shí)際上table-cell是要依賴(lài)其他table相關(guān)的display，但是瀏覽器會(huì)為我們做這些工作，不必手動(dòng)填寫(xiě) */
caption{ display: table-caption}
th { font-weight: bolder; text-align: center}
/* 標(biāo)題默認(rèn)設(shè)置了粗體和文字居中 */
caption{ text-align: center}
body { margin: 8px; line-height: 1.12}
/* 不同瀏覽器的margin不一樣，所以要設(shè)置【 *{margin:0} 】
line-height:1.12 針對(duì)英文沒(méi)問(wèn)題，但是中文看起來(lái)很別扭
另外，1.12是一個(gè)相對(duì)值（即1.12em），與文字有關(guān)的距離設(shè)置最好用相對(duì)值*/
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是相對(duì)單位，1em就是一單位，瀏覽器默認(rèn)的一單位是16px，
可以通過(guò) body{font-size:20px} 來(lái)修改一單位的值
p的字體大小是1em，h1是2em，h2是1.5em，等等
另外，與文字相關(guān)的距離值，最好用相對(duì)單位，例如 line-height:1.4; margin:.5em等等，這樣做的好處就是當(dāng)自定義了1em的絕對(duì)px時(shí)，line-height也會(huì)跟著變 */
/* 注意，如果我們自己寫(xiě)css【 * {margin:0} 】，可以把p、h1、h2等標(biāo)簽的margin覆蓋掉
我們都知道，*選擇器的權(quán)重是最低的，但是它卻能覆蓋掉標(biāo)簽選擇器，說(shuō)明瀏覽器已經(jīng)在這里面做了手腳
瀏覽器沒(méi)有讓默認(rèn)樣式和用戶(hù)自定義樣式“公平競(jìng)爭(zhēng)”，而是優(yōu)先用戶(hù)自定義樣式 */
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}
/* 這里可以看到哪些標(biāo)簽文字是加粗的 */
blockquote { margin-left: 40px; margin-right: 40px}
i, cite, em,
var, address { font-style: italic}
/* 這里可以看到哪些標(biāo)簽是斜體 */
pre, tt, code,
kbd, samp { font-family: monospace}
pre{ white-space: pre}
button, textarea,
input, object,
select { display:inline-block; }
/* 不知道inline-block是什么樣子的？或者不知道inline-block有什么特性？
在這里看看哪些標(biāo)簽是inline-block，就知道inline-block的用處了
具體inline-block的用途，我們會(huì)在后面詳細(xì)介紹，此處只是點(diǎn)出來(lái) */
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}
/* 為什么
默認(rèn)是那么個(gè)難看的樣子，特別是IE下，這就是罪魁禍?zhǔn)?*/
ol, ul, dir,
menu, dd { margin-left: 40px}
ol {list-style-type: decimal}
/* ul 和 ol 在默認(rèn)情況下都會(huì)有一篇左邊的間距，在這里可以看到為何會(huì)有間距，以及間距的具體大小是多少。
*/
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 }
/*
為何能實(shí)現(xiàn)換行？瀏覽器得到html的br標(biāo)簽，只會(huì)解析成一個(gè)dom節(jié)點(diǎn)而已，
而“換行”這一功能是通過(guò)這里實(shí)現(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}
/* 這些標(biāo)簽或?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}
/* 對(duì)于打印頁(yè)面時(shí)的設(shè)置，不常用 */
/* 以下都是按照標(biāo)簽選擇器來(lái)的，標(biāo)簽選擇器比類(lèi)、id選擇器的權(quán)重都低。
所以，用戶(hù)自定義的樣式，無(wú)論是用標(biāo)簽、類(lèi)還是id，都能覆蓋默認(rèn)的標(biāo)簽選擇器 */
瀏覽器默認(rèn)樣式
1.理念上的轉(zhuǎn)變
在解讀代碼之前，我先把我看瀏覽器默認(rèn)樣式最大的體會(huì)給大家說(shuō)一下，這個(gè)是非常重要的。就是要先從理念上重新認(rèn)識(shí)html和css。
以前我都是認(rèn)為瀏覽器自身本來(lái)就認(rèn)識(shí)各種html標(biāo)簽，并且會(huì)根據(jù)規(guī)則設(shè)置標(biāo)簽的樣子，例如p是block顯示，ul有margin-left，h1粗體顯示……以前以為這些標(biāo)簽?zāi)J(rèn)的顯示方式和css無(wú)關(guān)，是瀏覽器自己干的，css設(shè)置網(wǎng)頁(yè)樣式是加載之后又渲染的。
現(xiàn)在知道這種想法是錯(cuò)誤的。其實(shí)瀏覽器加載了html之后只為一件東西——生成dom樹(shù)，瀏覽器把html變?yōu)閐om樹(shù)結(jié)構(gòu)，就完成了對(duì)html的結(jié)構(gòu)化。至于后來(lái)對(duì)視圖的渲染，p是block、br換行，那是整合了css之后的事情。而瀏覽器整合css又是另一個(gè)路線(xiàn)，和解析html是分開(kāi)的。這里的“css”就包含了瀏覽器默認(rèn)樣式。
可以結(jié)合下圖理解：
一句話(huà)，瀏覽器將載入的html變?yōu)閐om樹(shù)，但是此時(shí)沒(méi)有任何顯示樣式。所以顯示的樣式，都是css定義的，瀏覽器只會(huì)通過(guò)css來(lái)渲染視圖樣式。
2.block元素為何默認(rèn)情況下p、h1、ul、div都是block顯示，就是這里定義的。所以，不要再說(shuō)div天生就是block——這句話(huà)應(yīng)該換成：瀏覽器默認(rèn)樣式天生規(guī)定了div是block——所以才導(dǎo)致了div是block！是默認(rèn)樣式規(guī)定的，不是瀏覽器的內(nèi)核規(guī)定的。
沒(méi)有設(shè)置block的元素，默認(rèn)為inline顯示。
3.display:list-item我們?cè)谑褂胐isplay時(shí)，常用的值一般是：inline/block/inline-block，用不到list-item。那這里的list-item到底有什么作用？我們不妨親自試一試：
看到?jīng)]有，出現(xiàn)了ul-li中的效果了吧，如果再加一個(gè)margin-left是不是就跟ul-li一樣了？
所以，ul-li為什么會(huì)默認(rèn)顯示成那種樣子？——list-item才是“罪魁禍?zhǔn)住薄?/p> 4.display:table
先給出一個(gè)快速思考題：
