可在此处找到代码:
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"
标记内也有img
。它们都是必要的吗?(在这种情况下,CSS似乎会覆盖HTML属性)是否有关于它们之间差异的解释?
答案 0 :(得分:12)
我查了一下这些文件,但是他们没有说明如果两个文件都设置了将会发生什么..
隐藏在某处here:
UA可以选择在HTML源文档中表示表示属性。如果是这样,这些属性将被转换为具有等于0的特定CSS规则,并被视为在作者样式表的开头插入它们。因此,它们可能会被后续的样式表规则所覆盖。在过渡阶段,此策略将使样式属性更容易与样式表共存。
现在,正如我在幽默评论中暗示的那样,我不知道为什么他们会为HTML 一如既往地Alohci is in a better position to explain why the width
属性设置各种值img
元素,并为所有这些元素的CSS width
属性赋予一个不同的值。也许他们会考虑缺少.thumbnail
类或其他什么。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页面部分可见。
然后您将width
和height
属性添加到img
标记,浏览器会在加载图片之前知道某些(非最终)图片大小,并为图片添加原始图片尺寸。因此浏览器将在HTML页面上添加一些空间(用于图像)。
如果带有图片的HTML网页部分不可见。
然后您将width
和height
属性添加到img
标记,浏览器会在加载图片之前知道某些(非最终的)图片大小,并且可以计算例如offsetWidth
或offsetHeight
图像容器权限。如果您不从css裁剪图像,width/height
属性也会从图像HTML容器repaint
中保存,因为浏览器已经为图像添加了一些空间。
答案 5 :(得分:0)
首先看到此demo
注意图片的border
,在最后一种情况下,border
已设置为inline
,并显示inline border-color
但width
的情况下css
1}},它取{{1}}中的一个而不是内联。
正如BOLTCLOCK提供的链接中所提到的,我认为这一切都取决于选择器的特异性
答案 6 :(得分:0)
在该链接中,css宽度覆盖了html width属性。当您将多个属性分配给同一个元素时会发生这种情况。较高优先级值将覆盖较低优先级。类选择器的优先级高于标签选择器。