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 控制主轴上弹性项目的尺寸和灵活性的前奏。