在 div 中分配属性、样式和类之间的区别答案

【问题标题】：Differences between assigning attribute, style, and class in div在 div 中分配属性、样式和类之间的区别
【发布时间】：2015-11-05 07:11:54
【问题描述】：

我想知道以下两个有什么区别：

<div class="percent-container"> </div>

<div width="100px" align="left"> </div>

在哪里

.percent-container{
  width="100px";
  align="left"; 
}

只是语法吗？如果是这样，第二种方法和添加style="width:100px;align:left"有区别吗？

谢谢
-uksz

【问题讨论】：

标签： html css

【解决方案1】：

不，它不相等，甚至对于这两个元素也不相等。 div 元素不存在width 属性（如果存在，则无需指定单位，而仅指定以像素为单位的数值）。是的，在 HTML5 中，您几乎可以使用任何东西作为属性并摆脱它，但 HTML5 还建议使用 CSS，并且仅使用 CSS 进行样式设置。

这是一个例子：

div {height: 50px; background: #ccc; margin-bottom: 5px; display: inline-block; min-width: 100px;}
div.css {width: 250px}

<div width=250>Numeric</div>
<div width="250px">Numeric w/unit</div>
<div class="css">Regular CSS</div>

如您所见，只有最后一个示例 Regular CSS 读取实际宽度值。在对齐的情况下，这是一个巧合的匹配，因为有一个属性 align 在 HTML4 时代被大量使用（宽度和高度在图像中被大量使用），是的，它符合 CSS text-align 规则。但并非所有元素和属性都是如此！例如Canvas 使用width 属性的方式与width 样式不同（该属性表示实际可用像素数，而样式只是框元素的大小，可能会导致拉伸，例如）。

底线：

样式/布局使用 CSS，其余使用属性。

【讨论】：

你的例子没有出现在答案中:)
不客气，希望我能帮助你更好地理解它。要以正确的方式大量演示属性，请查看 Angular 指令，例如...它们带来了巨大的功能并且在 HTML5 中完全有效。

【解决方案2】：

这两种方法都有很多优点和缺点，具体取决于它应该加载/渲染的元素和条件。我认为如果不提供各种参考资料，就不能在一个答案中解释所有这些。

您可以在以下问题中找到这样的答案：

What's the difference between HTML's and CSS's width attribute?

What's the difference between the HTML width / height attribute and the CSS width / height property on the img element?

【讨论】：

【解决方案3】：

将样式保存在外部 CSS 文件中可以对其进行缓存，从而减少网络流量。否则，它与内联样式相同。内联样式的推荐形式是您的后一个建议 - style="width:100px;align:left" 更多 here。

【讨论】：

好的 - 所以基本上第二种方法与其他两种方法相同，对吧？
div 容器中不需要使用 align="left"，默认对齐到左边。作为最佳实践，我们不应该在 html 中使用内联样式，我们应该维护要在 html 中使用的类名。