摘要：了解標(biāo)簽在各瀏覽器當(dāng)中的默認(rèn)樣式，可以讓我們了解，為什么會(huì)要寫，當(dāng)中要怎么寫樣式最合理。

了解HTML標(biāo)簽在各瀏覽器當(dāng)中的默認(rèn)樣式，可以讓我們了解，為什么會(huì)要寫Reset.css，Reset.css當(dāng)中要怎么寫樣式最合理。
試著思考下面的問題：

為什么會(huì)有默認(rèn)樣式？

每個(gè)瀏覽器的默認(rèn)樣式有什么不同？

Reset.css具體怎么寫，每個(gè)瀏覽器展示的效果才會(huì)一致？

這里說的默認(rèn)樣式其實(shí)是每個(gè)瀏覽器自己的默認(rèn)樣式，我們通常使用style或者link的形式應(yīng)用的樣式內(nèi)容被成為“用戶樣式”。
瀏覽器加載完一個(gè)頁面之后的工作流程大概如下：
1、轉(zhuǎn)換
2、令牌化
3、詞法分析
4、DOM樹構(gòu)建
5、CSSOM樹構(gòu)建
6、DOM樹與CSSOM樹合并后形成渲染樹
7、通過布局計(jì)算每個(gè)對象顯示的位置和大小
8、繪制頁面

按照上面的流程，瀏覽器會(huì)查看文檔當(dāng)中是否有“用戶樣式”，如果沒有就使用瀏覽器的默認(rèn)樣式，如果有就會(huì)用“用戶樣式”，就使用用戶樣式覆蓋“瀏覽器默認(rèn)樣式”進(jìn)行后面的渲染

我們知道HTML標(biāo)簽當(dāng)中的head，title，meta,link,style,script元素默認(rèn)是不展示的，就是因?yàn)闉g覽器的默認(rèn)樣式當(dāng)中定義了display:none屬性。

head,meta,title,link,style,script{
    display:none;
}

您可以通過定義如下代碼在瀏覽器當(dāng)中查看下效果

head{
    display:block;
    width:80px;
    height:80px;
    background:#f00;
}

塊元素的特點(diǎn)：

每個(gè)塊元素都是從新的一行開始（獨(dú)占一行）

可以設(shè)置width,height,margin,border,padding

可以嵌套其它標(biāo)簽元素

默認(rèn)塊元素的寬度等于父元素的寬度

可以通過定義display:block，把元素設(shè)置為塊元素

HTML標(biāo)簽當(dāng)中，那些被稱為塊元素的標(biāo)簽之所以有塊元素的屬性，是因?yàn)闉g覽器默認(rèn)給它定義了display:block
而不是因?yàn)槭菈K元素才會(huì)有display:block屬性。

所有定義了display:block的元素，都是塊元素

html,
body,
p,
div,
layer,
article,aside,footer,header,hgroup,main,nav,section,
address,
blockquote,
figure,
center,
hr,
ol,ul,menu,dir,dd,dl,form,legend,fieldset,frameset,frame,details,summary
h1,h2,h3,h4,h5,h6{
    display:block;
}

行內(nèi)元素的特點(diǎn)：

和其它元素在同一行

width，height，margin-top,margin-bottom不可以控制元素的展現(xiàn)形式（定義無效）

margin-left,margin-right,和padding可以定義

默認(rèn)寬度是它所容納內(nèi)容的寬度

通過定義display:block,可以把行內(nèi)元素設(shè)置為塊元素

所有的元素默認(rèn)都是行內(nèi)元素，也就是display:inline

q,
map,
area,
output
{
    display:inline;
}

html標(biāo)簽在瀏覽器當(dāng)中是以那種布局形式展示，都是因?yàn)閐isplay屬性的定義，display屬性包含以下值：

基本值：    none | inline | block | list-item | inline-block
table系列： table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-columen-group | table-footer-group | table-header-group
css3新增： box | inline-box | flexbox | inline-flexbox | flex | inline-flex | run-in

基本值

none 隱藏元素

inline 設(shè)置為行內(nèi)元素

block 設(shè)置為塊元素

inline-block 設(shè)置為inline-block

list-item 設(shè)置為list-item

li標(biāo)簽?zāi)J(rèn)定義的display:list-item，嘗試定義如下的代碼，在瀏覽器中查看：

    html
        

            1
            2
            3
        
    CSS
        .item{
            display:list-item;
        }        

table系列

table 塊元素的表格

inline-table 行內(nèi)元素的表格

table-caption 定義表格頭

table-cell 表格單元格

table-row 表格單元行

table-row-group 單元行組

table-column 表格列

table-column-group 表格列組

table-footer-group 表格底

table-header-group 表格頭

看下面一段代碼

    

        
年齡列表
        

             

                
姓名
                
年齡
            
        
        

            

                
年齡綜合
                
27
            
        
        

            

                
張三
                
12
                
            
            

                
李四
                
15
            
        
        
    

當(dāng)我們使用thead定義表頭的時(shí)候，默認(rèn)顯示的樣式就是因?yàn)閠head標(biāo)簽定義了display:table-header-group;
同樣，tfoot就是因?yàn)槎x了display:table-footer-group;
caption 就是因?yàn)槎x了display:table-caption;

關(guān)于table系列，我們簡單了解兩個(gè)問題：

display:table和display:block的區(qū)別

display:table-cell如何做多列布局

block和table的區(qū)別
1、block寬度默認(rèn)撐滿父元素
2、table寬度根據(jù)內(nèi)容而定

table-cell的多列布局

    

        

        

        

    

    .main{ 
        width:500px;
        display:table;
    }
    .left,.middle,.right{
        display:table-cell;
        height:100px;
    }
    .left{
        width:20%;
        background:#ff0;
    }
    .middle{
        background:green;  
    }
    .right{
        width:10%;
        background:red;
    }

在線查看

CSS3系列，主要定義了彈性布局相關(guān)的內(nèi)容

box 彈性伸縮盒版本1

inline-box 內(nèi)聯(lián)塊彈性伸縮盒版本1

flexbox 彈性伸縮盒版本2

inline-flexbox內(nèi)聯(lián)塊彈性伸縮盒版本2

flex 彈性伸縮盒版本3

inline-flex 內(nèi)聯(lián)塊縮盒版本3

run-in 根據(jù)上下文定義對象是內(nèi)聯(lián)還是塊級(jí)

彈性伸縮盒以后我們有機(jī)會(huì)詳細(xì)聊聊，這里說說幾個(gè)點(diǎn)
1、box和inline-box，flexbox和inline-flexbox，flex和inline-flex之間的差異
2、run-in是如何根據(jù)上下文作用的

第一個(gè)問題

在需要有固定寬度的情況下的彈性布局使用flex，
如果元素的寬度不固定，里面的標(biāo)簽還需要彈性布局的話，就是用inline-flex

我們通過以下代碼來了解
flex布局;
inline-flex布局

第二個(gè)問題

這里有詳細(xì)的解釋

塊元素

行內(nèi)元素

可變元素

文章七七八八，扯了很多東西，有點(diǎn)亂，讓看官們受累了

GitHub倉庫

Chrom-blink
Chrom-webkit
Opera-10.51
Internet Explorer
HTML4
HTML5
瀏覽器渲染
解讀默認(rèn)樣式