在div中分配属性，样式和类之间的差异 [英] Differences between assigning attribute, style, and class in div

问题描述

我想知道以下两者之间的区别是什么：

 < div class =percent-container> < / div> 
 
< div width =100pxalign =left> < / div> 
  

其中

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

它只是语法吗？如果是，第二种方法和添加 style =width：100px; align：left？

之间有什么区别吗？

感谢

-uksz

解决方案

不，它不相等，元素。 div元素不存在属性 width （如果是，则不指定单位，而只指定像素中的数字值）。是的，在HTML5中，你可以使用几乎任何东西作为一个属性，并避开它，但HTML5也建议使用CSS和只有CSS样式。

示例：

< pre class =snippet-code-css lang-css prettyprint-override> div {height：50px;背景：#ccc; margin-bottom：5px; display：inline-block; min-width：100px;} div.css {width：250px}

 < div width = 250>数字< / div>< div width =250px>数值w /单位< / div>< div class =css> Regular CSS< / div& / code> 
 

正如你所看到的，只有最后一个例子实际宽度值。在对齐的情况下，这是巧合的匹配，因为有一个属性 align 在HTML4天使用了很多（宽度和高度被用于图像很多）它匹配CSS text-align 规则。但是不是所有的元素和属性的情况！ 例如，使用 width 属性的方式不同于 width style（属性表示可用像素的实际数量，而样式只是框元素的大小，并且可以导致拉伸）。

< hr>

底线：

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

I am wondering what is the difference between two following:

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

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

Where

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

Is it just syntax? If so, is there a difference between the second approach and adding style="width:100px;align:left"?

Thanks
-uksz

解决方案

No, it's not equal, not even for only those two elements. The attribute width doesn't exist for the div element (and if it did, you wouldn't specify the unit, but only the numeric value in pixels). Yes, in HTML5 you can use pretty much anything as an attribute and get away with it, but HTML5 also suggests the use of CSS and only CSS for styling.

Here's an example:

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>

As you can see, only the last example, Regular CSS, reads the actual width value. In case of align, that's a coincidental match, because there is an attribute align that was used heavily in HTML4 days (width and height were used a lot with images) and yes, it matches the CSS text-align rule. But that's not the case for all elements and attributes! Canvas, for example, uses the width attribute in a different manner than the width style (the attribute denotes the actual number of available pixels, while the style is just the size of the box element and can cause stretching, for example).

---

The bottom line:

Use CSS for styling/layout, use attributes for the rest.

这篇关于在div中分配属性，样式和类之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！