日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線(xiàn)溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
關(guān)于CSS中display的32種寫(xiě)法

你知道『回』字有四種寫(xiě)法，但你知道 display有 32種寫(xiě)法嗎？今天我們一一道來(lái)，讓你一次性完全掌握 display，從此再也不用對(duì)它發(fā)愁。

創(chuàng)新互聯(lián)-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比鐵山港網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式鐵山港網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋鐵山港地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴(lài)。

從大的分類(lèi)來(lái)講， display的 32種寫(xiě)法可以分為 6個(gè)大類(lèi)，再加上 1個(gè)全局類(lèi)，一共是 7大類(lèi)：

  • 外部值
  • 內(nèi)部值
  • 列表值
  • 屬性值
  • 顯示值
  • 混合值
  • 全局值

外部值

所謂外部值，就是說(shuō)這些值只會(huì)直接影響一個(gè)元素的外部表現(xiàn)，而不影響元素里面的兒子級(jí)孫子級(jí)元素的表現(xiàn)。

display: block;

這個(gè)值大家不陌生，我們最熟悉的

缺省就是這個(gè)值，最基本的塊級(jí)元素，屬于 css入門(mén)初學(xué)者都知道的概念，只要是容器類(lèi)型的元素基本都是這個(gè)值。除
之外，還有

到

，

，

，
，
     
  •  
  • bbb
    •  
  •  
  •     .a { 
  •  
  •       font-size: 36px; 
  •  
  •       display: run-in; 
  •  
  •     }  

    • 這有什么用呢？我們拿 span設(shè)置 font-size一樣可以實(shí)現(xiàn)這個(gè)效果，就讓 IE自己跟自己玩去吧！說(shuō)實(shí)話(huà)，在人力資源如此寶貴的今天， IE的產(chǎn)品經(jīng)理不知腦子是不是進(jìn)水了，不派工程師去實(shí)現(xiàn)那么多比這重要的多得多的特性，卻花時(shí)間做這么個(gè)沒(méi)用的玩意兒，難道工程師的時(shí)間不是金錢(qián)嗎？難怪市場(chǎng)占有率連年下滑。

    內(nèi)部值

    談完了外部值，我們來(lái)看看內(nèi)部值。這一組值比較有意思了，在 css3如火如荼的今天，你要玩不轉(zhuǎn)這些值，怕是哪兒也找不到工作的。內(nèi)部值主要是用來(lái)管束自己下屬的兒子級(jí)元素的排布的，規(guī)定它們或者排成 S形，或者排成 B形這樣的。

    display: flow;

    含義不清，實(shí)驗(yàn)室階段產(chǎn)品， Chrome不支持。如果還不夠說(shuō)服你暫時(shí)不要碰它的話(huà)，試著理解以下英文原文： 

    If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.
