html - 为什么你可以用 CSS 来设置一些 HTML 元素的样式，但不能用属性

Question

当我浏览一些w3schools文档时，我遇到了一个关于inline元素的部分和一个我以前从未真正考虑过的问题。文档说以下内容：

内联元素

inline元素不会从新行开始，只会占用必要的宽度。

| <a> | <abbr> | <acronym> | <b> | <bdo> | <big> | <br> | <button> | <cite> | <code> | <q> |
--------------------------------------------------------------------------------------------
| <dfn> | <em> | <i> | <img> | <input> | <kbd> | <label> | <map> | <object> | <output>     |
--------------------------------------------------------------------------------------------
| <samp> | <script> | <select> | <small> | <span> | <strong> | <sub> | <sup> | <textarea>  |
--------------------------------------------------------------------------------------------
| <time> | <tt> | <var> |                                                                  |
--------------------------------------------------------------------------------------------

我感兴趣的是<input>元素。在页面下方，将解释该元素所具有的所有属性。属性解释如下
：height

指定<input>元素的高度（仅适用于type="image"）

是的，我知道该属性将在此代码中被忽略：

<input type="text" height="500" value="Nothing changed">

当然，我会为此使用 CSS，但为什么 CSS 甚至可以工作而 HTML 属性却不能呢？

input {
  height: 300px;
}

<input type="text" value="I feel so thicc :(">

所以我想知道这是为什么。有一个决定，inline元素不能有height属性，而其他（不是inline）可以。如果 CSS 无论如何都可以设置样式，那么删除 height 属性有什么意义呢？

标签： htmlcssattributes

Answer 1

首先，如果您想要准确的信息，您需要参考官方规范。从那里你可以读到有一些称为全局属性的属性适用于所有元素：

以下属性对所有 HTML 元素（甚至那些未在本规范中定义的元素）都是通用的并且可以在其上指定...

如果您继续阅读，您会发现与某些特定元素相关的特定属性。没有神奇的规则，一切都定义明确。

, , , ,上的width和height属性，当它们的 type 属性处于 Image Button 状态时，可以指定元素以给出元素视觉内容的尺寸（宽度和高度，分别相对于标称输出介质的方向），以 CSS 像素为单位。属性（如果指定）必须具有有效的非负整数值。^参考imgiframeembedobjectvideoinput

在这里您可以看到height可以使用该属性的位置。与 CSS 属性的不同之处在于，该属性将指定浏览器应为该元素保留的尺寸。您当然可以稍后使用 CSS 更改它，如果您省略它，将使用默认值（也在同一规范中定义）。

用户代理要求：用户代理应该使用这些属性作为渲染的提示。

高度/宽度属性也可以与 SVG 和 Canvas 一起使用：

canvas 元素有两个属性来控制元素位图的大小：宽度和高度。这些属性在指定时必须具有有效的非负整数值。必须使用解析非负整数的规则来获取它们的数值。如果缺少某个属性，或者如果解析其值返回错误，则必须使用默认值。width 属性默认为 300，height 属性默认为 150。

---

好吧，anwser 不足以谈论与高度属性相关的所有内容，但在规范中，您可以为每个项目找到您可以使用的属性以及它们的行为方式。从中您可以找到允许使用 height 属性的元素的详尽列表。

例子：

---

当谈到 CSS 时，您应该参考与 height 属性相关的规范，以获取有关它如何处理不同类型元素的更多详细信息。