css 为什么子div会溢出父div?(我想要一个解释,而不仅仅是一个解决方案)

smdncfj3  于 2023-10-21  发布在  其他
关注(0)|答案(1)|浏览(135)

此问题已在此处有答案

CSS: Width in percentage and Borders(5个答案)
How to make an element width: 100% minus padding?(15个答案)
4天前关闭。
截至4天前,社区正在审查是否重新开放此问题。
我创建了一个尽可能简单的例子。

#container {
  height: 60%;
  width: 50%;
  border-style: double;
}

#inset {
  padding: 2%;
  border-style: groove;
  height: 100%;
  width: 100%;
}
<div id="container">
  Parent
  <div id="inset">
    Child
  </div>
</div>

我想知道为什么child div不简单地填充其parent div的剩余空间,高度和宽度设置为100%(即使没有文本,子div也会溢出)。
我看到很多人问同样的问题,但他们得到的是解决方案,而不是解释。我正在努力掌握CSS,这是我认为我落后的地方。
我希望它看起来像

ubof19bj

ubof19bj1#

这是因为HTML规范认为元素的渲染大小是根据元素的内容(或任意设置的大小)* 加上 * 填充和边框来计算的。也就是说:一个宽度为50 px,垂直边框为2 px,水平填充为10 px的div被渲染为一个74 px宽的元素。
CSS属性box-sizing改变了算法计算元素大小的方式。通过将其设置为border-box,算法认为填充和边框是元素大小的一部分。使用上面的例子,呈现的宽度将是50 px。
为了回答你的问题,你的“inset”div是100%宽的,这意味着它的容器的宽度,但是这个宽度增加了2%的水平填充和垂直边框。
更多关于这一点-和一个可以说更准确的解释-在这里:https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

相关问题