CSS 盒子大小

CSS 盒模型尺寸 (CSS box sizing) 模組使你能夠指定元素如何適應其內容或如何適應特定的佈局上下文。它定義了尺寸、最小尺寸和最大尺寸屬性，並用代表基於內容的固有尺寸和基於上下文的外在尺寸的關鍵字擴充套件了 CSS 尺寸屬性。

元素可以是外在尺寸或固有尺寸。 CSS 盒模型定義了頁面相關的屬性，用於明確或“外在地”設定元素的尺寸，包括 width、height、padding 和 margin 屬性（以及在CSS 背景和邊框模組中定義的 border 屬性）。此 CSS 盒模型尺寸模組擴充套件了 CSS 盒模型模組，以使元素能夠固有尺寸 — 根據其內容的大小設定元素大小。

本模組中引入的尺寸值允許具有尺寸限制的元素採用明確的固有尺寸，就好像它們的內聯內容的寬度和高度與指定的明確固有尺寸匹配一樣，而不是像它們為空時那樣調整尺寸。

此模組還引入了為元素框定義寬高比的功能，這意味著只要其中一個尺寸是自動調整的，瀏覽器就可以自動調整元素的尺寸以保持指定的寬高比。

邏輯屬性和值模組擴充套件了盒模型和盒模型尺寸模組中可用的屬性，以包含相應物理盒模型和固有盒模型尺寸屬性的寫入模式相關等效項。

fit-content()

術語表

指南

理解縱橫比: 瞭解 aspect-ratio 屬性，討論替換和非替換元素的寬高比，並研究一些常見的寬高比用例。
CSS 盒模型簡介: 解釋了 CSS 的基本概念之一：盒模型。此模型定義了 CSS 如何佈局元素，包括其內容、內邊距、邊框和外邊距區域。
掌握外邊距摺疊: 有時，兩個相鄰的 margin 會合併成一個。本文描述了控制何時以及為何會發生這種情況的規則，以及如何控制它。
視覺格式化模型: 解釋了視覺格式化模型。
沿主軸控制彈性專案的比例: 解釋了固有尺寸，作為理解如何使用 flex-grow、flex-shrink 和 flex-basis 控制主軸上彈性專案的尺寸和靈活性的前奏。