2

我正在尝试理解 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 是否也一样，只有样式定义的那一点点变化？我的意思是样式表中的规则在显示某些具体元素时首先应用，其中没有其他技巧..对吗？

4

6 回答 6

5

毫无疑问，您正在为您的 XHTML 提供 text/html 内容类型。

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

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

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

不允许内容的元素被定义为“EMPTY”，并且可以很容易地在HTML 元素列表中被发现。

于 2010-01-31T11:47:18.047 回答
1

CSS 可以应用于任何“标签”，但您使用的<div>是不正确的。一个div标签总是需要一个结束标签：

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

正在发生的事情是，您给出了div100 像素的宽度和高度以及 1 像素宽的黑色边框。

也许您想阅读一些CSS 教程。

你也可以试试

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

看看它是否适用于自闭合标签；）

XHTML 中有效的自闭合标签列表。

于 2010-01-31T11:30:37.517 回答
1

<div>s 应该有内容，所以它们不是自闭标签。您的 CSS 属性很好，但您的标记不正确。

于 2010-01-31T11:33:33.370 回答
1

如前所述，一个div元素需要开始和结束标签......除非你按照你在某些示例中所做的那样：

<div />

或者……</p> 

<div/>

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

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

于 2010-01-31T11:35:37.977 回答
1

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

  1. 将您的内容作为 XHTML 提供。这包括使用正确的 mime-type ( application/xhtml+xml)，但请注意，您需要处理仍然不理解 XHTML 的浏览器。

  2. 使用有效的 XHTML 文档类型和命名空间，

例如

<!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 strict 的麻烦要少得多。

于 2010-01-31T12:11:01.200 回答
-2

我不确定您的 DIV 问题是否基于 CSS，我认为这更多的是浏览器解释的情况。浏览器希望 DIV 具有内容，但可能无法正确呈现这些内容。XHTML 与 XML 兼容，但它本身不是（意味着它不遵守 XML 的所有规则）。

CSS确实适用于自闭合标签 - 例如 IMG 或 HR。

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

于 2010-01-31T11:32:15.323 回答