Question

.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元素设置为父元素的100%宽度（由于box-sizing：border-box属性，其宽度为内容+填充+边框的总和），但是仅考虑内容+填充。为什么不带边界？我知道当我使用top / left / bottom / right属性时，位置是相对于元素的填充边缘的，但是当它设置为100%时，孩子不应该尊重边框的宽度吗？

Answer 1

之所以会这样，是因为属性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>

父项的100％宽度不采用边框宽度

1 个答案: