」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 全新的顯示屬性。

全新的顯示屬性。

發佈於2024-07-31
瀏覽:131

The All-New display Property.

從 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 有效的外部類型為blockinlinerun-in。有效的內部顯示類型為flowflow-roottableflexgrid紅寶石

還有有效的單一值:list-itemcontentsnone

最重要的是,CSS 有一些仍然有效的內部顯示值。使用表格或 ruby​​ 顯示類型時將計算這些值。

以下組合現已成為舊版:inline-blockinline-tableinline-flexinline-grid 。它們可以替換為多值等價物,例如:display: inline flex.

現代瀏覽器的最新版本支援多值:https://caniuse.com/mdn-css_properties_display_multi-keyword_values

Caniuse 用來顯示屬性的多關鍵字值。

就這樣了,夥計們!

非常感謝您的閱讀!

版本聲明 本文轉載於:https://dev.to/manojgohel/the-all-new-display-property-3572?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • extjs API 查詢參數範例
    extjs API 查詢參數範例
    API 查詢 參數是附加到 API 請求 URL 的鍵值對,用於傳送附加資訊至伺服器。它們允許用戶端(例如 Web 瀏覽器或應用程式)在向伺服器發出請求時指定某些條件或傳遞資料。 查詢參數加入到 URL 末端問號 (?) 後。每個參數都是鍵值對,鍵和值之間以等號 (=) 分隔。如果有多個查詢參數,...
    程式設計 發佈於2024-11-05
  • 如何解決Go中從不同套件匯入Proto檔案時出現「Missing Method Protoreflect」錯誤?
    如何解決Go中從不同套件匯入Proto檔案時出現「Missing Method Protoreflect」錯誤?
    如何從不同的套件導入Proto 檔案而不遇到「Missing Method Protoreflect」錯誤在Go 中,protobuf 常用於資料序列化。將 protobuf 組織到不同的套件中時,可能會遇到與缺少 ProtoReflect 方法相關的錯誤。當嘗試將資料解組到單獨套件中定義的自訂 p...
    程式設計 發佈於2024-11-05
  • 為什麼MySQL在查詢「Field = 0」非數位資料時傳回所有行?
    為什麼MySQL在查詢「Field = 0」非數位資料時傳回所有行?
    不明確的查詢:理解為什麼MySQL 回傳「Field=0」的所有行在MySQL 查詢領域,一個看似無害的比較,例如“SELECT * FROM table WHERE email=0”,可能會產生意外的結果。它沒有按預期過濾特定行,而是返回表中的所有記錄,從而引發了對資料安全性和查詢完整性的擔憂。 ...
    程式設計 發佈於2024-11-05
  • 伺服器發送事件 (SSE) 的工作原理
    伺服器發送事件 (SSE) 的工作原理
    SSE(服务器发送事件)在 Web 开发领域并未广泛使用,本文将深入探讨 SSE 是什么、它是如何工作的以及它如何受益您的申请。 什么是上交所? SSE 是一种通过 HTTP 连接从服务器向客户端发送实时更新的简单而有效的方法。它是 HTML5 规范的一部分,并受到所有现代 Web ...
    程式設計 發佈於2024-11-05
  • 如何從字串 TraceID 建立 OpenTelemetry Span?
    如何從字串 TraceID 建立 OpenTelemetry Span?
    從字串 TraceID 建構 OpenTelemetry Span要建立 Span 之間的父子關係,必須在上下文傳播不可行的情況下使用標頭。在這種情況下,追蹤 ID 和跨度 ID 包含在訊息代理程式的標頭中,這允許訂閱者使用父追蹤 ID 建立新的跨度。 解決方案以下步驟可以使用追蹤ID 在訂閱者端建...
    程式設計 發佈於2024-11-05
  • 如何在gRPC中實現伺服器到客戶端的廣播?
    如何在gRPC中實現伺服器到客戶端的廣播?
    gRPC 中的廣播:伺服器到客戶端通訊建立gRPC 連線時,通常需要將事件或更新從伺服器廣播到客戶端連接的客戶端。為了實現這一點,可以採用各種方法。 Stream Observables常見的方法是利用伺服器端流。每個連線的客戶端都與伺服器建立自己的流。然而,直接訂閱其他伺服器客戶端流是不可行的。 ...
    程式設計 發佈於2024-11-05
  • 為什麼填入在 Safari 和 IE 選擇清單中不起作用?
    為什麼填入在 Safari 和 IE 選擇清單中不起作用?
    在Safari 和IE 的選擇清單中不顯示填充儘管W3 規範中沒有限制,但WebKit 瀏覽器不支援選擇框中的填充,包括Safari和Chrome。因此,這些瀏覽器中不應用填充。 要解決此問題,請考慮使用 text-indent 而不是 padding-left。透過相應增加選擇框的寬度來保持相同的...
    程式設計 發佈於2024-11-05
  • 在 Spring Boot 中建立自訂註解的終極指南
    在 Spring Boot 中建立自訂註解的終極指南
    Such annotations fill the entire project in Spring Boot. But do you know what problems these annotations solve? Why were custom annotations introduce...
    程式設計 發佈於2024-11-05
  • 為什麼 Elixir 在非同步處理方面比 Node.js 更好?
    為什麼 Elixir 在非同步處理方面比 Node.js 更好?
    简单回答:Node.js 是单线程的,并拆分该单线程来模拟并发,而 Elixir 利用了 Erlang 虚拟机 BEAM 原生的并发和并行性,同时执行进程。 下面,我们将更深入地了解这种差异,探索两个关键概念:Node.js 事件循环和 Elixir 的 BEAM VM 和 OTP。这些元素对于理解...
    程式設計 發佈於2024-11-05
  • AngularJS $watch 如何取代動態導航高度調整中的計時器?
    AngularJS $watch 如何取代動態導航高度調整中的計時器?
    避免 AngularJS 的高度監視計時器當導航高度是動態時,AngularJS 程式設計師經常面臨響應式導航的挑戰。這就導致需要調整內容的 margin-top 值以回應導航高度的變化。 以前,使用計時器來偵測導航高度的變化,但這種方法有缺點:使用計時器和調整內容的 margin-top 出現延遲...
    程式設計 發佈於2024-11-05
  • 從零到 Web 開發人員:掌握 PHP 基礎知識
    從零到 Web 開發人員:掌握 PHP 基礎知識
    掌握PHP基礎至關重要:安裝PHP建立PHP檔案運行程式碼理解變數和資料類型使用表達式和運算子建立實際專案以提高技能 PHP開發入門:掌握PHP基礎PHP是一種用途廣泛、功能強大的腳本語言,用於創建動態且互動式Web應用程式。對於初學者來說,掌握PHP的基本知識至關重要。 一、安裝PHP在本地開發機...
    程式設計 發佈於2024-11-05
  • 緩衝區:Node.js
    緩衝區:Node.js
    Node.js 中緩衝區的簡單指南 Node.js 中的 Buffer 用於處理原始二進位數據,這在處理流、文件或網路數據時非常有用。 如何建立緩衝區 來自字串: const buf = Buffer.from('Hello'); 分配特定大小的Buffer...
    程式設計 發佈於2024-11-05
  • 掌握 Node.js 中的版本管理
    掌握 Node.js 中的版本管理
    作為開發者,我們經常遇到需要不同 Node.js 版本的專案。對於可能不經常參與 Node.js 專案的新手和經驗豐富的開發人員來說,這種情況都是一個陷阱:確保每個專案使用正確的 Node.js 版本。 在安裝依賴項並執行專案之前,驗證您的 Node.js 版本是否符合或至少相容專案的要求至關重要...
    程式設計 發佈於2024-11-05
  • 如何在 Go 二進位檔案中嵌入 Git 修訂資訊以進行故障排除?
    如何在 Go 二進位檔案中嵌入 Git 修訂資訊以進行故障排除?
    確定Go 二進位檔案中的Git 修訂版部署程式碼時,將二進位檔案與建置它們的git 修訂版關聯起來會很有幫助排除故障的目的。然而,直接使用修訂號更新原始程式碼是不可行的,因為它會改變原始程式碼。 解決方案:利用建造標誌解決此挑戰的方法包括利用建造標誌。透過使用建置標誌在主套件中設定當前 git 修訂...
    程式設計 發佈於2024-11-05
  • 常見 HTML 標籤:視角
    常見 HTML 標籤:視角
    HTML(超文本標記語言)構成了 Web 開發的基礎,是互聯網上每個網頁的結構。透過了解最常見的 HTML 標籤及其高級用途,到 2024 年,開發人員可以創建更有效率、更易於存取且更具視覺吸引力的網頁。在這篇文章中,我們將探討這些 HTML 標籤及其最高級的用例,以協助您提升 Web 開發技能。 ...
    程式設計 發佈於2024-11-05

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3