css display如何控制隱藏和顯示

這篇“css display如何控制隱藏和顯示”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“css display如何控制隱藏和顯示”文章吧。

CSS Display 設(shè)置

CSS 中，Display 屬性可以接受以下值：

• none

• inline

• block

• inline-block

• table

• table-cell

• table-row

• inline-table

• flex

• grid

值得注意的是，不同的元素支持的 Display 屬性也不同，這就需要根據(jù)實(shí)際情況來(lái)選擇合適的屬性值。

CSS Display none

使用 Display:none 可以將元素完全隱藏。這意味著該元素不占用頁(yè)面中的任何空間，也不會(huì)對(duì)其他元素造成影響。這個(gè)特性對(duì)于需要?jiǎng)討B(tài)顯示或隱藏 HTML 元素的 Web 開(kāi)發(fā)中非常有用。

CSS Display inline

使用 Display:inline 可以將元素顯示為行內(nèi)元素，即它們會(huì)像普通的文本一樣排列在同一行上。它會(huì)忽略該元素的寬度和高度屬性，而只根據(jù)內(nèi)容的大小而顯示。

CSS Display block

使用 Display:block 可以將元素顯示為塊級(jí)元素，即它們會(huì)在頁(yè)面中獨(dú)占一行。這個(gè)特性非常有用，因?yàn)樗梢宰屛覀儗?duì) HTML 元素進(jìn)行更具體的布局。

CSS Display inline-block

使用 Display:inline-block 可以將元素同時(shí)顯示為行內(nèi)元素和塊級(jí)元素的特點(diǎn)，即它們會(huì)在同一行上排列，但可以像塊級(jí)元素一樣設(shè)置大小等屬性。

CSS Display table

使用 Display:table 可以將元素顯示為表格的形式。這意味著該元素將包含表頭、表體和表腳，并且可以使用表格的相關(guān)屬性進(jìn)行設(shè)置。

CSS Display table-cell

使用 Display:table-cell 可以將元素顯示為表格單元格的形式，即該元素將成為表格中的一個(gè)單元格。它可以在列和行之間自動(dòng)調(diào)整寬度和高度，因此非常有用。

CSS Display table-row

使用 Display:table-row 可以將元素顯示為表格行的形式，即該元素將成為表格中的一個(gè)行。它也是非常有用的，因?yàn)樗梢宰屇銓?duì)表格行進(jìn)行更具體的布局。

CSS Display inline-table

使用 Display:inline-table 可以將元素同時(shí)顯示為行內(nèi)元素和表格的形式。這就可以讓我們?cè)谝粋€(gè)行內(nèi)元素中創(chuàng)建表格。

CSS Display flex

使用 Display:flex 可以讓元素成為彈性盒子。這意味著該容器內(nèi)的元素可以按照你的意愿進(jìn)行對(duì)齊、排列和增加/刪除。

CSS Display grid

使用 Display:grid 可以讓元素成為網(wǎng)格容器。這意味著你可以將頁(yè)面劃分成一個(gè)網(wǎng)格，并且可以按照不同的大小和位置來(lái)放置元素，這是極其有用的。

CSS Display 隱藏和顯示元素

CSS Display 的一個(gè)重要特性就是可以用來(lái)隱藏或顯示 HTML 元素。常常使用 Display: None 來(lái)實(shí)現(xiàn)元素的隱藏和顯示。

當(dāng)如下代碼生效時(shí)，該元素將被隱藏：

display: none;

當(dāng)需要顯示該元素時(shí)，只需將 Display 屬性設(shè)置為合適的值，例如：

display: block;

這就可以讓元素重新顯示出來(lái)了。

以上就是關(guān)于“css display如何控制隱藏和顯示”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。