【问题标题】: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 中使用的类名。
      猜你喜欢
      • 2012-10-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-10-17
      • 2016-09-28
      • 2023-04-06
      • 2011-05-31
      • 1970-01-01
      相关资源
      最近更新 更多