gpt4 book ai didi

css border-box 属性不适用于大填充值

转载 作者:行者123 更新时间:2023-11-28 02:44:27 24 4
gpt4 key购买 nike

根据 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>

我已经将容器 div 框设置为 300px 高度和宽度,子 div 设置为 150px 高度和宽度以及 border-box 属性,但是在我用 200em< 为子 div 框提供了一个大的填充值之后 容器框不会收缩以吸收额外的宽度。我想知道这是为什么?

最佳答案

它们是两个独立的东西。 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;
}

关于css border-box 属性不适用于大填充值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46992892/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com