全新的顯示屬性。

從 Chrome 115 開始，CSS 顯示屬性有多個值。 display: flex 變成 display: block flex，display: block 變成 display: block flow。您知道的單一值現在被視為遺留值，但保留在瀏覽器中以實現向後相容性。

為什麼遲到這麼久？

簡而言之：它改變了我們解釋盒子模型等事物的方式。該規範仍然是 CR 快照，這意味著 W3C 會從實施者收集經驗來最終確定該標準。因此，其中一些可能仍會發生變化。

重做將顯示類型分為兩部分：外顯示類型和內顯示類型。

外部顯示類型決定了主框本身如何參與流佈局。

內部顯示類型決定了其後代框的佈局方式（替換元素除外，這有點複雜）。

因此 display: flex 變成了 display: block flex 意味著外部顯示類型是 block（它在外部表現為區塊元素），但其子元素根據 flex 佈局進行渲染。

這與先前的行為相同，但透過此更改，我們可以討論 display 屬性對子元素和周圍元素的影響。在我看來，這種心理模型可以更輕鬆地創建更可預測的佈局，並且更簡單地解釋不同的佈局模式及其效果。

在較新的課程或教程中，對盒子模型的良好解釋不僅需要涵蓋邊距、邊框、填充、寬度和高度，還需要涵蓋盒子大小和顯示屬性。

顯示屬性的有效值是什麼？

正如已經提到的，一些舊房產現在已經成為遺產。以下是所有有效屬性：

對於多值語法顯示：outer-type inside-type 有效的外部型別為 block、inline 和 run-in。有效的內部顯示類型為flow、flow-root、table、flex、grid 和flex、

grid

和flex、grid 和flex、

grid

和

flex

、grid 和flex、grid 和紅寶石。

還有有效的單一值：

list-item

、

contents

和
none
。

最重要的是，CSS 有一些仍然有效的內部顯示值。使用表格或 ruby​​ 顯示類型時將計算這些值。 以下組合現已成為舊版：inline-block、inline-table、inline-flex 和 inline-grid 。它們可以替換為多值等價物，例如：display: inline flex。 最新版本的現代瀏覽器支援多值：https://caniuse.com/mdn-css_properties_display_multi-keyword_values Caniuse 用來顯示屬性的多關鍵字值。 就這些了，各位！ 非常感謝您的閱讀！

以上是全新的顯示屬性。的詳細內容。更多資訊請關注PHP中文網其他相關文章！