Question

我看到上一篇文章与我的问题HTML5 canvas style height vs attribute height类似但在那篇文章中，没有明确的信息说明哪一个会起作用，有什么区别？

我尝试了以下示例：

<html>
    <head>
    </head>
      <body>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
        <script src="jquery-1.11.1.js"></script>
        <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
        <script src="script.js"></script>

        <div>
             <select style="width: 200px" width="200px">
                   <option value="Test1"> Test1 </option>
                   <option value="Test2"> Test2 </option>
                   <option value="Test3"> Test3</option>
                   <option value="Test4"> Test4 </option>
                   <option value="Test5"> Test5 </option>
             </select>
        </div>
     </body>
 </html>

但在上面的示例中，如果放置 style =＆＃34; width：200px＆＃34; 或 width =＆＃34; 200px＆＃34; ，则相同结果没有看到。

问题：
1）为什么 style =＆＃34; width：200px 和 width =＆＃34; 200px 没有给出相同的结果？
2） width =＆＃34; 200px＆＃34; 或 width =＆＃34; 200＆＃34; 之间有什么区别？

有人可以帮助我清除这些基础知识吗？

Answer 1

对于大多数html元素，width属性与元素的宽度无关。定义元素样式（当然包含width）的是元素的style属性。

换句话说，style.width（style="width: 200px;"）属性确定元素的宽度。

但是，如果您未设置canvas属性，则svg，width，style.width属性等元素将决定元素的宽度。在这种情况下，width="200px"与width="200"相同，因为大多数浏览器使用px作为默认单位。

PS：

width无效，无法设置select的宽度。
但width属性有效。您可以访问它并自由地更改它。你可以用它来做其他事情。

Answer 2

width元素中width属性无效。更重要的是，这种限制是由浏览器强加的：它们忽略了属性。（很久以前，Netscape 4支持它，它在1995年到期的HTML 3.0草案中有所描述。一些遗留代码，甚至遗留的编码实践，可能仍然反映这些事情！）< / p>

所以答案很简单：它们不同，因此HTML中的width属性没有效果（因此元素采用其默认宽度），而CSS中的width属性以正常的CSS方式工作

{{1}}属性不是HTML中的常规属性：允许某些元素集合并为其单独定义。

Answer 3

1）<select style="width: 200px"> 样式这里是<select> HTML元素的属性，引用内容是 CSS代码即可。同样，此处<select width="200px"> 宽度是<select>的属性。但是，<select>代码没有width属性，请参见here（attributes下）有关HTML attributes的更多信息：here

请参阅DEMO

2）width="200"相当于width="200px"

HTML中的样式宽度与宽度属性

3 个答案: