HTML和CSS的宽度属性有什么区别？

Question

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>

Run Code Online (Sandbox Code Playgroud)

我发现标签width:110px;内有style标签,标签width="107"内也有img.它们都是必需的吗？(在这种情况下,似乎CSS会覆盖HTML属性)是否有关于它们之间区别的解释？

Answer 1

Bol*_*ock 14

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

那隐藏在这里的某个地方:

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

现在,正如我在幽默评论中暗示的那样,我不知道为什么他们会为元素的HTML width属性设置各种值,img并width为所有这些元素的CSS 属性设置一个不同的值.也许他们会考虑.thumbnail课程缺失的时间或其他内容.与往常一样,Alohci可以更好地解释为什么指定width和height属性,即使它们与CSS中指定的维度有任何不同.

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

+1 通过引用澄清 CSS 宽度/高度优先于等效的 HTML 属性。[CSS-Tricks](https://css-tricks.com/whats-the-difference- Between-width-height-in-css-and-width-height-html-attributes/)也有很好的解释。 (2认同)

Answer 2

Alo*_*hci 5

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

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

请参阅 BoltClock 的答案，了解它们在布局页面时如何交互。

归档时间：	11 年，11 月前
查看次数：	3857 次
最近记录：	11 年，11 月前