为什么你可以用 CSS 来设置一些 HTML 元素的样式，而不能用属性来设置样式 [英] Why can you style some HTML elements with CSS but not with attributes

问题描述

当我浏览一些

<小时>

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

As I was scrolling through some w3schools documentations I came across a section about inline elements and a question I never really thought about before. The docs say the following:

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.

| <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> |                                                                  |
--------------------------------------------------------------------------------------------

What I am interested in is the <input> element. Further down the page all attributes the element takes are explained.
The height attribute is explained as:

Specifies the height of an <input> element (only for type="image")

Yes, I know that the attribute will be ignored in this code:

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

Of course, I would just use CSS for this but why does CSS even work and the HTML attribute doesn't?

input {
  height: 300px;
}

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

So I wonder why this is. There was a decision made that inline elements can't have height attributes and others (not inline) can. What is the point of removing the height attribute if CSS can style it anyway it?

解决方案

First you need to refer to the official specification if you want accurate information. From there you can read that there is attributes called Global attributes that apply to all the elements:

The following attributes are common to and may be specified on all HTML elements (even those not defined in this specification) ...

And if you continue reading you find that there is specific attribute related to some specific elements. There is no magic rule and everything is well defined.

The width and height attributes on img, iframe, embed, object, video, and, when their type attribute is in the Image Button state, input elements may be specified to give the dimensions of the visual content of the element (the width and height respectively, relative to the nominal direction of the output medium), in CSS pixels. The attributes, if specified, must have values that are valid non-negative integers. ^ref

Here you can see where the height attribute can be used. The difference with the CSS property is that this one will specify the dimension that the browser should reserve to that element. You can of course change it later with CSS and if you omit it, a default value will be used (also defined in the same spec).

User agent requirements: User agents are expected to use these attributes as hints for the rendering.

The height/width attrbiutes can also be used with SVG and Canvas:

The canvas element has two attributes to control the size of the element's bitmap: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.

---

Well, an anwser won't be enough to talk about everything related to height attribute but in the specification you can find for each item the attributes that you can use and how they behave. From this you can find the exhaustive list of element where the height attribute is allowed.

Example:

---

When it comes to CSS, you should refer to the specification related to the height property to get more details about how it behaves with different type of elements.

这篇关于为什么你可以用 CSS 来设置一些 HTML 元素的样式，而不能用属性来设置样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！