box属性不适用于较大的填充值

2018-06-27 00:59:06

根据MDN我已阅读“边界框告诉浏览器占您指定的宽度和高度值的任何边界和填充，如果你设置元素的宽度为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容器中，但我都给予了很大的填充值与孩子的div框后200em容器箱不缩成吸收额外的宽度。我想知道为什么呢？

他们是2件独立的事情。边框不限制大小，只是表示最终大小包含边框和填充。因此，如果内框具有边框和填充，并且它扩大到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;
}

链接地址: http://www.djcxy.com/p/75601.html

上一篇: box property not working with big padding value

下一篇: Why doesn’t height:0 hide my padded <div>, even with box