摘要：了解標簽在各瀏覽器當中的默認樣式，可以讓我們了解，為什么會要寫，當中要怎么寫樣式最合理。

了解HTML標簽在各瀏覽器當中的默認樣式，可以讓我們了解，為什么會要寫Reset.css，Reset.css當中要怎么寫樣式最合理。
試著思考下面的問題：

為什么會有默認樣式？

每個瀏覽器的默認樣式有什么不同？

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

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

按照上面的流程，瀏覽器會查看文檔當中是否有“用戶樣式”，如果沒有就使用瀏覽器的默認樣式，如果有就會用“用戶樣式”，就使用用戶樣式覆蓋“瀏覽器默認樣式”進行后面的渲染

我們知道HTML標簽當中的head，title，meta,link,style,script元素默認是不展示的，就是因為瀏覽器的默認樣式當中定義了display:none屬性。

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

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

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

塊元素的特點：

每個塊元素都是從新的一行開始（獨占一行）

可以設置width,height,margin,border,padding

可以嵌套其它標簽元素

默認塊元素的寬度等于父元素的寬度

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

HTML標簽當中，那些被稱為塊元素的標簽之所以有塊元素的屬性，是因為瀏覽器默認給它定義了display:block
而不是因為是塊元素才會有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;
}

行內元素的特點：

和其它元素在同一行

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

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

默認寬度是它所容納內容的寬度

通過定義display:block,可以把行內元素設置為塊元素

所有的元素默認都是行內元素，也就是display:inline

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

html標簽在瀏覽器當中是以那種布局形式展示，都是因為display屬性的定義，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 設置為行內元素

block 設置為塊元素

inline-block 設置為inline-block

list-item 設置為list-item

li標簽默認定義的display:list-item，嘗試定義如下的代碼，在瀏覽器中查看：

    html
        

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

table系列

table 塊元素的表格

inline-table 行內元素的表格

table-caption 定義表格頭

table-cell 表格單元格

table-row 表格單元行

table-row-group 單元行組

table-column 表格列

table-column-group 表格列組

table-footer-group 表格底

table-header-group 表格頭

看下面一段代碼

    

        
年齡列表
        

             

                
姓名
                
年齡
            
        
        

            

                
年齡綜合
                
27
            
        
        

            

                
張三
                
12
                
            
            

                
李四
                
15
            
        
        
    

當我們使用thead定義表頭的時候，默認顯示的樣式就是因為thead標簽定義了display:table-header-group;
同樣，tfoot就是因為定義了display:table-footer-group;
caption 就是因為定義了display:table-caption;

關于table系列，我們簡單了解兩個問題：

display:table和display:block的區別

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

block和table的區別
1、block寬度默認撐滿父元素
2、table寬度根據內容而定

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系列，主要定義了彈性布局相關的內容

box 彈性伸縮盒版本1

inline-box 內聯塊彈性伸縮盒版本1

flexbox 彈性伸縮盒版本2

inline-flexbox內聯塊彈性伸縮盒版本2

flex 彈性伸縮盒版本3

inline-flex 內聯塊縮盒版本3

run-in 根據上下文定義對象是內聯還是塊級

彈性伸縮盒以后我們有機會詳細聊聊，這里說說幾個點
1、box和inline-box，flexbox和inline-flexbox，flex和inline-flex之間的差異
2、run-in是如何根據上下文作用的

第一個問題

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

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

第二個問題

這里有詳細的解釋

塊元素

行內元素

可變元素

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

GitHub倉庫

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