web前端入門到實戰：佈局之display屬性

時間 2019-12-20

標籤 web 前端入門實戰佈局 display 屬性欄目 HTML 简体版

原文原文鏈接

在CSS中插何一個元素都是一個盒子，甚至是文本節點也是一個盒子（匿名盒子）；都有本身的視覺格式化（不一樣的盒子）。而其中CSS的 display 屬性又能夠顯式的修改每一個盒子的視覺格式化模型，好比說從行內級盒子變成塊級盒子。那在這一章節中，咱們就來一塊兒探討CSS的 display屬性，該屬性也是學習CSS不可或缺的屬性之一。css

display 的基本介紹

CSS的 display 屬性在W3C規範中是一個獨立的模塊，即 CSS Display Module Level 3。該模塊描述如何從文檔樹（DOM樹）生成CSS樹（CSSOM樹），並定義瞭如何使用 display 屬性來控制CSSOM。好比咱們一個相似下面這樣的一個HTML文檔：html

學習Q-q-u-n： 784783012 ，分享學習的方法和須要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link href="style.css" rel="stylesheet">
        <title>Critical Path</title>
    </head>
    <body>
        <p>Hello <span>web performance</span> students!</p>
        <div><img src="awesome-photo.jpg"></div>
    </body>
</html>

該文檔結構很簡單，只包含了一些文本和一幅圖片。若是你瞭解如何的渲染原理的話，能瞭解獲得，瀏覽器大概是像下面這樣處理該HTML頁面：前端

忽略其餘部分，此處只關注 DOM構建 這部分。web

因爲HTML標記定義了不一樣標記（標記指的是HTML的元素標籤）之間的關係（一些標記包含在其餘標記內），建立的對象連接在一個樹數據結構內，此結構也會捕獲原始標記中定義的父子關係，好比 <html> 對象是 <body> 對象的父元素， <body> 是 <p> 對象的父元素，依此類推：瀏覽器

整個流程的最終輸出是咱們這個簡單頁面的文檔對象模型 (DOM)，瀏覽器對頁面進行的全部進一步處理都會用到它。數據結構

在該示例中，咱們使用 <link> 標籤引入了一個 style.css 樣式文件，該文件中的樣式代碼假設以下：ide

body { 
    font-size: 16px 
}
p { 
    font-weight: bold 
}
span { 
    color: red 
}
p span { 
    display: none 
}
img { 
    float: right 
}

與處理 HTML 時同樣，咱們須要將收到的 CSS 規則轉換成某種瀏覽器可以理解和處理的東西。所以，咱們會重複 HTML 過程，不過是爲 CSS 而不是 HTML：工具

CSS 字節轉換成字符，接着轉換成令牌和節點，最後連接到一個稱爲「CSS 對象模型」(CSSOM) 的樹結構內：佈局

瀏覽器會將DOM樹和CSSOM樹合併成一個渲染樹（Render Tree）：學習

有了渲染樹，咱們就能夠進入「佈局」階段。

在CSS中，對於每一個元素，CSS會根據元素的 display 屬性生成零個或多個框（盒子）。一般，元素生成一個單獨的框（盒子），即主體框，表示的是元素本身，並會在框樹中包含其內容。然而，一些 display 的值（好比 display: list-item ）會生成多個框（一個主體框和一個Marker標記框）；有些值（好比 display: none 或 display:contents ）會導到元素或其後代元素不會生成任何框。簡單地說，元素的框類型是由 display 的屬性值來決定。好比你們最常爲熟悉的 display:block 會讓元素生成一個塊級框， display:inline 會讓元素生成一個行內級框。

有關於框（或者盒子）的介紹，能夠閱讀 視覺格式化模型 一章。

若是用一句話來描述的話，那就是 CSS的 display 屬性能夠用來改變元素的視覺格式化模型，即改變框的類型。