CSS Display屬性

如何使用displayCSS中的屬性

display對象的屬性決定瀏覽器如何呈現它。

這是一個非常重要的屬性,並且可能是您可以使用的值數量最多的屬性。

這些值包括:

  • block
  • inline
  • none
  • contents
  • flow
  • flow-root
  • table(以及所有table-*那些)
  • flex
  • grid
  • list-item
  • inline-block
  • inline-table
  • inline-flex
  • inline-grid
  • inline-list-item

加上您不太可能使用的其他內容,例如ruby

選擇這些選項中的任何一個都將大大改變帶有元素及其子元素的瀏覽器的行為。

在這篇文章中,我將分析其他地方未涵蓋的最重要的內容:

  • block
  • inline
  • inline-block
  • none

我在其他帖子中介紹了其他人:

inline

內聯是CSS中每個元素的默認顯示值。

除某些元素外,所有HTML標記均以開箱即用的方式內聯顯示divpsection,它們被設置為block由用戶代理(瀏覽器)提供。

內聯元素未應用任何邊距或填充。

高度和寬度相同。

能夠添加它們,但頁面中的外觀不會改變-它們是由瀏覽器自動計算和應用的。

inline-block

如同inline,但inline-block widthheight將按照您指定的方式應用。

block

如前所述,通常某些元素以行內顯示,但某些元素除外,包括

  • div
  • p
  • section
  • ul

設置為block通過瀏覽器。

display: block,元素彼此垂直堆疊,每個元素佔據100%的頁面。

分配給widthheight如果您設置了屬性,則它們也會受到尊重marginpadding

none

使用display: none使元素消失。它仍然存在於HTML中,但在瀏覽器中不可見。

免費下載我的CSS手冊


更多CSS教程: