【发布时间】：2013-12-03 20:37:29
【问题描述】：
我知道你可以这样做：
<img style="position: absolute;" src="test.png" alt="Test image" width="50" height="50" />
我不使用第一种方法，因为我知道外部样式表旨在将 CSS 与 HTML 代码分开。我喜欢保持这种状态。
<img id="foobar" src="test.png" alt="Test image" width="50" height="50" />
有时我会使用这种方法，但是当我查看 Facebook、Instagram 或 Twitter 等大型网站的一些专业 HTML 编码时，我发现它们使用了 很多 的容器 divs，这让我不确定我是否做得对。
<div id="foobar">
<img src="test.png" alt="Test image" width="50" height="50" /> //use 'src' in place of 'sc'
</div>
我发现由于某种我实际上并不知道的原因，我主要使用这种方法。但在这种情况下，我只是将样式添加到div，而不是直接添加到img。或者当我这样做时，我通过在 CSS 中使用 #foobar img{ ... } 选择它来直接将样式添加到 img 元素。
<div id="foo">
<img id="bar" src="test.png" alt="Test image" width="50" height="50" />
</div>
如果容器只是完成工作所必需的，我通常会这样做，我会在 img 和 div#foo 元素上设置一些样式。
我知道可能还有更多方法，但主要是最后两种方法我不太确定何时使用它们。我知道还有其他 HTML 元素，但我只是拿了一个 div 和 img 进行演示。
话虽如此，我想知道每种方法的优缺点以及哪种方法应该是一个好的做法？
【问题讨论】：
-
将这样的元素放在您在示例中引用的容器中是一种很好的做法，因为具有不同容器的图像可以有不同的样式
-
不同的人和方法将促进不同的最佳实践，以了解您应该如何设计元素。不幸的是，没有“正确的方法”。通常要考虑一下您正在尝试做什么，非常重要的是，您将来可能需要做什么。例如“我是否只需要设置这一张图片的样式，它只存在于这一页上？”意思是“我可以使用身份证”。但是“我是否需要设计一系列图像，这些图像可以在轨道上的某个地方换成其他图像？”意思是“我可以很容易地通过将它包围在
div中来对它进行排序。”做#foobar img { }很好。 -
注意：您应该从图像中删除高度和宽度声明，并将它们也放入 css 中:)
-
@Chris 这个帖子stackoverflow.com/a/2414940/1115367 让我在图像标签本身而不是从 CSS 中声明图像的尺寸。当图像是设计/布局的一部分时，我只会在 CSS 中声明尺寸，在这种情况下它不会。我说的对不对，我不知道。但话又说回来，没有对与错。所以我想这是主观的，应该按照规范中的说明去做。
-
@KidDiamond 我在那里读到了答案：我不知道我是否同意他的前提，但是嗯。我很少在提前知道原始图像文件的实际高度和宽度的情况下编写代码，所以我想这对我来说 99% 的时间都不是问题。