为什么CSS width属性正在与输入元素

Question

根据CSS docs：

宽度CSS属性...适用于所有元素，但非替换行内元素，表格行和行组

输入是内联元素。那么为什么宽度属性是与输入元素？

Answer 1

例外是non-replaced inline elements。输入是被替换的元素。

代替元件

在CSS中，一个替代元素是一个元素，其表示是 CSS的范围之外。这些是外部对象，它们的表示独立于CSS。典型的替换元素 是<img>,<object>,<video>或表格元素如<textarea>和 <input>。仅在特定情况下，某些元素（如<audio>或<canvas>）被替换为元素 。使用CSS内容 属性插入的对象是匿名替换元素。

CSS在某些情况下特别处理替换元素，例如 计算边距和一些自动值。

请注意，某些替换的元素（但不是全部）具有固有的 尺寸或定义的基准，某些CSS属性 （如vertical-align）使用该基准。

参考：MDN - Replaced element