未设置宽度的子元素在 CSS 中的宽度计算是通过考虑父元素的宽度、内边距和外边距来确定的。

1. 元素的基础知识

• 块级元素：在默认情况下，块级元素会占据其父元素的全部可用宽度。未设置宽度的块级元素会尝试填满其父元素的宽度。
• 内边距（padding）：内边距是元素内容与元素边框之间的空间。它增加了内容的实际显示区域，但不会影响内容区的计算宽度。
• 外边距（margin）：外边距是元素边框与其他元素之间的空间。外边距会影响元素的布局和相对位置。

2. 计算子元素的内容区宽度

当子元素未设置宽度时，其内容区宽度的计算如下：

1. 父元素的宽度：假设父元素的宽度为 W。
2. 子元素的内边距：假设左内边距为 P-left，右内边距为 P-right。
3. 子元素的外边距：假设左外边距为 M-left，右外边距为 M-right。

3. 计算步骤

• 子元素的可用宽度计算公式如下：

  [ \text{可用宽度} = W - (M-left + M-right) - (P-left + P-right) ]

• 这意味着：

  • 从父元素的总宽度 W 中减去子元素的左右外边距（M-left 和 M-right），这会影响子元素在页面中的位置。
  • 还要减去子元素的左右内边距（P-left 和 P-right），因为内边距会占据子元素自身的空间。

4. 示例

<div class="container" style="width: 800px;">
    <div class="box">这是一个未设置宽度的子元素</div>
</div>

<style>
.container {
    border: 1px solid black; /* 可视化容器边界 */
}

.box {
    padding: 10px; /* 内边距 */
    margin: 20px; /* 外边距 */
    border: 2px solid red; /* 边框 */
}
</style>

计算过程：

1. 父元素的宽度：

   • W = 800px（.container 的宽度）

2. 子元素的内边距：

   • P-left = 10px
   • P-right = 10px

3. 子元素的外边距：

   • M-left = 20px
   • M-right = 20px

4. 可用宽度计算： [ \text{可用宽度} = 800px - (20px + 20px) - (10px + 10px) = 800px - 40px - 20px = 740px ]

5. 最终效果

• 内容区宽度：子元素 .box 的内容区宽度为 740px，这意味着它的实际内容区域在可用宽度内展示。
• 布局：子元素的外边距和内边距共同作用，影响了元素的最终显示位置和宽度。

6. 总结

未设置宽度的子元素的内容区宽度是通过父元素宽度减去内边距和外边距得出的。这个计算过程确保了布局的灵活性，使得元素能够根据其父元素和空间需求动态调整。理解这一机制有助于您更有效地管理布局和样式，尤其是在响应式设计中。