css - 不同的元素宽度和 CSS 宽度

Question

<分区>

Answer 1

据我所知，您在输入中设置了 width:207px 并问问自己(和我们)为什么它在页面上显示为 225px 宽度。

您似乎遇到了 css box model计算。

---

默认情况下(这是您所处的模式，因为您没有指定任何其他内容)框处于 box-sizing:content-box 模式。你想要的是 box-sizing:border-box 因为它几乎总是表现得更自然。要将此应用于元素，您必须设置 box-sizing上的属性(property)。

_{(来源:binvisions.com)}

内容框

仅根据元素的内容计算元素的宽度/高度。这意味着 padding、border-width 和 margin 都在元素的尺寸“之外”。

当您在此模型中指定 width:207px 时，这意味着“此元素的内容应为 207 像素宽”。填充和边框宽度被添加到其中。

边框框

在此计算中添加 padding 和 border-width。 width 现在是 content + padding + border-width 的总和。

用padding:8px和border-width:1px指定width:207px意味着有207px - 2*8px - 2*1px = 189px 内容空间。

---

针对特定问题的解决方案

你申请

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    width: 207px;
}

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    padding: 0 8px;
    border: 1px solid #CACACA;
}

由于您处于 content-box 模式，计算出的宽度为 207px + 2*8px + 2*1px 正好是 225px你观察到的。

将 box-sizing:border-box 应用于该元素，它就可以工作了。 但请注意，这可能会破坏该样式的其他所有内容。也许你最好对它应用 width:189px。