HTML和CSS的width属性有什么区别? [英] What's the difference between HTML's and CSS's width attribute?
问题描述
代码可以在这里找到:
http://www.w3schools.com/css/tryit.asp?filename=trycss_float_elements
<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images do not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>
我发现有 width:110px;
style
标签,并且内还有
width =107
code>标记。它们都是必要的(在这种情况下,CSS看起来会覆盖HTML属性)对它们之间的区别有什么解释吗?
I find that there is width:110px;
within style
tag, and there is also width="107"
within img
tag. Are both of them necessary?(It seems that the CSS overwrites HTML attributes in this case) Is there any explaination about the difference between them?
推荐答案
我检查了文档,但他们不清楚如果两者都设置会发生什么。
这隐藏在某处此处:
That's hidden away somewhere here:
UA可以选择尊重HTML源文档中的演示属性。如果是,这些属性被转换为特定等于0的相应CSS规则,并且被视为如同它们被插入到作者样式表的开始处。因此,它们可以被随后的样式表规则覆盖。在过渡阶段,此策略将使样式属性更容易与样式表共存。
The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet. They may therefore be overridden by subsequent style sheet rules. In a transition phase, this policy will make it easier for stylistic attributes to coexist with style sheets.
现在,我隐藏在我的幽默评论中,我不知道为什么他们会为HTML 一如既往, Alohci在一个更好的位置解释为什么 width
属性设置各种值 img
元素,并且对于所有的CSS width
属性具有单个不同的值。也许他们正在考虑 .thumbnail
类丢失或其他原因。 width
和 height
属性仍然指定,即使它们与CSS中指定的尺寸有所不同。
Now, as I've implied in my humorous comment, I don't know for certain why they would set a variety of values for the HTML As always, Alohci is in a better position to explain why the width
attribute on the img
elements and have a single, different value for the CSS width
property for all of them. Perhaps they're accounting for when the .thumbnail
class is missing, or something else.width
and height
attributes are specified anyway, even if they differ from the dimensions specified in CSS for whatever reason.
但是,我可以告诉你,这基本上意味着CSS确实优先,即使两者都设置。
What I can tell you, however, is that this basically means the CSS does indeed take precedence anyway, even if both are set.
这篇关于HTML和CSS的width属性有什么区别?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!