【CSS】display的32種寫法

時間 2019-11-16

標籤 CSS display 寫法欄目 CSS 简体版

原文原文鏈接

轉自（擔憂原做者會刪除文章，因此這裏本身作個備份）：display的32種寫法css

你知道『回』字有四種寫法，但你知道display有32種寫法嗎？今天咱們一一道來，讓你一次性徹底掌握display，今後不再用對它發愁。html

從大的分類來說，display的32種寫法能夠分爲6個大類，再加上1個全局類，一共是7大類前端

1. 外部值

所謂外部值，就是說這些值只會直接影響一個元素的外部表現，而不影響元素裏面的兒子級孫子級元素的表現。css3

1.1 display: block;：這個值你們不陌生，咱們最熟悉的<div>缺省就是這個值，最基本的塊級元素，屬於css入門初學者都知道的概念，只要是容器類型的元素基本都是這個值。除<div>以外，還有<h1>到<h6>，<p>，<form>，<header>，<footer>，<section>，<article>天生都是這個值。面試
1.2 display: inline;：這個值你們也不陌生，行內元素嘛，只要是個行內元素都是這個值，最典型的是<span>，還有<a>，<img>，以及古代html語言當中的<b>，<i>都屬於這一類型。segmentfault
1.3 display: run-in（一般沒人用它）：除了IE和Opera支持它之外，其餘全部主流瀏覽器包括Chrome, Safari, Firefox全都對它置若罔聞。run-in，中文意思就是『闖入』那麼這個元素就直接闖入下一行瀏覽器

2. 內部值【CSS3相關：重要】

談完了外部值，咱們來看看內部值。這一組值比較有意思了，在css3如火如荼的今天，你要玩不轉這些值，怕是哪兒也找不到工做的。內部值主要是用來管束本身下屬的兒子級元素的排布的，規定它們或者排成S形，或者排成B形這樣的。ruby

2.1 display: flow;（實驗階段）：含義不清，實驗室階段產品，Chrome不支持

2.2 display: flow-root;：不一樣於flow，如今用flow-root的漸漸多起來了，由於它能夠撐起被你float掉的塊級元素的高度。bash

浮動元素使其父元素高度塌陷（該段內容參看了另外一文章後總結） :咱們常常會遇到一種狀況，給一個元素設置浮動以後 float:left/right;，若是該元素的父元素有背景顏色，那麼會發現父元素的背景顏色消失了；若是父元素有一個邊框，那麼浮動元素沒法將邊框撐開。前端工程師

<html>
    <head>
        <style> .pdiv { background-color:cornflowerblue; border: 2px solid red; /**父元素加overflow:hidden 能夠消除子元素float對父元素的影響*/ /**overflow: hidden; */ /** display新的屬性值 雖然目前僅幾個最新瀏覽器支持， 但徹底能夠經過@supports()屬性作完美降級處理。 */ display: flow-root; } /** 爲父元素添加僞類能夠 消除子元素float對父元素的影響 .pdiv::after { content:""; clear:both; //清除浮動 display:block; //確保該元素是一個塊級元素 } */ .cdiv { background-color:burlywood; border: 1px solid brown; width: 100px; height: 100px; margin: 20px; /** float: left; */ } </style>
    </head>
    <body>
        <div class="pdiv">
            <div class="cdiv">
            </div>
            <div class="cdiv">
            </div>
        </div>
    </body>
</html>
複製代碼

未加float時：

將上面代碼中的float放開：

在第一個示例中彷彿父元素消失了，但在第二個示例中發現其實父元素並無消失，只是高度被計算爲0。這就要回到浮動元素的特性來講明此問題「當元素設置浮動後，會自動脫離文檔流」，翻譯成白話就是說，元素浮動後，就不在整個文檔流的管轄範圍，那麼它以前存在在父元素內的高度就隨着浮動不復存在了，而此時父元素會默認本身裏面沒有任何內容（前提是未給父元素設置固定高度，若是父元素自己有固定高度，就不會出現這種狀況）

解決方法：

a、給父元素也添加float。這樣讓父元素與子元素一塊兒脫離文檔流浮動起來，保證子元素在父元素內，這樣父元素就能自適應子元素的高度，可是此方法有一弊端，必定會影響父元素以後的元素排列，甚至影響佈局。

