欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

web前端入門到實戰(zhàn)：布局之display屬性

在CSS中插何一個元素都是一個盒子，甚至是文本節(jié)點也是一個盒子（匿名盒子）；都有自己的視覺格式化（不同的盒子） 。而其中CSS的 display 屬性又可以顯式的修改每個盒子的視覺格式化模型，比如說從 行內(nèi)級盒子 變成 塊級盒子 。那在這一章節(jié)中，我們就來一起探討CSS的 display屬性，該屬性也是學習CSS不可或缺的屬性之一。

舞鋼網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、響應式網(wǎng)站設計等網(wǎng)站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選成都創(chuàng)新互聯(lián)公司。

display 的基本介紹

CSS的 display 屬性在W3C規(guī)范中是一個獨立的模塊，即 CSS Display Module Level 3。該模塊描述如何從文檔樹（DOM樹）生成CSS樹（CSSOM樹），并定義了如何使用 display 屬性來控制CSSOM。比如我們一個類似下面這樣的一個HTML文檔：

學習Q-q-u-n： 784783012 ，分享學習的方法和需要注意的小細節(jié)，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰(zhàn)教程，學習工具，全棧開發(fā)學習路線以及規(guī)劃）
<!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頁面：

web前端入門到實戰(zhàn)：布局之display屬性

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

由于HTML標記定義了不同標記（標記指的是HTML的元素標簽）之間的關系（一些標記包含在其他標記內(nèi)），創(chuàng)建的對象鏈接在一個樹數(shù)據(jù)結構內(nèi)，此結構也會捕獲原始標記中定義的父子關系，比如 <html> 對象是 <body> 對象的父元素， <body> 是 <p> 對象的父元素，依此類推：

web前端入門到實戰(zhàn)：布局之display屬性

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

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

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

與處理 HTML 時一樣，我們需要將收到的 CSS 規(guī)則轉換成某種瀏覽器能夠理解和處理的東西。因此，我們會重復 HTML 過程，不過是為 CSS 而不是 HTML：

web前端入門到實戰(zhàn)：布局之display屬性

CSS 字節(jié)轉換成字符，接著轉換成令牌和節(jié)點，最后鏈接到一個稱為“CSS 對象模型”(CSSOM) 的樹結構內(nèi)：

web前端入門到實戰(zhàn)：布局之display屬性

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

web前端入門到實戰(zhàn)：布局之display屬性

有了渲染樹，我們就可以進入“布局”階段。

在CSS中，對于每個元素，CSS會根據(jù)元素的 display 屬性生成零個或多個框（盒子）。通常，元素生成一個單獨的框（盒子），即主體框，表示的是元素自己，并會在框樹中包含其內(nèi)容。然而，一些 display 的值（比如 display: list-item ）會生成多個框（一個主體框和一個Marker標記框）；有些值（比如 display: none 或 display:contents ）會導到元素或其后代元素不會生成任何框。簡單地說，元素的框類型是由 display 的屬性值來決定。比如大家最常為熟悉的 display:block 會讓元素生成一個塊級框， display:inline 會讓元素生成一個行內(nèi)級框。

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

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

display 的基本屬性

display 屬性定義了一直元素的顯示類型（視覺格式化模型）。默認情況之下，瀏覽器都會對元素設置一個 display 的值，比如上面示例中的 <p> 元素：

web前端入門到實戰(zhàn)：布局之display屬性

名稱欄目：web前端入門到實戰(zhàn)：布局之display屬性
分享路徑：http://www.chinadenli.net/article34/jogepe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設計、移動網(wǎng)站建設、軟件開發(fā)、虛擬主機、電子商務、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運營