資訊專欄INFORMATION COLUMN
摘要：這個(gè)詞在英語(yǔ)里的意思是紅寶石，但在日語(yǔ)里是，翻譯成中文是旁注標(biāo)記的意思，我們中文的旁注標(biāo)記就是漢語(yǔ)拼音。
你知道『回』字有四種寫法，但你知道display有32種寫法嗎？今天我們一一道來(lái)，讓你一次性完全掌握display，從此再也不用對(duì)它發(fā)愁。
從大的分類來(lái)講，display的32種寫法可以分為6個(gè)大類，再加上1個(gè)全局類，一共是7大類：
外部值
內(nèi)部值
列表值
屬性值
顯示值
混合值
全局值
外部值所謂外部值，就是說(shuō)這些值只會(huì)直接影響一個(gè)元素的外部表現(xiàn)，而不影響元素里面的兒子級(jí)孫子級(jí)元素的表現(xiàn)。
display: block;這個(gè)值大家不陌生，我們最熟悉的 ，， 這個(gè)值大家也不陌生，行內(nèi)元素嘛，只要是個(gè)行內(nèi)元素都是這個(gè)值，最典型的是，還有， 這個(gè)值有點(diǎn)奇怪，通常沒(méi)人用它，但你可以知道它。因?yàn)槌?b>IE和Opera支持它以外，其他所有主流瀏覽器包括Chrome, Safari, Firefox全都對(duì)它置若罔聞。這東西說(shuō)白了也沒(méi)什么神秘，它的意思就是說(shuō)如果我們命令一個(gè)元素run-in，中文意思就是『闖入』！那么這個(gè)元素就直接闖入下一行。比如說(shuō)這樣： 寫起來(lái)大概就是這樣： 這有什么用呢？我們拿span設(shè)置font-size一樣可以實(shí)現(xiàn)這個(gè)效果，就讓IE自己跟自己玩去吧！說(shuō)實(shí)話，在人力資源如此寶貴的今天，IE的產(chǎn)品經(jīng)理不知腦子是不是進(jìn)水了，不派工程師去實(shí)現(xiàn)那么多比這重要的多得多的特性，卻花時(shí)間做這么個(gè)沒(méi)用的玩意兒，難道工程師的時(shí)間不是金錢嗎？難怪市場(chǎng)占有率連年下滑。 談完了外部值，我們來(lái)看看內(nèi)部值。這一組值比較有意思了，在css3如火如荼的今天，你要玩不轉(zhuǎn)這些值，怕是哪兒也找不到工作的。內(nèi)部值主要是用來(lái)管束自己下屬的兒子級(jí)元素的排布的，規(guī)定它們或者排成S形，或者排成B形這樣的。 含義不清，實(shí)驗(yàn)室階段產(chǎn)品，Chrome不支持。如果還不夠說(shuō)服你暫時(shí)不要碰它的話，試著理解以下英文原文： 不同于剛才談到的flow，現(xiàn)在用flow-root的漸漸多起來(lái)了，因?yàn)樗梢該纹鸨荒?b>float掉的塊級(jí)元素的高度。外容器本來(lái)是有高度的，就像這樣： 結(jié)果因?yàn)槟阆胱屇且恍凶稚先?，于是你給.item加了一個(gè)float: left;結(jié)果就成這樣了，外容器高度掉了，這不是很多人常犯的錯(cuò)誤嗎？ 現(xiàn)在我們給.container加上display: flow-root;再看一下： 喏，外容器高度又回來(lái)了，這效果是不是杠杠的？ 那位同學(xué)說(shuō)，我們用clear: both;不是一樣可以達(dá)到這效果嗎？ 小明，請(qǐng)你出去！我們?cè)谥vdisplay: flow-root;，不是在講clear: both;！ 這一個(gè)屬性，以及下面的另外8個(gè)與table相關(guān)的屬性，都是用來(lái)控制如何把div顯示成table樣式的，因?yàn)槲覀儾幌矚g 關(guān)于display: table;的詳細(xì)用法，大家可以參考這篇文章，這里就不細(xì)說(shuō)了。 敲黑板，劃重點(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)志著馬車一樣的float被徹底拋進(jìn)歷史的垃圾堆。 關(guān)于它的詳情，會(huì)中文的可以參考阮一峰的這篇文章，但我認(rèn)為，格式編排的更好還是csstrick上的這篇文章。沒(méi)有一張圖能完整地展現(xiàn)flex的神韻，就放這張我比較喜歡的圖片吧： 會(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ù)）的縮寫，所以從此以后，你的兵器庫(kù)里除了px, em, rem, 百分比這些常見兵器以及vw, vh這些新式武器之外，又多了一樣旁門暗器fr，要想用好grid，必須充分掌握fr。另一個(gè)重點(diǎn)是斜杠操作符，這可不是分?jǐn)?shù)哦。它表示的是起始位置和結(jié)束位置。比如說(shuō)3 / 4，這可不是四分之三的意思，這是指一個(gè)元素從第3行開始，到第4行結(jié)束，但又不包括第4行。 同樣，與grid相關(guān)聯(liá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è)寫起來(lái)又是一大篇文章。詳情還是參考csstrick上這篇文章，講得非常細(xì)致非常清楚。 ruby這個(gè)取值對(duì)于我們亞洲人來(lái)說(shuō)其實(shí)是非常有用的一個(gè)東西，但是目前除了Firefox以外其它瀏覽器對(duì)它的支持都不太好。簡(jiǎn)而言之，display: ruby;的作用就是可以做出下面這樣的東西： 很好的東西，對(duì)吧？如果可以用的話，對(duì)我國(guó)的小學(xué)教育可以有極大的促進(jìn)。但可惜我們現(xiàn)在暫時(shí)還用不了。 ruby這個(gè)詞在英語(yǔ)里的意思是紅寶石，但在日語(yǔ)里是ルビ，翻譯成中文是旁注標(biāo)記的意思，我們中文的旁注標(biāo)記就是漢語(yǔ)拼音?？梢韵胍?，這個(gè)標(biāo)準(zhǔn)的制定者肯定是日本人，如果是我們中國(guó)人的話，那這個(gè)標(biāo)簽就不是ruby，而是pinyin了。還有一個(gè)ruby語(yǔ)言，發(fā)明者也是一個(gè)日本人，和html里這個(gè)ruby是兩碼事，不要搞混了。 ruby的語(yǔ)法大致如下： 2015年8月6日，W3C的級(jí)聯(lián)樣式單（CSS）工作組（Cascading Style Sheets Working Group）發(fā)布了CSS網(wǎng)格布局模塊第一級(jí)（CSS Grid Layout Module Level 1）的工作草案。在這個(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的話，那我subgrid里還想再套subgrid怎么辦？subsubgrid嗎？況且，到底是grid: subgrid;還是display: subgrid;這個(gè)也沒(méi)有達(dá)成共識(shí)，關(guān)于此一系列的爭(zhēng)議，感興趣的同學(xué)可以看看這篇文章，英語(yǔ)好的可以看這篇。 display: list-item;和display: table;一樣，也是一幫痛恨各種html標(biāo)簽，而希望只使用 看，你用 屬性值一般是附屬于主值的，比如主值里設(shè)置了display: table;，就可以在子元素里使用display: table-row-group;等等屬性，不過(guò)并不絕對(duì)。關(guān)于它們的作用，主要參考主值就夠了。 詳情參考display: table;。 詳情參考display: table;。 詳情參考display: table;。 詳情參考display: table;。 詳情參考display: table;。這個(gè)屬性有必要詳細(xì)說(shuō)說(shuō)，因?yàn)樗耆梢远鄮?yīng)用，用在高度不固定元素的垂直居中上，詳情請(qǐng)見張?chǎng)涡竦倪@篇文章。效果如下圖所示： 詳情參考display: table;。 詳情參考display: table;。 詳情參考display: table;。 詳情參考display: ruby;。 詳情參考display: ruby;。 詳情參考display: ruby;。 詳情參考display: ruby;。 MDN里把它叫做 這大概是2018年年初最令人喜大普達(dá)的一件大事了：Chrome 65版本終于要支持display: contents;了！Firefox早就支持了，而Chrome直到現(xiàn)在才開始支持，這么重要的特性，它到底有什么功能呢？結(jié)果恐怕會(huì)令你大失所望。原來(lái)的布局是這樣的： 你給中間那個(gè)div加上display: contents;之后，它就變成這樣了： 這就是display: contents;的作用，它讓子元素?fù)碛泻透冈匾粯拥牟季址绞剑瑑H此而已。 這么著名的值還用多說(shuō)嗎？ 關(guān)于display: inline-block;的作用恐怕只要做過(guò)3天以上前端的工程師都應(yīng)該知道。什么也不說(shuō)了，上一張著名的圖片作總結(jié)吧： 你要能理解inline-block，你就能理解inline-table。在行內(nèi)顯示一個(gè)表格，就像這樣： 這個(gè)就不用多說(shuō)了吧？跟上面一樣，在行內(nèi)進(jìn)行彈性布局，參考display: flex;。 同上，在行內(nèi)進(jìn)行網(wǎng)格布局，參考display: grid;。 這些值不是display屬性的專利，幾乎其它任意屬性都可以用，列在這里湊個(gè)數(shù)。 繼承父元素的display屬性。 不管父元素怎么設(shè)定，恢復(fù)到瀏覽器最初始時(shí)的display屬性。 unset混合了inherit和initial。如果父元素設(shè)值了，就用父元素的設(shè)定，如果父元素沒(méi)設(shè)值，就用瀏覽器的缺省設(shè)定。直接看圖最明白： 以上就是在css里display的32種寫法。談了這么多，不知道你記住了多少呢？其實(shí)，單純理解每一個(gè)display屬性的取值都不難，難的是融會(huì)貫通，在恰當(dāng)?shù)牡胤竭\(yùn)用恰當(dāng)?shù)闹担吘刮覀兊哪康氖菫榱税汛a寫短，而不是把代碼寫長(zhǎng)。如果你怕記不太清的話，就請(qǐng)你收藏這篇小文，也許將來(lái)的某一天，你會(huì)用得著。 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112989.html 摘要：怎樣讓多個(gè)元素貼邊平分為什么會(huì)有這個(gè)疑問(wèn)呢首先說(shuō)明一下，接觸前端有一年的時(shí)間了，自認(rèn)為對(duì)靜態(tài)布局不在話下，果然，自負(fù)的人最容易被打臉吶，剛換了一份工作，公司對(duì)前端要求比較嚴(yán)格。
怎樣讓多個(gè)元素貼邊平分？
????????為什么會(huì)有這個(gè)疑問(wèn)呢？首先說(shuō)明一下，接觸前端有一年的時(shí)間了，自認(rèn)為對(duì)靜態(tài)布局不在話下，果然，自負(fù)的人最容易被打臉吶，剛換了一份工作，公司對(duì)前端要求比較嚴(yán)格。??????... 摘要：怎樣讓多個(gè)元素貼邊平分為什么會(huì)有這個(gè)疑問(wèn)呢首先說(shuō)明一下，接觸前端有一年的時(shí)間了，自認(rèn)為對(duì)靜態(tài)布局不在話下，果然，自負(fù)的人最容易被打臉吶，剛換了一份工作，公司對(duì)前端要求比較嚴(yán)格。
怎樣讓多個(gè)元素貼邊平分？
????????為什么會(huì)有這個(gè)疑問(wèn)呢？首先說(shuō)明一下，接觸前端有一年的時(shí)間了，自認(rèn)為對(duì)靜態(tài)布局不在話下，果然，自負(fù)的人最容易被打臉吶，剛換了一份工作，公司對(duì)前端要求比較嚴(yán)格。??????... 摘要：非常簡(jiǎn)潔易懂，排名不分先后，開整第一種常見的第二種第三種通過(guò)的第四種標(biāo)配標(biāo)配標(biāo)配三個(gè)標(biāo)配一起使用才能發(fā)揮作用第五種，不能大量使用，會(huì)影響性能第六種第七種第八種第九種第十種第十一
非常簡(jiǎn)潔易懂，排名不分先后，開整！HTML:
第一種：常見的margin
.main {
position: relative;
... 摘要：非常簡(jiǎn)潔易懂，排名不分先后，開整第一種常見的第二種第三種通過(guò)的第四種標(biāo)配標(biāo)配標(biāo)配三個(gè)標(biāo)配一起使用才能發(fā)揮作用第五種，不能大量使用，會(huì)影響性能第六種第七種第八種第九種第十種第十一
非常簡(jiǎn)潔易懂，排名不分先后，開整！HTML:
第一種：常見的margin
.main {
position: relative;
... 閱讀 3997·2021-11-22 15:31 閱讀 2541·2021-11-18 13:20 閱讀 3118·2021-11-15 11:37 閱讀 7053·2021-09-22 15:59 閱讀 750·2021-09-13 10:27 閱讀 3787·2021-09-09 09:33 閱讀 1450·2019-08-30 15:53 閱讀 2573·2019-08-29 15:37缺省就是這個(gè)值，最基本的塊級(jí)元素，屬于css入門初學(xué)者都知道的概念，只要是容器類型的元素基本都是這個(gè)值。除之外，還有到，，以及古代html語(yǔ)言當(dāng)中的，都屬于這一類型。
aaa
bbb
.a {
font-size: 36px;
display: run-in;
}
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;
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;
}.container::after {
content: "";
clear: both;
display: table;
}
這個(gè)標(biāo)簽嘛，所以我們想把所有的
標(biāo)簽都換成
標(biāo)簽。有什么好？無(wú)非就是能自動(dòng)換行而已，但其實(shí)你完全可以做一個(gè)標(biāo)簽，把它全都替換成display: block;也可以自動(dòng)折行，只不過(guò)略微麻煩而已。
來(lái)寫遍一切html的家伙搞出來(lái)的鬼東西，實(shí)際使用極少，效果就是這樣：
能實(shí)現(xiàn)的效果，他可以用
實(shí)現(xiàn)出來(lái)，就是這個(gè)作用。
屬性值
相關(guān)文章
讓多個(gè)元素貼邊平分布局
讓多個(gè)元素貼邊平分布局
內(nèi)部元素橫向&&垂直居中的15種常見寫法
內(nèi)部元素橫向&&垂直居中的15種常見寫法
發(fā)表評(píng)論
0條評(píng)論
alighters
男|高級(jí)講師
TA的文章
閱讀更多
鴻蒙輕內(nèi)核虛擬內(nèi)存基礎(chǔ)知識(shí)：虛擬內(nèi)存進(jìn)程空間編號(hào)
半月灣HmbCloud：美國(guó)洛杉磯三網(wǎng)CN2 GIA VPS;1Gbps帶寬,七折年付$69.99
基于Tableau探索分析世界銀行提供的關(guān)于科學(xué)技術(shù)的數(shù)據(jù)
虛擬主機(jī)32G有多少內(nèi)存-電腦有32G內(nèi)存，虛擬內(nèi)存應(yīng)該設(shè)為多大？
Epic v. Apple案審判結(jié)果：蘋果必須允許其他形式的應(yīng)用內(nèi)購(gòu)買
從自考大專到出走騰訊，我的經(jīng)歷值得每個(gè)測(cè)試人借鑒
sass的基本使用
前端每日實(shí)戰(zhàn)：43# 視頻演示如何用純 CSS 繪制一個(gè)充滿動(dòng)感的 Vue logo
最新活動(dòng)
閱讀需要支付1元查看
