css边框框属性不适用于大填充值答案

【问题标题】：css border-box property not working with big padding valuecss边框框属性不适用于大填充值
【发布时间】：2020-03-08 07:54:02
【问题描述】：

根据我读过的 MDN "border-box 告诉浏览器在您为宽度和高度指定的值中考虑任何边框和填充。如果将元素的宽度设置为 100 像素， 100 像素将包括您添加的任何边框或填充，内容框将缩小以吸收额外的宽度”

但在我的情况下，我设置了两个 div 框：

    <style type="text/css">
    .container{
        width: 300px;
        height: 300px;
        background: blue;
        margin: auto;
    }

    .child{
        width: 150px;
        height: 150px;
        background: yellow;
        border: 2px solid red;
        box-sizing: border-box;
        padding: 200em;
    }
</style>

<body>
    <div class="container">
        <div class="child">
            <h1>test</h1>
        </div>
    </div>


</body>

我已经设置了高度和宽度为 300 像素的容器 div 框，具有边框框属性的高度和宽度为 150 像素的子 div，但是在我给具有 200em 容器的子 div 框提供了一个大的填充值之后盒子没有缩小以吸收额外的宽度。我想知道这是为什么？

【问题讨论】：

stackoverflow.com/questions/9490974/margin-and-padding-using-em
你想完成什么？

标签： css

【解决方案1】：

它们是两个不同的东西。 border-box 不限制大小，它只是意味着最终大小包括边框和填充。因此，如果内框有边框和内边距，并且它扩展为 400px，则大小将为 400px包括边框和内边距。

你可以对你的 css 做一个调整，为了测试，是让外部 div 300px，不管内部的大小：

/* add min and max. */
.container {
    min-width: 300px;
    min-height: 300px;
    max-width: 300px;
    max-height: 300px;
    background: blue;
    margin: auto;
}

【讨论】：

【解决方案2】：

border-box 使 padding 吸收内容中的像素。想象一下，你有一个 100px 宽度的 div，所以当你增加 padding 时，width 会减小，使整个尺寸等于 100px。

如果你使 padding:10px 从右侧和左侧，width 将减少 20px (width = 80px) 以使全尺寸等于 100 像素。

example 1 - 如果你使 padding:20px 从右边和左边，width 将减少 40px (width = 60px) 使全尺寸等于 100 像素。 example 2 等等

【讨论】：