Question

我想知道以下两点之间有什么区别：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <a id="thumb1"></a>
  <span id="duration1"></span>
  <span id="status1"></span>
</div>
<div class="wrapper">
  <a id="thumb2"></a>
  <span id="duration2"></span>
  <span id="status2"></span>
</div>

其中

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

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

这只是语法吗？如果是这样，第二种方法和添加.percent-container{ width="100px"; align="left"; }之间是否存在差异？

感谢
-uksz

Answer 1

将样式放在外部CSS文件中可以缓存它，从而减少网络流量。否则，它与内联样式相同。内联样式的推荐表单是后一个提案 - style="width:100px;align:left"更多here。

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

Answer 3

不，它不相等，甚至不仅仅是这两个元素。 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进行样式/布局，其余部分使用属性。

在div中分配属性，样式和类之间的差异

3 个答案: