html - 当填充大于定义的大小时会发生什么？-6ren

html - 当填充大于定义的大小时会发生什么？

转载作者：行者123 更新时间：2023-12-05 05:51:16

<html>
<head>
<style>
* {
  box-sizing: border-box;
}
div {
  width: 10px;
  padding: 70px;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS Padding</h2>
<div>This element has a padding of 70px.</div>

</body>
</html>

我试过了，但不明白结果。当填充大于给定宽度时究竟会发生什么？

最佳答案

您的元素的宽度将等于 70px*2 + 1px*2 = 142px。 padding 和 border 的总和大于指定的宽度，所以就像你的宽度等于 0 并且只有 padding/border 定义最终宽度

That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified width and height properties. As the content width and height cannot be negative ([CSS2], section 10.2), this computation is floored at 0 ^ref

你可以清楚地看到为什么 content 宽度最终会等于 0 而 final 宽度只是 padding 和 border。

要用数学表达这一点，您有以下公式:

content-width + padding + border = final-width

和

content-width = max(0,specified-width - (padding + border))

我正在使用 max() 来表达我们只取正值这一事实。

计算得到142px

如果 specified-width - (padding + border) 为正，您将得到 specified-width = final-width 的逻辑结果

关于html - 当填充大于定义的大小时会发生什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70406153/

文章推荐： python - 在 Python Selenium 中查找 innerHTML 文本的 div id

Git Rebase -> 为什么在 pull 时会 merge ？
我创建了一个分支来开发新功能。由于这个新功能完全是作为一个新项目开发的，唯一可能的冲突来源是解决方案文件。随着功能的开发，主分支更新了几次。当我完成开发和测试时，我做了: git checkout

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 当填充大于定义的大小时会发生什么？