b、給父元素一個固定高度，此方法適用於子元素高度已知而且固定的狀況。

c、添加一個塊級元素，並給此元素設置clear:both;清除浮動。在很早以前用的就是這種解決辦法，新建一個空的div，爲這個div設置clear：both；這樣無疑是增長了無心義的標籤，一個大型頁面中，這種標籤太可能是很差的。

d、給父元素添加 overflow：hidden;

e、給父元素添加僞類::after清除浮動

新的解決方法：display: flow-root;

2.3 display: table;：這一個屬性，以及下面的另外8個與table相關的屬性，都是用來控制如何把div顯示成table樣式的，由於咱們不喜歡<table>這個標籤嘛，因此咱們想把全部的<table>標籤都換成<div>標籤。<div>有什麼好？無非就是能自動換行而已，但其實你徹底能夠作一個<table><tr><td>標籤，把它全都替換成display: block;也能夠自動折行，只不過略微麻煩而已。
2.4 display: flex;【敲黑板，劃重點！】：做爲新一代的前端工程師，這個屬性你必須爛熟於胸。display: flex;以及與它相關聯的一系列屬性：flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content，而且包括全部這些屬性的取值，都是你須要反覆研磨的。2009年誕生的這個屬性能夠說是不亞於css界一場蒸汽機誕生同樣的工業革命，它的誕生標誌着馬車同樣的float被完全拋進歷史的垃圾堆。

阮老師的Flex佈局教程

A Complete Guide to Flexbox

2.5 display: grid;【會flex很吊嗎？會grid更吊哦！】：也許這就是下次前端面試的重點哦！

grid佈局，中文翻譯爲網格佈局。學習grid佈局有兩個重點：

一個重點是grid佈局引入了一個全新的單位：fr，它是fraction（分數）的縮寫，因此今後之後，你的兵器庫裏除了px, em, rem, 百分比這些常見兵器以及vw,vh這些新式武器以外，又多了同樣旁門暗器fr，要想用好grid，必須充分掌握fr。

另外一個重點是斜槓操做符，這可不是分數哦。它表示的是起始位置和結束位置。好比說3 /4，這可不是四分之三的意思，這是指一個元素從第3行開始，到第4行結束，但又不包括第4行。

一樣，與grid相關聯的也有一大堆旁門屬性，是在學習display: grid;的同時必須掌握的。包括grid, grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-template, grid-template-columns, grid-template-rows, grid-template-areas, grid-gap, grid-column-gap, grid-row-gap, grid-auto-columns, grid-auto-rows, grid-auto-flow, grid-column, grid-row。不能詳述，關於這個寫起來又是一大篇文章。詳情仍是參考csstrick上這篇文章，講得很是細緻很是清楚。
2.6 display: ruby;【相似加拼音】：ruby這個取值對於咱們亞洲人來講實際上是很是有用的一個東西，可是目前除了Firefox之外其它瀏覽器對它的支持都不太好。簡而言之，display: ruby;的做用就是能夠作出下面這樣的東西：
2.7 display: subgrid;【瞭解便可】

2015年8月6日，W3C的級聯樣式單（CSS）工做組（Cascading Style Sheets Working Group）發佈了CSS網格佈局模塊第一級（CSS Grid Layout Module Level 1）的工做草案。在這個草案裏規定了上一節咱們講到的display: grid;的方案。

而display: subgrid;是屬於2017年11月9日發佈的非正式的CSS網格佈局模塊第二級的內容。因此這是一個很是新的草案，而且圍繞它的爭議歷來也沒有斷過。

subgrid總的思想是說大網格里還能夠套小網格，互相不影響。

但若是grid裏能夠再套subgrid的話，那我subgrid裏還想再套subgrid怎麼辦？subsubgrid嗎？何況，究竟是grid: subgrid;仍是display: subgrid;這個也沒有達成共識，關於此一系列的爭議，感興趣的同窗能夠看看這篇文章

3. 列表值【極少用】

3.1 display: list-item;

display: list-item;和display:table;同樣，也是一幫痛恨各類html標籤，而但願只使用<div>來寫遍一切html的傢伙搞出來的鬼東西，實際使用極少，效果就是這樣：

