【CSS】fit-content, min-content, max-content, fill-available 詳解與異同

来源:https://www.cnblogs.com/Jasper0/archive/2022/05/17/16282912.html
-Advertisement-
Play Games

本文對 CSS 中有關大小的四種自適應大小表現進行瞭解釋與區別,它們分別是 fit-content, min-content, max-content, fill-available。相對而言,本文較為嚴謹,即儘量地無遺漏、無歧義。在嚴謹的同時,也做到儘可能通俗易懂。 ...


設定

  • 為了描述方面,我們將以 width 舉例
  • 設定三層元素,他們層層嵌套,分別稱作:inner, container, outer。如下所示:
    outer container inner
  • 三層元素都有幾種情況:
    • outer
      • 有限制 例如,設置了 width 或 max-width 為固定值
      • 無限制 例如,將 width 設置為根據內容變化的值,且長度可以無限增加
    • container
      fit-content, min-content, max-content, fill-available 四種。其中 fit-content, min-content, max-content 為 width, height 等 CSS 屬性的可選值,fill-available 是指 width, height 等為 auto 時的表現。
    • inner
      • 固定寬度 設置了固定的 width
      • 文本 該層為可換行的文本,其寬度可長可短。
      • 隨父元素變化 例如 width 為 100%
  • 文中會出現 inner + container < outer 這種類似表達式的表述方式。這裡 inner 指其包括 margin 在內的總寬度;container 指其 padding + border + margin 的寬度,不含 width;outer 在有限制時,指其達到限制時 width 的寬度,在無限制時,表示無限大。

fit-content, min-content, max-content

首先,當 container 設置為這三個值時,不管其他情況如何變化,其寬度始終貼合 inner,即使 inner + container 的寬度超出了 outer 的限制也是如此(超出時,網頁的表現由 overflow 屬性決定)。三者的不同體現在對 inner 寬度的影響上,下麵對此分類討論。

  • inner 為固定寬度 此時三個屬性表現完全相同,inner 為其設定寬度
  • inner 隨父元素變化 此時三個屬性表現完全相同。 inner 為其最小寬度,即:若 min-width 為固定值,則 inner 寬度為該值;否則,inner 寬度為 0
  • inner 為可換行文本
    • min-content inner 為文本最小寬度(儘可能換行)
    • max-content inner 為文本最大寬度(完全不換行)
    • fit-content 在不超出 outer 的情況下,inner 儘可能寬。而如果 inner 為文本最小寬度時也超出了 outer,那 inner 就是文本最小寬度。更明確的表述如下:
      if (文本最大寬度 + container < outer) {
        inner = 文本最大寬度
      } else if (文本最小寬度 + container > outer) {
        inner = 文本最小寬度
      } else {
        inner = outer - container
      }
      

fill-available

  • outer 為固定寬度 container 貼合 outer 內部,inner 可能超出 container
  • 否則,inner 和 container 的表現與 max-content 相同(此時 fit-content 的表現也與 max-content 相同)

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 查看PostgreSQL鎖表信息 一、查詢PG_STAT_ACTIVITY的信息 SELECT * FROM pg_stat_activity where datname='bms' and wait_event_type='Lock' 二、通過pid解鎖死鎖信息 select pg_cancel_ ...
  • 本文介紹什麼是 SQL INNER JOIN 聯結,為什麼使用聯結,如何編寫使用聯結的 SELECT 語句。並講述了一些關係資料庫設計的基本知識,包括等值聯結(也稱為內聯結)這種最常用的聯結。 一、聯結 SQL 最強大的功能之一就是能在數據查詢的執行中聯結(join)表。聯結是利用 SQL 的 SE ...
  • HMS Core 3D Engine是一款高性能、高畫質、高可靠的實時3D引擎,旨在幫助開發者製作高品質的3D應用。3D Engine將為您提供可編程渲染管線,多維粒子系統,3D角色與動畫,超大地形地貌,智能尋路導航等諸多實用功能,以及便捷高效的可視化開發工具。 3D Engine渲染效果 千萬級面 ...
  • 針對傳統記憶體方案及管理機制的不足,OpenHarmony 構建了一套完善的記憶體解決方案——ESWAP。 ...
  • 本期 OpenHarmony 開發者故事,我們採訪了 OpenHarmony 啟動子系統的負責人,OpenHarmony PMC 委員會推舉的“代碼貢獻月度之星”——熊磊。 ...
  • 5月17日,2022年搜狐科技峰會成功舉辦,峰會匯聚各界大咖,共同探討AI 技術的深入應用以及行業數字化的發展趨勢。華為終端雲服務應用生態BU總裁望岳發表題為《使能AI智慧體驗,共建創新應用生態》主題演講。 望岳表示,經過多年的發展迭代,華為移動服務HMS生態已成為全球第三大移動應用生態:截止今天, ...
  • 5月18日(周三)晚上19:00,第一期戰“碼”先鋒直播,我們邀請到了潤和資深軟體開發工程師趙海鵬老師,在直播間與大家分享《如何成為一名優秀的OpenHamrony 貢獻者?》 ...
  • HUAWEI Developer Day(簡稱HDD),是華為開發者聯盟與廣大開發者深度交流的平臺。圍繞移動終端的最新技術和產品形態,持續向廣大開發者傳遞華為終端的最新產品和開放服務能力,結合最新的行業發展趨勢,攜手開發者共同打造面向終端消費者的卓越用戶體驗。 5月24日18:50-21:05,HD ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...