從 Chrome 115 開始,CSS 顯示屬性有多個值。 display: flex 變成 display: block flex,display: block 變成 display: block flow。您知道的單一值現在被視為遺留值,但保留在瀏覽器中以實現向後相容性。
簡而言之:它改變了我們解釋盒子模型等事物的方式。該規範仍然是 CR 快照,這意味著 W3C 會從實施者收集經驗來最終確定該標準。因此,其中一些可能仍會發生變化。
重做將顯示類型分為兩部分:外顯示類型和內顯示類型。
外部顯示類型決定主框本身如何參與流佈局。
內部顯示類型決定了其後代框的佈局方式(替換元素除外,這有點複雜)。
因此 display: flex 變成了 display: block flex 意味著外部顯示類型是區塊(它在外部表現為區塊元素),但其子元素根據 flex 佈局進行渲染。
這與先前的行為相同,但透過此更改,我們可以討論 display 屬性對子元素和周圍元素的影響。在我看來,這種心理模型可以更輕鬆地創建更可預測的佈局,並且更容易解釋不同的佈局模式及其效果。
在較新的課程或教程中,對盒子模型的良好解釋不僅需要涵蓋邊距、邊框、填充、寬度和高度,還需要涵蓋盒子大小和顯示屬性。
正如已經提到的,現在有些舊財產已經成為遺產。以下是所有有效屬性:
對於多值語法顯示:outer-type inside-type 有效的外部類型為block、inline和run-in。有效的內部顯示類型為flow、flow-root、table、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 用來顯示屬性的多關鍵字值。
就這樣了,夥計們!
非常感謝您的閱讀!
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3