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 回答