css 宽度计算

/* 示例代码：CSS 宽度计算 */

/* 假设我们有一个容器，宽度为 300px */
.container {
    width: 300px;
    border: 5px solid black;
    padding: 20px;
    box-sizing: border-box; /* 包括 padding 和 border 在内的总宽度为 300px */
}

/* 子元素的宽度计算 */
.item {
    width: 100%; /* 继承父级容器的宽度，即 300px */
    margin: 10px; /* 外边距不会影响宽度计算，但会影响整体布局 */
}

解释说明：

1. box-sizing: border-box;：这个属性使得元素的 width 和 height 包括 padding 和 border。也就是说，即使你设置了 padding 或 border，元素的总宽度仍然保持为指定的宽度（这里是 300px）。

2. width: 300px;：指定了容器的宽度为 300px。

3. padding: 20px; 和 border: 5px;：这些属性会在内容区域之外添加内边距和边框。由于使用了 box-sizing: border-box，这些值不会增加容器的实际宽度。

4. margin: 10px;：外边距不会影响元素的宽度计算，但它会增加元素与其他元素之间的距离。

如果你需要进一步了解 CSS 宽度计算的其他方面，请告诉我！