CSS 子元素宽高继承与盒模型规则
CSS 中子元素的宽高表现并非单纯 “继承父元素”，而是由元素类型（块级 / 行内）、父元素尺寸定义方式、盒模型模式、布局模型（正常流 /flex/grid） 共同决定。
一、子元素宽度：核心看 “元素类型” 与 “可用空间”
宽度的关键误区：“块级元素默认继承父元素 100% 宽度” 是错误的，实际是 “填充父元素的可用空间”，且不同元素类型行为完全不同。
1. 块级元素（如 div、p、section）的宽度规则
块级元素的默认宽度是 width: auto，具体表现为 “填充父元素的内容区可用宽度”（即父元素 content-box 宽度减去子元素自身的 margin，但不包含 padding 和 border），而非 “显式继承父元素宽度”。
- 场景 1：父元素宽度明确（如 px、rem）子元素若未设置 width，会自动填满父元素的内容区宽度（例如父元素 width: 200px，子元素默认宽度就是 200px，即使子元素加 padding: 10px，内容区宽度仍为 200px，但总占地宽度会变成 200px + 20px（左右padding）= 220px，可能溢出）。若子元素显式设置 width: 100%，则宽度等于父元素的 content-box 宽度（此时加 padding/border 会直接溢出，除非用 border-box）。
- 场景 2：父元素宽度不明确（如 width: auto、inline-block）父元素宽度由自身内容撑开（如包裹子元素），此时子元素的 width: auto 会跟随父元素的 “动态宽度”，仍保持填充父元素内容区（例如父元素是 inline-block，子元素会和父元素一起被内容 “撑开”）。
2. 行内元素（inline，如 span、a）的宽度规则
完全不支持 “宽度继承” 或手动设置宽度：
宽度默认由自身内容决定（文字 / 图片长度），即使设置 width: 100px 也无效。
若想让行内元素支持宽度，需先改为 inline-block 或 block 类型。
3. 行内块元素（inline-block，如 button、input）的宽度规则
默认宽度由内容决定（类似 inline），但支持手动设置宽度：
若设置 width: 100%，行为与块级元素一致（继承父元素 content-box 宽度，需注意 padding/border 溢出问题）。
二、子元素高度：核心看 “父元素高度是否可计算”
高度的关键规则：height: 100% 生效的前提是 “父元素高度是一个确定的值”，且存在 “传递性”（祖父元素也需明确高度）。
1. height: 100% 生效的 3 个条件
条件 1：父元素必须有明确的高度（如 height: 200px、height: 50vh，不能是 height: auto 或未设置）。
条件 2：若父元素的高度是百分比（如 height: 50%），则祖父元素也必须有明确高度（否则父元素高度仍为 auto，子元素 100% 无效）。
示例（失效场景）：
.grandpa { /* 未设置高度，默认auto */ }
.parent { height: 50%; /* 父元素高度依赖祖父，实际仍为auto */ }
.child { height: 100%; /* 无效，高度由内容撑开 */ }
条件 3：子元素不能是 inline 类型（inline 元素不支持高度设置）。
2. 父元素高度 “不可计算” 时的表现
父元素高度为 auto（由内容撑开，如仅包含文字、图片），无论子元素是否设置 height: 100%，高度都由子元素自身内容决定（文字行数、图片高度等）。示例：
.parent { /* 未设置高度，高度由子元素内容撑开 */ }
.child { height: 100%; /* 无效，高度=自身文字高度 */ }
3. 现代布局（flex/grid）对高度的特殊影响
在 flex 或 grid 布局中，height: 100% 的规则会 “放宽”—— 即使父元素高度为 auto，子元素也会自动填充父元素的高度（因 flex/grid 会默认拉伸子元素）：
.parent {display: flex;height: auto; /* 父元素高度由其他子元素撑开 */
}
.child {height: 100%; /* 生效，子元素会拉伸到父元素的高度 */
}
三、盒模型：决定 “宽高的计算范围”
box-sizing 直接影响 width/height 包含的范围，是解决 “宽度溢出” 的核心属性。
| 盒模型模式 | 宽度计算方式 | 高度计算方式 | 关键影响（子元素 100% 宽度时） |
|---|---|---|---|
| 标准盒模型（默认）content-box | 宽度 = content-width（仅内容区） | 高度 = content-height（仅内容区） | 子元素的 padding/border 会额外增加总宽度，容易溢出父元素。 |
| 怪异盒模型 border-box | 宽度 = border + padding + content-width | 高度 = border + padding + content-height | 子元素的 padding/border 包含在 width 内，总宽度不会超过父元素，避免溢出。 |
示例（解决溢出）：
.parent {width: 200px;
}
.child {width: 100%;padding: 10px;border: 2px solid #000;box-sizing: border-box; /* 总宽度=200px（包含padding和border），不溢出 */
}
四、常见问题与解决方案（补充版）
1. 问题 1：子元素高度 100% 无效
原因：父元素高度为 auto，或百分比高度未 “传递” 到父元素。
解决方案：
给父元素设置明确高度（如 height: 300px、height: 100vh）；
若父元素需动态高度，改用 flex/grid 布局；
用 min-height 替代 height（如父元素 min-height: 500px，子元素 height: 100% 仍生效）。
2. 问题 2：子元素宽度溢出父元素
原因：标准盒模型下，padding/border 额外增加宽度；或子元素有 margin-left/margin-right。
解决方案：
给子元素加 box-sizing: border-box；
用 calc() 计算宽度（如 width: calc(100% - 20px)，减去 padding/margin 总和）；
避免子元素同时设置 width: 100% 和 margin（可改用父元素 padding 替代子元素 margin）。
3. 问题 3：inline 元素无法设置宽高
原因：inline 元素的宽高由内容决定，不支持手动设置。
解决方案：
改为 inline-block（保留行内特性，支持宽高）；
改为 block（独占一行，支持宽高）。
五、核心规则总结表（新增维度）
| 场景 | 子元素宽度表现 | 子元素高度表现 | 关键注意点 |
|---|---|---|---|
| 父元素宽高明确(px) 子元素块级 + 默认 width | 填充父元素 content 区宽度（auto） | 由自身内容决定（height: auto） | 加 padding 会溢出，需用 border-box。 |
| 父元素宽高明确 子元素设置 width:100%+height:100% | 等于父元素 content 宽度（content-box） | 等于父元素 content 高度（content-box） | 标准盒模型下，padding/border 会导致溢出。 |
| 父元素高度 auto 子元素 height:100% | 正常填充宽度 | 无效，由自身内容决定 | 改用 flex/grid 或给父元素设明确高度。 |
| 子元素为 inline 父元素宽高明确 | 由自身内容决定（width 无效） | 由自身内容决定（height 无效） | 需改为 inline-block/block 才能设置宽高。 |
| 父元素 flex 布局 子元素 height:100% | 填充 flex 容器宽度（默认拉伸） | 生效，拉伸到容器高度 | 无需父元素明确高度，flex 自动拉伸。 |
通过以上补充，能更全面覆盖 “不同元素类型、现代布局、百分比传递性” 等场景，避免因规则遗漏导致的布局异常。核心原则：宽度看元素类型，高度看父元素是否可计算，盒模型控制计算范围。