内在与外在尺寸

在CSS3中，元素的尺寸不仅由直观的width和height决定，还受到盒模型、内容流、计算方式等多重因素影响。理解内在尺寸（intrinsic size）与外在尺寸（extrinsic size）的差异，能更精准地控制布局行为。

内在尺寸：由内容决定

内在尺寸是元素根据其内容自动计算的尺寸，无需显式声明。例如，一个<div>包含文本时，其宽度默认会撑满父容器，高度则由文本行数决定。以下示例展示了典型的内联元素和块级元素的内在尺寸表现：

<div class="intrinsic">
  <span>这是一段内联文本，宽度由内容决定</span>
  <p>块级元素默认宽度占满父容器，高度由内容撑开</p>
</div>

CSS3引入了min-content、max-content等关键字，允许开发者显式引用内容的固有尺寸：

.intrinsic {
  width: max-content; /* 宽度等于内容最长行的长度 */
  border: 1px dashed red;
}

外在尺寸：由上下文强制约束

外在尺寸通过显式设置width、height或外部容器约束来定义。例如，Flex或Grid布局中的子项尺寸可能由父容器分配：

.container {
  display: grid;
  grid-template-columns: 100px 1fr; /* 第一列固定100px，第二列自适应 */
}
.item {
  height: 50px; /* 显式设置外在高度 */
}

百分比单位是典型的外在尺寸依赖：

.box {
  width: 50%; /* 相对于父容器的宽度计算 */
  height: calc(100vh - 20px); /* 依赖视口高度 */
}

盒模型对尺寸的影响

CSS3的box-sizing属性改变了尺寸计算方式：

• content-box（默认）：width/height仅包含内容区
• border-box：width/height包含内边距和边框

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px; /* 不会增加实际渲染宽度 */
}

特殊场景下的尺寸计算

替换元素的尺寸

像<img>这样的替换元素，其默认尺寸由以下优先级决定：

1. 显式设置的width/height属性
2. 图像自身的像素尺寸
3. 父容器约束

img {
  width: auto; /* 保持原始比例 */
  max-width: 100%; /* 防止溢出容器 */
}

Flex/grid项的尺寸

在弹性布局中，flex-basis定义了项目的初始尺寸：

.flex-item {
  flex: 1 0 200px; /* 基础尺寸200px，可扩展但不可收缩 */
}

响应式设计中的尺寸策略

媒体查询常与相对单位配合实现响应式尺寸：

.card {
  width: clamp(300px, 50vw, 600px); /* 在300px-600px之间动态调整 */
  aspect-ratio: 16/9; /* 固定宽高比 */
}

尺寸与溢出的关系

明确尺寸后需处理内容溢出的情况：

.scroll-box {
  width: 200px;
  height: 150px;
  overflow: auto; /* 自动显示滚动条 */
}

新兴CSS特性对尺寸的影响

CSS Grid的minmax()函数允许更灵活的尺寸定义：

.grid-container {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

CSS容器查询（Container Queries）实现了基于容器而非视口的尺寸响应：

@container (min-width: 300px) {
  .component {
    width: 50%;
  }
}