Javascript 如果我给大填充/边框，边框框不工作

我有一个div，在这里我需要保持宽度和高度不变，并且不应该因为应用到它的边框和填充而改变。我使用了

边框框

属性。它在一定程度上起作用

div{
      border:1px solid black;
      width:100px;
      height:100px;
      -moz-box-sizing:border-box;
}

但在极端情况下失败了

div{
      border:60px solid black;
      width:100px;
      height:100px;
      -moz-box-sizing:border-box;
}

这实际上是一个在线工具，用户将在其中提供边界。所以他可以给出任何数字，但我想防止div随着边框/填充而增长

---

是否有任何方法可以通过CSS或javascript阻止它？如果我错了，请告诉我。

好吧，边框将显示在左侧和右侧/顶部和底部——每个边框的大小都是60像素，所以总共是120像素。唯一可以强制大小保持在100px以内的方法是使用JS强制边框it，因为边框大小大于宽度和高度

此图元上指定的宽度和高度（以及相应的最小/最大属性）决定了图元的边框框。也就是说，元素上指定的任何填充或边框都将在此指定的宽度和高度内进行布局和绘制。内容宽度和高度是通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算的。由于内容宽度和高度不能为负值（[CSS21]，第10.2节），因此此计算的下限为0

参考文献

---

除了使用JavaScript，没有办法限制边框宽度本身。可能的基于CSS的解决方案包括伪造

例如，您可以使用

max width

和

max height

将一个

div

包裹在带边框的框中，如下所示：（这不一定是一个很好的解决方案！）

或者，您可以从其他HTML元素构建“边框”，在不受CSS机制影响的情况下获得边框的外观——但是如果您想深入到这一步，最好只使用一点JavaScript

---

验证用户输入实际上只是最简单、最简单的方法。当用户超过合理的边框宽度时，您不必显示错误消息——相反，每当用户输入超过所选的最大值（比如10px），您只需默认为该最大值。

它是因为边框大小大于宽度和高度如果宽度/高度以%为单位，该公式的工作原理是什么，这将随父级高度而变化。@DyapaSrikanth您必须计算宽度和高度。如果宽度/高度以%？