display: flow-root;

    不同于剛才談到的 flow，現(xiàn)在用 flow-root的漸漸多起來(lái)了，因?yàn)樗梢該纹鸨荒?float掉的塊級(jí)元素的高度。外容器本來(lái)是有高度的，就像這樣：

         

     
 
 
 
      
  
  
  
  
    1.        
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.    
     
  •  
  •       Example one     
  •  
  •  
  •  
  •     .container { 
  •  
  •         border: 2px solid #3bc9db; 
  •  
  •         border-radius: 5px; 
  •  
  •         background-color: #e3fafc; 
  •  
  •         width: 400px; 
  •  
  •         padding: 5px; 
  •  
  •     } 
  •  
  •     .item { 
  •  
  •         height: 100px; 
  •  
  •         width: 100px; 
  •  
  •         background-color: #1098ad; 
  •  
  •         border: 1px solid #0b7285; 
  •  
  •         border-radius: 5px; 
  •  
  •     }  

    • 結(jié)果因?yàn)槟阆胱屇且恍凶稚先?，于是你給 .item加了一個(gè) float:left;結(jié)果就成這樣了，外容器高度掉了，這不是很多人常犯的錯(cuò)誤嗎？

    現(xiàn)在我們給 .container加上 display:flow-root;再看一下：

    喏，外容器高度又回來(lái)了，這效果是不是杠杠的？

    那位同學(xué)說(shuō)，我們用 clear:both;不是一樣可以達(dá)到這效果嗎？ 

     
 
 
 
      
  
  
  
  
    1. .container::after { 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.     content: ''; 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.     clear: both; 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.     display: table; 
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9. }  
      10.

    小明，請(qǐng)你出去！我們?cè)谥v display:flow-root;，不是在講 clear:both;！

    display: table;

    這一個(gè)屬性，以及下面的另外 8個(gè)與 table相關(guān)的屬性，都是用來(lái)控制如何把 div顯示成 table樣式的，因?yàn)槲覀儾幌矚g

    這個(gè)標(biāo)簽嘛，所以我們想把所有的
    標(biāo)簽都換成
    標(biāo)簽。
    有什么好？無(wú)非就是能自動(dòng)換行而已，但其實(shí)你完全可以做一個(gè)
      標(biāo)簽，把它全都替換成 display:block;也可以自動(dòng)折行，只不過(guò)略微麻煩而已。

      關(guān)于 display:table;的詳細(xì)用法，大家可以參考這篇文章，這里就不細(xì)說(shuō)了。

      display: flex;

      敲黑板，劃重點(diǎn)！作為新一代的前端工程師，這個(gè)屬性你必須爛熟于胸衣中，哦，錯(cuò)了，是胸中。 display:flex;以及與它相關(guān)聯(lián)的一系列屬性： flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content，并且包括所有這些屬性的取值，都是你需要反復(fù)研磨的。 2009年誕生的這個(gè)屬性可以說(shuō)是不亞于 css界一場(chǎng)蒸汽機(jī)誕生一樣的工業(yè)革命，它的誕生標(biāo)志著馬車(chē)一樣的 float被徹底拋進(jìn)歷史的垃圾堆。

      關(guān)于它的詳情，會(huì)中文的可以參考阮一峰的這篇文章，但我認(rèn)為，格式編排的更好還是 csstrick上的這篇文章。沒(méi)有一張圖能完整地展現(xiàn) flex的神韻，就放這張我比較喜歡的圖片吧：

      display: grid;

      會(huì) flex很吊嗎？會(huì) grid更吊哦！也許這就是下次前端面試的重點(diǎn)哦！

      grid布局，中文翻譯為 網(wǎng)格布局。學(xué)習(xí) grid布局有兩個(gè)重點(diǎn)：一個(gè)重點(diǎn)是 grid布局引入了一個(gè)全新的單位： fr，它是 fraction（ 分?jǐn)?shù)）的縮寫(xiě)，所以從此以后，你的兵器庫(kù)里除了 px, em, rem, 百分比這些常見(jiàn)兵器以及 vw, vh這些新式武器之外，又多了一樣旁門(mén)暗器 fr，要想用好 grid，必須充分掌握 fr。另一個(gè)重點(diǎn)是 斜杠操作符，這可不是 分?jǐn)?shù)哦。它表示的是 起始位置和 結(jié)束位置。比如說(shuō) 3/4，這可不是 四分之三的意思，這是指一個(gè)元素從第 3行開(kāi)始，到第 4行結(jié)束，但又不包括第 4行。

      同樣，與 grid相關(guān)聯(lián)的也有一大堆旁門(mén)屬性，是在學(xué)習(xí) display:grid;的同時(shí)必須掌握的。包括 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。不能詳述，關(guān)于這個(gè)寫(xiě)起來(lái)又是一大篇文章。詳情還是參考csstrick上這篇文章，講得非常細(xì)致非常清楚。

      display: ruby;

      ruby這個(gè)取值對(duì)于我們亞洲人來(lái)說(shuō)其實(shí)是非常有用的一個(gè)東西，但是目前除了 Firefox以外其它瀏覽器對(duì)它的支持都不太好。簡(jiǎn)而言之， display:ruby;的作用就是可以做出下面這樣的東西：

      很好的東西，對(duì)吧？如果可以用的話(huà)，對(duì)我國(guó)的小學(xué)教育可以有極大的促進(jìn)。但可惜我們現(xiàn)在暫時(shí)還用不了。

      ruby這個(gè)詞在英語(yǔ)里的意思是 紅寶石，但在日語(yǔ)里是 ルビ，翻譯成中文是 旁注標(biāo)記的意思，我們中文的旁注標(biāo)記就是漢語(yǔ)拼音?？梢韵胍?jiàn)，這個(gè)標(biāo)準(zhǔn)的制定者肯定是日本人，如果是我們中國(guó)人的話(huà)，那這個(gè)標(biāo)簽就不是 ruby，而是 pinyin了。還有一個(gè) ruby語(yǔ)言，發(fā)明者也是一個(gè)日本人，和 html里這個(gè) ruby是兩碼事，不要搞混了。

      ruby的語(yǔ)法大致如下：

      display: subgrid;

      2015年 8月 6日， W3C的級(jí)聯(lián)樣式單（ CSS）工作組（ CascadingStyleSheetsWorkingGroup）發(fā)布了 CSS網(wǎng)格布局模塊第一級(jí)（ CSSGridLayoutModuleLevel1）的工作草案。在這個(gè)草案里規(guī)定了上一節(jié)我們講到的 display:grid;的方案。而 display:subgrid;是屬于 2017年 11月 9日發(fā)布的非正式的CSS網(wǎng)格布局模塊第二級(jí)的內(nèi)容。所以這是一個(gè)非常新的草案，并且圍繞它的爭(zhēng)議從來(lái)也沒(méi)有斷過(guò)。

      subgrid總的思想是說(shuō)大網(wǎng)格里還可以套小網(wǎng)格，互相不影響。但如果 grid里可以再套 subgrid的話(huà)，那我 subgrid里還想再套 subgrid怎么辦？ subsubgrid嗎？況且，到底是 grid:subgrid;還是 display:subgrid;這個(gè)也沒(méi)有達(dá)成共識(shí)，關(guān)于此一系列的爭(zhēng)議，感興趣的同學(xué)可以看看這篇文章，英語(yǔ)好的可以看這篇。

      列表值

      display: list-item;

      display:list-item;和 display:table;一樣，也是一幫痛恨各種 html標(biāo)簽，而希望只使用

      來(lái)寫(xiě)遍一切 html的家伙搞出來(lái)的鬼東西，實(shí)際使用極少，效果就是這樣：

      看，你用

      • 能實(shí)現(xiàn)的效果，他可以用
        實(shí)現(xiàn)出來(lái)，就是這個(gè)作用。

        屬性值

        屬性值一般是附屬于主值的，比如主值里設(shè)置了 display:table;，就可以在子元素里使用 display:table-row-group;等等屬性，不過(guò)并不絕對(duì)。關(guān)于它們的作用，主要參考主值就夠了。

        display: table-row-group;

        詳情參考display: table;。

        display: table-header-group;

        詳情參考display: table;。

        display: table-footer-group;

        詳情參考display: table;。

        display: table-row;

        詳情參考display: table;。

        display: table-cell;

        詳情參考display: table;。這個(gè)屬性有必要詳細(xì)說(shuō)說(shuō)，因?yàn)樗耆梢詥为?dú)應(yīng)用，用在高度不固定元素的垂直居中上，詳情請(qǐng)見(jiàn)張?chǎng)涡竦倪@篇文章。效果如下圖所示：

        display: table-column-group;

        詳情參考display: table;。

        display: table-column;

        詳情參考display: table;。

        display: table-caption;

        詳情參考display: table;。

        display: ruby-base;

        詳情參考display: ruby;。

        display: ruby-text;

        詳情參考display: ruby;。

        display: ruby-base-container;

        詳情參考display: ruby;。

        display: ruby-text-container;

        詳情參考display: ruby;。

        顯示值

        MDN里把它叫做 values（ 盒子值），我把它叫做 顯示值，主要是為了便于理解。

        display: contents;

        這大概是 2018年年初最令人喜大普達(dá)的一件大事了：Chrome 65版本終于要支持display: contents;了！ Firefox早就支持了，而 Chrome直到現(xiàn)在才開(kāi)始支持，這么重要的特性，它到底有什么功能呢？結(jié)果恐怕會(huì)令你大失所望。原來(lái)的布局是這樣的：

        你給中間那個(gè) div加上 display:contents;之后，它就變成這樣了：

        這就是 display:contents;的作用，它讓子元素?fù)碛泻透冈匾粯拥牟季址绞?，僅此而已。

        display: none;

        這么著名的值還用多說(shuō)嗎？

        混合值

        display: inline-block;

        關(guān)于 display:inline-block;的作用恐怕只要做過(guò) 3天以上前端的工程師都應(yīng)該知道。什么也不說(shuō)了，上一張著名的圖片作總結(jié)吧：

        display: inline-table;

        你要能理解 inline-block，你就能理解 inline-table。在行內(nèi)顯示一個(gè)表格，就像這樣：

        display: inline-flex;

        這個(gè)就不用多說(shuō)了吧？跟上面一樣，在行內(nèi)進(jìn)行彈性布局，參考display: flex;。

        display: inline-grid;

        同上，在行內(nèi)進(jìn)行網(wǎng)格布局，參考display: grid;。

        全局值

        這些值不是 display屬性的專(zhuān)利，幾乎其它任意屬性都可以用，列在這里湊個(gè)數(shù)。

        display: inherit;

        繼承父元素的 display屬性。

        display: initial;

        不管父元素怎么設(shè)定，恢復(fù)到瀏覽器最初始時(shí)的 display屬性。

        display: unset;

        unset混合了 inherit和 initial。如果父元素設(shè)值了，就用父元素的設(shè)定，如果父元素沒(méi)設(shè)值，就用瀏覽器的缺省設(shè)定。直接看圖最明白：

        總結(jié)

        以上就是在 css里 display的 32種寫(xiě)法。談了這么多，不知道你記住了多少呢？其實(shí)，單純理解每一個(gè) display屬性的取值都不難，難的是融會(huì)貫通，在恰當(dāng)?shù)牡胤竭\(yùn)用恰當(dāng)?shù)闹?，畢竟我們的目的是為了把代碼寫(xiě)短，而不是把代碼寫(xiě)長(zhǎng)。如果你怕記不太清的話(huà)，就請(qǐng)你收藏這篇小文，也許將來(lái)的某一天，你會(huì)用得著。 


        網(wǎng)頁(yè)題目：關(guān)于CSS中display的32種寫(xiě)法
        網(wǎng)頁(yè)網(wǎng)址：http://www.dlmjj.cn/article/cdgooog.html