Question

我正在试图理解CSS，我试过的第一件事是：

<div style="
    height: 100px;
    width: 100px;
    border: 1px solid black"/>

<div style="
    height: 100px;
    width: 100px;
    border: 1px solid red"/>

和

<div style="
    height: 100px;
    width: 100px;
    border: 1px solid black"></div>

<div style="
    height: 100px;
    width: 100px;
    border: 1px solid red"/>

任何人都可以解释一下发生了什么吗？我认为应该没什么区别..直到现在我才体验到纯粹的xml，所以这对我来说有点令人沮丧..

还有一个问题..如何显示整个事情？我假设首先是浏览器构建DOM树，通常根据元素的顺序显示它。是否与css相同，只有样式定义的那么小的变化？我的意思是样式表中的规则首先应用于显示某个具体元素时，其中没有其他技巧..正确吗？

Answer 1

毫无疑问，您使用text / html内容类型为XHTML提供服务。

这是一个旨在简化从HTML到XHTML过渡的黑客，因此人们可以在浏览器支持之前开始使用XHTML。十年之后，Internet Explorer仍然不支持它，我又回到了HTML。

由于您正在使用此hack，因此必须编写XHTML以与HTML解析器以及XML解析器兼容。这意味着遵循HTML Compatibility Guidelines，包括：

如果元素允许内容（例如，div元素）但该元素的实例没有内容（例如，空部分），请勿使用“最小化”标记语法（例如，<div />）。

不允许内容的元素被定义为“EMPTY”，可以很容易地在HTML list of elements上找到。

Answer 2

CSS可以应用于任何“标记”，但使用<div>是不正确的。 div标记始终需要结束标记：

<div><!-- HTML here --></div>

发生的事情是，div的宽度和高度为100像素，黑色边框为1像素宽。

也许您想阅读一些CSS tutorials。

您也可以尝试

<img src="path/to/some/image" style="border:5px solid black;" />

看到它适用于自动关闭标签;）

A list of valid self-closing tags in XHTML。

Answer 3

<div>应该包含内容，因此它们不是自动关闭标记。您的CSS属性没问题，但您的标记不正确。

Answer 4

如前所述，div元素需要开始和结束标记...除非您在某些示例中执行了操作：

<div />

或者...

<div/>

这是一个自动关闭（空）div。

因此，对于CSS测试，您可能不想使用<div /> - 请改用<div>Foo</div>。

Answer 5

如果你真的想要自我关闭的DIV：

将您的内容作为XHTML投放。这包括使用正确的mime类型（application/xhtml+xml），但请注意，您需要handle browsers that still don't understand XHTML。
使用有效的XHTML doctype和命名空间

e.g。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

然后会按照您的预期显示您的DIV，但根据我的经验，提供良好的旧HTML 4严格不会那么麻烦。

Answer 6

我不确定你的DIV问题是否基于CSS，我认为这更像是浏览器解释的一个例子。浏览器期望DIV具有内容，并且可能无法正确呈现这些内容。 XHTML与XML兼容，但本身并不是（意味着它不遵守所有规则），XML。

CSS 适用于自动关闭代码 - 例如IMG或HR。

你的第二个问题似乎是正确的。浏览器有效地缓存样式表，并在DOM中看到相关标记时应用样式。你从来没有真正看到这一切发生，因为它通常是在对页面进行任何绘制之前完成的。如果使用CSS引用动态添加DOM标记，它将自动采用样式表中定义的样式。

只是对标签的CSS吗？

6 个答案: