当为元素项的多个类赋予样式时，样式表能够良好地运行，但是当赋予特殊样式时，它就会变成一个累赘。为了赋予一个元素样式，通常你会给它加上ID,并且在样式表中设置这个ID的样式。在单个文档中，这种做法还算差强人意。但是，当文档和样式表发生变更，很多文档共享相同的样式表时，这种做法就会变得很麻烦。例如，用于特殊样式的一个ID是元素的一部分，样式会跟随元素发生移动。当你修改一篇文档时，将有可能导致无法预料的结果，并且它会使你在寻找问题的根源中迷失自己。下面我们给大家介绍一下HTML可视结构吧!

水平线，块状间隔或块状间隔移除设计模式是特殊样式很好的解决方案，因为它们会插入一个元素到文档中。这个元素有结构上的含义，它是自文档化的，并且很容易复位。你可以使用标准的类设计这些间隔元素的样式，这样的话你就不必设计特殊样式了。间隔元素专门针对特殊样式的情况。

定位样式

在很多情况下，你可能想要赋予某个元素样式，因为它处于某个特定位置。例如，你可能想改变第一个子元素之前和最后一个子元素之后的块状元素的外边距大小，因为抵消外边距对第一个和最后一个子元素表现得有所不同。如果你直接对第一个子元素应用特殊的外边距，然后将第一个元素移到中间，那么它的特殊外边距也会跟着移动。这并不是你要的结果，因为你只是想设计位置的样式--而不是元素的样式。

设计位置样式的一种方式是使用水平线、块状间隔或块状间隔移除设计模式。这些模式都能够起作用，因为很容易保持一个间隔元素在右边的位置--特别是如果你直观地为它的类命名，比如first-child和last-child.位置样式最终的解决办法是位置选择器，但是它在CSS 2.1中功能有限，并且不能在IE 6运行(虽然能在IE 7运行)。CSS 3中提供的位置样式功能足够强大，但是现在还不能应用到实践中。

问题

希望以可见的方式显示一篇文档的结构。

解决方案

CSS提供了许多通过赋予块状元素样式来显示文档结构的方法。可以在块状元素之间放置垂直外边距，或者使用首行缩进的方式形象地把内容分成块状。可以在一个块状的边缘放置项目符号或者数字来列举块状。可以使用外边距、边框、内边距在块状周围放置方框来表明它们是怎样被互相嵌套在一起的。也可以指定标题的字体大小，如果标题的作用范围大，字体也越大--这可以揭示块状元素的嵌套情况而不用把它们放到盒模型中。

可以显示地为文档结构赋予样式，通过这种方式便能帮助用户识别出一篇文档的结构了。为了强调一种紧密的结构关系，可以把元素更紧密地放在一起，并且赋予它们相似的外观。例如，为了把各个元素分开，可以将它们隔离开，并给它们赋予不同的样式。例如，列表、表格和块状元素有不同的默认样式来强调它们的结构的不同含义。而且，无序列表使用项目符号来说明它们各项的无序性。

为了使风格统一，通常我们会对相同类型的所有块状元素赋予一个标准的样式集。例如，你可能希望所有的段落和列表项都有一个2像素的垂直内边距。在样式表中，可以选择一种类型的所有元素或者一个类别的所有元素，并按照自己的想法来赋予它们样式。我将在实例中演示这一点。

有时候，你可能想改变两个特定的块状元素之间的空隙。可以把它们更紧密地放在一起，以此强调它们之间关系的严密性，或者把它们设置为相隔很远的两部分来强调它们之间的不同。在结构上，这是在设计块状之间的空隙。这种关联不是两个块状中任何一个的一部分，而是两个块状之间的，因此在两者之间插入一个空白块比设计其中一个块状的外边距在结构上更加精确和简便，它可以作为正常样式设计的一个例外。

HTML提供元素的目的是在块状之间插入一个结构间断是为了在内联元素之间插入一个断行符)。水平线设计模式介绍了怎样使用和怎样为赋予样式。

当你想插入一个强度不如水平线的结构间断或者使两个块状之间更加紧密时，你可以使用块状间隔和块状间隔移除设计模式。

水平线、块状间隔或块状间隔移除的使用应属于特殊样式设计，而不是标准样式设计。元素之间的间断和连接的结构含义没有嵌套结构强度那么大。

为了强调块状元素之间的紧密关系，你或许希望合并两个块状元素，我将在内联化和内嵌设计模式中探讨它。

以上就是我们给大家介绍的HTML可视结构的内容了。希望大家继续关注我们的网站!