看，你用<ul><li>能實現的效果，他能夠用<div>實現出來，就是這個做用。
3.2 哈哈哈~~~~ PS：本身今天看了下li的默認樣式

4. 屬性值【附屬於主值】

好比主值裏設置了display: table;，就能夠在子元素裏使用display: table-row-group;等等屬性，不過並不絕對。關於它們的做用，主要參考主值就夠了。

display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
複製代碼

我所知道的幾種display:table-cell的應用

display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
複製代碼

5. 顯示值

MDN裏把它叫作<display-box> values（盒子值），我把它叫作顯示值，主要是爲了便於理解。

5.1 display: contents（下面內容來自w3cplus）
display:contents啥意思呢？看下圖展現:

上圖對應代碼：
```
<div style="display: contents; background: magenta; border: solid thick black; ng: 20px; color: cyan; font: 30px/1 Monospace;"> 
    <span style="background: black;">foobar</span> 
</div>
複製代碼
```
即：display: contents樣式規則使div元素不產生任何邊界框，所以元素的背景、邊框和填充部分都不會渲染。然而，繼承的屬性如顏色(color)和字體(font)卻能照常影響到span這個子元素。

5.2 CSS網格佈局與display: contents

這個display: contents樣式能取代子網格(subgrids：上面2.7提到的內容)功能，目前尚未任何瀏覽器支持次網格。不過，子網格(subgrids)有些狀況仍是須要用到的。

典型的例子是網格佈局(Grid Layout)的自動就位(auto-placement)效果，下面是一個簡單的表格元素，看起來是這樣的：

<html>
    <head>
        <style> form { display:grid; } label { grid-column: 1; } input { grid-column: 2; } button { grid-column: span 2; } </style> 
    </head>
    <body>
        <form> 
            <label>Name</label><input /> 
            <label>Mail</label><input /> 
            <button>Send</button> 
        </form>
    </body>
</html>
複製代碼

然而這不是一個典型的HTML網頁表格，由於一般咱們會在表格內部使用列表，這樣使用讀屏軟件的用戶就能預先知道有多少空要填。因此HTML網頁看起來更可能會是這樣的：

<form>
    <ul>
        <li><label>Name</label><input /></li>
        <li><label>Mail</label><input /></li>
        <li><button>Send</button></li>
    </ul>
</form>
複製代碼

有了display: contents樣式，就能夠作出和第一個例子相同的佈局，用的CSS也差很少：

ul{ 
    display: grid;
}
li{ 
    display: contents;
}
label{ 
    grid-column: 1;
}
input{ 
    grid-column: 2;
}
button { 
    grid-column: span 2; 
}
複製代碼

如今這樣，網站轉用CSS網格佈局(Grid Layout)時，HTML代碼不用大改，也不須要捨去一些確實有用的HTML元素，如上面例子裏的列表元素，真的很不錯。

6. 混合值

6.1 display: inline-block;：關於display: inline-block;的做用恐怕只要作過3天以上前端的工程師都應該知道。什麼也不說了，上一張著名的圖片做總結吧：
6.2 display: inline-table;：你要能理解inline-block，你就能理解inline-table。在行內顯示一個表格，就像這樣：
6.3 display: inline-flex;：這個就不用多說了吧？跟上面同樣，在行內進行彈性佈局，參考display: flex;。
6.4 display: inline-grid;：同上，在行內進行網格佈局，參考display: grid;。

7. 全局值

這些值不是display屬性的專利，幾乎其它任意屬性均可以用，列在這裏湊個數。

7.1 display: inherit;：繼承父元素的display屬性。
7.2 display: initial;：無論父元素怎麼設定，恢復到瀏覽器最初始時的display屬性
7.3 display: unset;：unset混合了inherit和initial。若是父元素設值了，就用父元素的設定，若是父元素沒設值，就用瀏覽器的缺省設定。直接看圖最明白：

總結

以上就是在css裏display的32種寫法。談了這麼多，不知道你記住了多少呢？其實，單純理解每個display屬性的取值都不難，難的是融會貫通，在恰當的地方運用恰當的值，畢竟咱們的目的是爲了把代碼寫短，而不是把代碼寫長。若是你怕記不太清的話，就請你收藏這篇小文，也許未來的某一天，你會用得着。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。