HTML和CSS width属性有什么区别?

时间:2013-12-23 11:32:43

标签: javascript html css

可在此处找到代码:

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;标记中有stylewidth="107"标记内也有img。它们都是必要的吗?(在这种情况下,CSS似乎会覆盖HTML属性)是否有关于它们之间差异的解释?

7 个答案:

答案 0 :(得分:12)

  

我查了一下这些文件,但是他们没有说明如果两个文件都设置了将会发生什么..

隐藏在某处here

  

UA可以选择在HTML源文档中表示表示属性。如果是这样,这些属性将被转换为具有等于0的特定CSS规则,并被视为在作者样式表的开头插入它们。因此,它们可能会被后续的样式表规则所覆盖。在过渡阶段,此策略将使样式属性更容易与样式表共存。

现在,正如我在幽默评论中暗示的那样,我不知道为什么他们会为HTML width属性设置各种值img元素,并为所有这些元素的CSS width属性赋予一个不同的值。也许他们会考虑缺少.thumbnail类或其他什么。一如既往地Alohci is in a better position to explain why the width and height attributes are specified anyway,即使它们与CSS中指定的维度有任何不同。

然而,我能告诉你的是,这基本上意味着无论如何CSS确实优先,即使两者都已设置。

答案 1 :(得分:3)

标记中给出的宽度是关于图像大小的语义陈述。出于这个原因,在HTML5中,仅以像素为单位给出尺寸是有效的。

CSS中给出的宽度是布局引擎的指令,指示将图像放在屏幕上时要使用多少空间。它们可以是任何标准的CSS单位

请参阅BoltClock关于他们在铺设页面时如何互动的答案。

答案 2 :(得分:2)

关于标题中的问题,更容易说出它们的共同之处:只是它们都影响图像的宽度,并且它们具有相同的名称。 HTML width属性由HTML属性的一般规则控制,它是有限的值语法(只有无符号整数和百分比),它为元素节点创建width属性等。相反, CSS width属性(非属性)由CSS语法规则控制,允许许多不同类型的值,它在DOM中的相关样式表节点中创建一个条目(但不直接是元素的属性)此外,需要为每个元素单独设置HTML属性,而样式表可以一次在许多元素上设置属性(即使在文档的所有元素上)。

关于“两者都必要吗?”的问题,这取决于。通常作者在HTML或CSS中指定图像的宽度,而不是两者。然而,使用两者都是有效的,有时也是有用的。在给定的情况下,图像的实际尺寸似乎与HTML属性匹配,因此CSS设置会使它们重新缩放(不保留宽度:高度比);这是不好的做法,但你对w3schools有什么期望? (图像通常应按比例缩放到预期尺寸,如果它们以固定大小显示,则以该尺寸上传。) - 对混乱的解释很可能只是草率。

使用HTML和CSS来设置宽度仍然是有意义的。例如,您可以以em为单位在CSS中设置宽度以使其缩放到字体大小,但也可以将HTML中的宽度(以像素为单位)指定为后备,以防万一未启用CSS。 (不过,高度比宽度更有意义。)

非正式地说,CSS会在这种情况下覆盖HTML。但HTML并没有真正被覆盖。属性仍然存在,只有在启用CSS时它们才会生效。所有相关规范和草案都对此达成一致。在HTML5 CR中,clause 10.4.3指定了这一点,以便width属性为“表示提示”,这意味着它们是“作者级别零特异性表示提示CSS级联的一部分”。因此,无论规则在级联顺序中有多低,任何设置属性的 CSS规则都将“获胜”。

答案 3 :(得分:1)

对于图像或画布元素,使用CSS设置尺寸可以更改元素(元素在屏幕上的显示方式),而无需更改基础位图(仍使用相同数量的像素,但会失真以适合CSS-指定尺寸),而实际上使用HTML标记设置尺寸会指定要为元素设置的像素数。

答案 4 :(得分:0)

这取决于浏览器引擎,但不同之处在于:

如果带有图片的HTML页面部分可见。

然后您将widthheight属性添加到img标记,浏览器会在加载图片之前知道某些(非最终)图片大小,并为图片添加原始图片尺寸。因此浏览器将在HTML页面上添加一些空间(用于图像)。

如果带有图片的HTML网页部分可见。

然后您将widthheight属性添加到img标记,浏览器会在加载图片之前知道某些(非最终的)图片大小,并且可以计算例如offsetWidthoffsetHeight图像容器权限。如果您不从css裁剪图像,width/height属性也会从图像HTML容器repaint中保存,因为浏览器已经为图像添加了一些空间。

答案 5 :(得分:0)

首先看到此demo

注意图片的border,在最后一种情况下,border已设置为inline,并显示inline border-colorwidth的情况下css 1}},它取{{1}}中的一个而不是内联。

正如BOLTCLOCK提供的链接中所提到的,我认为这一切都取决于选择器的特异性

答案 6 :(得分:0)

在该链接中,css宽度覆盖了html width属性。当您将多个属性分配给同一个元素时会发生这种情况。较高优先级值将覆盖较低优先级。类选择器的优先级高于标签选择器。