溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css中的display屬性有什么作用

發(fā)布時(shí)間：2021-08-10 17:32:58 來(lái)源：億速云 閱讀：224 作者：chen 欄目：web開(kāi)發(fā)

本篇內(nèi)容主要講解“css中的display屬性有什么作用”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“css中的display屬性有什么作用”吧!

首先，所有主流瀏覽器都支持 display 屬性。其次，我們都知道display 屬性規(guī)定元素應(yīng)該生成的框的類型。默認(rèn)值：inline

我們常用的display屬性值有：

inline
block
inline-block
none
把 display 設(shè)置成 none 不會(huì)保留元素本該顯示的空間，但是 visibility: hidden 還會(huì)保留。

那么，display:inline、display:block和display:inline-block有什么區(qū)別呢？

代碼如下:


<style>
.inline{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;}
.block{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;}
.inline-block{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;}
</style>
<body>
<span class="inline">
inline
</span>inline
<span class="block">
block
</span> block
<span class="inline-block">
inline-block
</span>inline-block
</body>

我們發(fā)現(xiàn)內(nèi)聯(lián)對(duì)象`inline`給它設(shè)置屬性`height`和`width`是沒(méi)有用的，致使它變寬變大的
原因是內(nèi)部元素的寬高`+padding`。觀察inline對(duì)象的前后元素我們會(huì)發(fā)現(xiàn)`inline`不單獨(dú)占一行，
其它元素會(huì)緊跟其后。

而塊對(duì)象`block`是可以設(shè)置寬高的，但是它的實(shí)際寬高是本身寬高`+padding`。
觀察`block`的前后元素我們會(huì)發(fā)現(xiàn)`block`要單獨(dú)占一行。
然而，當(dāng)我們即需要div有寬高，又不希望它獨(dú)占一行怎么辦？

這個(gè)時(shí)候我們就需要使用`inline-block`了，再觀察一下上面的demo，我們會(huì)發(fā)現(xiàn)`inline-block`
即具有`block`的寬高特性又具有`inline`的同行元素特性。
然而，在IE6/7下padding對(duì)inline的寬高是對(duì)其沒(méi)影響的。

那么，display的其他屬性值呢？

list-item 此元素會(huì)作為列表顯示。

run-in此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。

compact CSS 中有值 compact，不過(guò)由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。

marker CSS 中有值 marker，不過(guò)由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。

table 此元素會(huì)作為塊級(jí)表格來(lái)顯示（類似table），表格前后帶有換行符。
inline-table 此元素會(huì)作為內(nèi)聯(lián)表格來(lái)顯示（類似table），表格前后沒(méi)有換行符。
table-row-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似tbody）
table-header-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似thead）
table-footer-group： 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似tfoot）
table-row 此元素會(huì)作為一個(gè)表格行顯示（類似 tr ）。
table-column-group 此元素會(huì)作為一個(gè)或多個(gè)列的分組來(lái)顯示（類似 colgroup ）。
table-column 此元素會(huì)作為一個(gè)單元格列顯示（類似 col ）
table-cell 此元素會(huì)作為一個(gè)表格單元格顯示（類似 td 和 th）
table-caption 此元素會(huì)作為一個(gè)表格標(biāo)題顯示（類似 caption）

到此，相信大家對(duì)“css中的display屬性有什么作用”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手