问题标签 [border-box]

我正在尝试使用背景在 div 中创建网格。自然， background-size 属性是创建网格的好方法，其中 10% 的大小将在 div 中创建 10 个均匀分布的单元格，例如：

但是，我还需要将 box-sizing 设置为“border-box”，否则该框占用的像素多于通过 width 属性指定的像素。这会在 Chrome 中使用按百分比指定的背景大小造成各种破坏，例如：

请注意，顶部 div (d1) 中显示了超过 10 个单元格，尽管每个单元格都应该是 div 宽度的 10%。

似乎这只是一个 Chrome 问题，但如果有人对此有解决方案，请告诉我。

I added a box around the form underneath the main image. Now the controls are distributed on 3 instead of 2 rows. I tried everything but i can't get it back so that all controlls are only aligned on 2 rows...

Has to do with the border-box, content-box I guess, but I am not able to get it right...

Form ist NOT ok: https://www.auto-pfandhaus.ch/autopfand-kredit-lp/ Form is OK: https://www.auto-pfandhaus.ch/3-schritte-zum-geld/

Can somebody help? I would appreciate it a lot?

Thanks. Cesare

正如标题所说：

width: 0由于填充和边框，无法关闭第二个 div 。

做什么？

我不知道我可以添加什么更多细节。这是一个设置为display: flex. 每个弹性项目都有一个边框和填充以及一些（文本）内容。总共有2个。然后其中一些将使用 width: 0 关闭，并关闭边框和填充。box-sizing: border-box用来。

但它不起作用。谢谢你。

编辑：好的，抱歉没有解释清楚，但是宽度需要动画，这就是为什么动画播放时需要有填充，如果可能的话我也不想动画填充。

编辑 3/Final：Th Computed Style 问题/问题在下面解释，但为了以后其他人的利益，我的真正问题是通过 Flex Boxes 和 Vx 测量以及边界框来解决。恕我直言“显示：弯曲；” 是许多问题的答案，尽管我正在努力让它做我想做的事，但你不必与 CSS 对抗！

编辑2：以下无疑需要重构，但如果你能告诉我它符合我的要求，那就太好了。我必须做的改变是在等式中添加 clientTop 和 offsetTop： -

这是防火计算：-

编辑 1：好的，让我重新表述这个问题：-如何找出我的 DIV 内容的高度：-

我目前必须这样做： -

原始问题： -

这肯定是重复的，但是经过将近一个小时的查找，我发现了许多相似/相同的问题，但没有真正的答案:-(

为什么不从高度中扣除 boundryWith 和 padding ？

谢天谢地，boundryBottomWidth 和 PaddingBottom 返回已被转换为像素（遗憾地包括“px”字符串），但标准不是说应该返回可用高度吗？

我正在努力弄清楚为什么我有一个 height:100% 的元素，它比它的容器大，尽管 box-sizing 被设置为 border-box;

我在这里做了一个小提琴：https ://jsfiddle.net/a8v9a8ok/6/

我已将元素设置为 100% 高度并将 box-sizing 设置为边框框，但包含在名为“left”的部分中的文章正在流过该部分，并且它包含的文本 textarea 也正在流过。

我不只是想隐藏溢出，我希望元素保持包含在它们的容器中并将相应的容器填充到 100%。

我敢肯定这是一个简单的解决方法，但我一直在尝试几个小时无济于事，所以任何帮助将不胜感激！

编辑：我只是想让所有元素都适合它们各自的容器，而不会垂直重叠。我希望将 textarea 高度设置为 100% 应该会导致它填充其容器中的剩余空间。

谢谢

根据我对边界框的弹性算法的理解，用于计算剩余空间（用于将可用空间分配给弹性项目），除了弹性项目的主要尺寸属性外，仅包括边距。但似乎浏览器甚至对边框框也采用了边框宽度。这是演示该问题的jsfiddle ：

这里第一个和第二个 div 的宽度分别为 250 和 250，第三个 div 的宽度为 100。这对我来说似乎是错误的。我对么？

我正在尝试使所有表单元素的高度相同。通常我只是为每个项目设置一个高度，工作很好！但是我正在与之合作的开发人员坚持我对按钮使用填充，以防它们需要换行，这样文本就不会被截断……通过争论，这也是一个需要解决的问题，但无论如何。 ..

所以我有这个 CodePen 展示了我所有的风格。我已经包含了所有的 CSS，以防万一我错过了任何被继承的东西。font-size通过使用相同的,padding和，我设法使它们中的大多数具有相同的高度line-height。

https://codepen.io/moy/pen/pVeOyQ

问题是其中一个按钮没有 aborder而其他所有按钮都有，所以它偏离了几个像素。我以为border-box会解决这个问题，但显然不是！

我也可以为该按钮添加一个边框，并始终确保它与背景颜色相同——但这有点麻烦。这是唯一的方法吗？

我知道这是一个小问题/简单问题，但我只是想在做出决定之前获得一些反馈。

我已经包含了 CodePen，因为我无法嵌入所有 CSS，因为它超出了限制。此外，由于没有足够的空间，我无法在嵌入代码中水平内联所有元素。

我们有一个简单的父元素，里面有一个子元素。子元素的内容比父元素大，所以我们想要一个滚动条。我们想在底部添加一些填充，但 Firefox (60.0.2) 似乎忽略了这一点。这是一个错误吗？在 Chrome 中，它似乎工作正常。

计算框的宽度和高度时，轮廓宽度如

如果box-sizing:border-box, 框的宽度/高度是否会考虑轮廓？

我有一个简单的问题，希望有一个简单的答案。这似乎很基本，但我就是无法理解它。

所以，我在一个容器中安排了四个盒子：

我已经申请box-sizing: border-box;了 div，但由于某种原因padding根本没有效果。如果我使用margin，那么它会使 div 对于包装器来说太大，并且它们会移动位置。

我在这里想念什么？

提前致谢

杰米