CSS系列——瀏覽器默認樣式

時間 2019-11-10

標籤 css 系列瀏覽器默認樣式欄目 CSS 简体版

原文原文鏈接

瞭解HTML標籤在各瀏覽器當中的默認樣式，可讓咱們瞭解，爲何會要寫Reset.css，Reset.css當中要怎麼寫樣式最合理。
試着思考下面的問題：css

爲何會有默認樣式？
每一個瀏覽器的默認樣式有什麼不一樣？
Reset.css具體怎麼寫，每一個瀏覽器展現的效果纔會一致？

默認樣式

這裏說的默認樣式實際上是每一個瀏覽器本身的默認樣式，咱們一般使用style或者link的形式應用的樣式內容被成爲「用戶樣式」。
瀏覽器加載完一個頁面以後的工做流程大概以下：
一、轉換
二、令牌化
三、詞法分析
四、DOM樹構建
五、CSSOM樹構建
六、DOM樹與CSSOM樹合併後造成渲染樹
七、經過佈局計算每一個對象顯示的位置和大小
八、繪製頁面html

按照上面的流程，瀏覽器會查看文檔當中是否有「用戶樣式」，若是沒有就使用瀏覽器的默認樣式，若是有就會用「用戶樣式」，就使用用戶樣式覆蓋「瀏覽器默認樣式」進行後面的渲染html5

隱藏元素

咱們知道HTML標籤當中的head，title，meta,link,style,script元素默認是不展現的，就是由於瀏覽器的默認樣式當中定義了display:none屬性。css3

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

您能夠經過定義以下代碼在瀏覽器當中查看下效果git

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

block元素

塊元素的特色：github

每一個塊元素都是重新的一行開始（獨佔一行）
能夠設置width,height,margin,border,padding
能夠嵌套其它標籤元素
默認塊元素的寬度等於父元素的寬度
能夠經過定義display:block，把元素設置爲塊元素

HTML標籤當中，那些被稱爲塊元素的標籤之因此有塊元素的屬性，是由於瀏覽器默認給它定義了display:block
而不是由於是塊元素纔會有display:block屬性。web

全部定義了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;
}

inline元素

行內元素的特色：ide

和其它元素在同一行
width，height，margin-top,margin-bottom不能夠控制元素的展示形式（定義無效）
margin-left,margin-right,和padding能夠定義
默認寬度是它所容納內容的寬度
經過定義display:block,能夠把行內元素設置爲塊元素

全部的元素默認都是行內元素，也就是display:inlinewordpress

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

display屬性

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
        <div class="list">
            <span class="item">1</span>
            <span class="item">2</span>
            <span class="item">3</span>
        </div>
    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 表格頭

看下面一段代碼

<table>
        <caption>年齡列表</caption>
        <thead>
             <tr>
                <th>姓名</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>年齡綜合</td>
                <td>27</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>張三</td>
                <td>12</td>                
            </tr>
            <tr>
                <td>李四</td>
                <td>15</td>
            </tr>
        </tbody>        
    </table>

當咱們使用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的區別
一、block寬度默認撐滿父元素
二、table寬度根據內容而定

table-cell的多列布局

<div class="main">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>

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