父元素的100%宽度不包括边框宽度。

Question

父元素的100%宽度不包括边框宽度。

3

.item {
    box-sizing: border-box;
    width: 500px;
    height: 60px;
    background-color: blue;
    border: 20px solid red;
    padding: 10px;
    position: relative;
}

.child {
    width: 100%;
    background-color: yellow;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="item">
        <div class="child">

        </div>
    </div>
</body>
</html>

编辑:

来自 https://www.w3.org/TR/CSS22/visudet.html#the-width-property:

对于基于块级容器元素的包含块为绝对定位元素，百分比是相对于该元素的填充框的宽度计算的。这与CSS1不同，CSS1中百分比宽度总是相对于父元素的内容框计算。

为什么会这样呢？我正在使用border-box属性，期望得到包括边框在内的父容器的100％宽度。有人知道如何同时包括边框吗？

.child 元素设置为父元素（因为具有box-sizing:border-box属性，其宽度等于内容+填充+边框的总和）的100％宽度，但仅考虑内容+填充。为什么不考虑边框呢？我知道当我使用top/left/bottom/right属性时，位置是相对于元素的填充边缘计算的，但如果将子元素设置为100％，难道不应该同时考虑边框的宽度吗？

- LearningMath

它考虑了边框，但是它的边框不是父元素或任何其他元素的边框。 - Temani Afif

@TemaniAfif，我不太明白你想说什么，请你详细解释一下好吗？我已经阅读了相关的问题，但是我仍然不清楚为什么参考框应该是“填充框”，而不包括边框。如果我在父元素和子元素上设置了“border-box”，那么当我说：“给我父元素的100％宽度”时，我希望宽度包括父元素的边框，因为边框包含在父元素的宽度中。 - LearningMath

子元素和父元素是不同的...每个边框盒都适用于每个元素，而不考虑其他元素...因此，每个元素都具有边框/填充/宽度，只有这些被考虑在内...我们不会将父元素的边框包括在子元素的宽度计算中。给子元素添加边框，然后删除/添加边框盒，观察其行为，您将更好地理解。 - Temani Afif

我好像没有听懂你的意思。我的问题是，为什么在父元素为content-box和border-box的情况下，在计算子元素宽度时会选择填充框作为参考，而不是选择内容或边框边缘作为参考呢？为什么要选择填充边缘？ - LearningMath

你好，以下是編程相關內容的中文翻譯：似乎你對box-sizing的理解有誤...如果你設置box-sizing:border-box，則告訴瀏覽器在計算寬度時包括邊框，但寬度始終基於父元素的padding-box進行計算。因此，100％始終是父元素padding-box的100％，如果子元素有邊框，則包括在該100％中，如果未設置border-box，則不包括邊框。 - Temani Afif

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pedro Coelho · Accepted Answer

这是因为属性width被明确定义为相对于content-box（默认值）。将父元素的box-sizing设置为border-box不会改变这种行为。我认为克服这个问题的方法是使用outline属性，使边框不占用空间。下面是可能的替代方案：

<!DOCTYPE html>
<html lang="en">
<style>

.item {

    width: 500px;
    height: 60px;
    background-color: blue;
    outline:20px solid red;
    border:1px solid black;
    padding: 10px;
    position: relative;
}

.child {
    width: 100%;
    background-color: yellow;
    height: 100%;

    outline:1px solid yellow;
    position: absolute;
    top: 0;
    left: 0;

}

</style>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="item">
        <div class="child">

        </div>
    </div>
</body>
</html>