！重要的宽度无缘无故地改变[重复]

Question

在css中：

.dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50%;
}

在html中：

<button type="button" class="dot"></button>

在浏览器中（说它是 16px，当我展开查看为什么它只显示 9px）：

在 IE 和 Chrome 中测试，都是 16x9px。

如果我将宽度和高度设置为 15x15 像素，那么它看起来很好（即使没有！important）。

如果我将宽度和高度设置为 10，则在浏览器中设置为 16x10px。

我还尝试将宽度、最大宽度、最小宽度（和高度）设置为 9 像素！重要的是，仍然是 16x9 像素。

Answer 1

你应该熟悉box-sizing属性，它决定了如何计算宽度和高度，在chrome中，按钮上设置的box-sizing的默认值是border-box

border-box：宽度和高度属性包括内容、内边距和边框

现在让我们谈谈你的情况：

内容：

<button type="button" class="dot"></button>

按钮没有文字，表示其内容的宽度为0px

填充：

用户代理（本例中为chrome）应用的按钮上的默认padding是

padding-top: 1px;
padding-right: 6px;
padding-bottom: 1px;
padding-left: 6px;

边界：

我们只关心边框的宽度

用户代理应用的按钮上的默认border（本例中为chrome）是

border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;

---

我们将单独讨论宽度，因为高度几乎相同

不应用任何样式，我们来总结一下

left border 2px + left padding 6px + content 0px + right padding 6px + right border 2px

所以按钮的整体宽度默认为 16px。

现在，当您说 width:9px 时，您明确设置了 border+padding+content 应该存在的宽度，但它们的宽度更宽，因此它会扩展。

为什么它不会发生在 15x15 上……（变成 16x15 就好像它有填充直到 16px 上的填充

那是因为 16px 是 border+padding+content 需要生存的确切空间量，这就是为什么你看不到任何变化。

现在，如果您将宽度设置为比 16px 更宽，内容的宽度将会改变，因为边框获得了设置宽度 border property 和填充宽度 padding 属性。

解决方案

所以要解决这个问题，我们需要重置那些预定义样式 padding 和 border

console.log(document.querySelector('button').getBoundingClientRect().width)

button {
  width: 9px;
  padding: 0;
  border:none;
}

<button></button>