第13章 DIV与SPAN.pptVIP

第13章 DIV与SPAN 在前面一章中，学习了DIV的用法，理解了DIV在布局中的作用，使读者会对DIV进行布局。现在介绍另一个标签，功能与DIV一样，只不过有部分区别要注意，而且在不同布局环境有不同的选择。DIV和SPAN元素最大的特点，是默认都没有对元素内的对象进行任何格式化渲染，主要用于应用样式表。两者最明显的区别在于DIV是块元素，而SPAN是行内元素。 学完本章，将会理解以下内容： 解读SPAN 何时用SPAN标签 DIV与SPAN区别 DIV与SPAN在布局中应用 13.1 解读SPAN 与DIV标签块级元素不同，SPAN标签指行内元素，主要用于文本的容器，相对DIV容器，SPAN容器相对于文本或图片要小些。DIV和SPAN元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染，主要用于应用样式表。 与DIV一样，SPAN也是一个标记，包含着一个容器，里面所放置的可以是文本或图片等，SPAN的宽度依照包围着对象的宽度而定，故不能用宽度属性width设置SPAN标记内对象的宽度，但可以设置SPAN的margin（外补丁）值，设置SPAN中的对象位置与父对象的距离。 SPAN的语法与DIV一样，其参数可以接ID和类（class）等，代码13.1表示SPAN的用法。 13.2 何时用SPAN 在13.1节中，讲解了SPAN的语法，也初步了解了SPAN的用法，那么什么时候才可以用SPAN标记呢？用SPAN标记时可以用DIV取代吗？针对这些问题，现在来探讨这些问题并做出解答。 从前面的讲解中可以知道，一个DIV内容不超过一行，所占的就是一行文本内容，因为DIV默认宽度是父对象的100%，而SPAN标记中的内容宽度是指其内容所占的宽度，即不能设置SPAN的宽度，所以在一行文本中，想对其中的文字设置样式，而又不要该行文本换行的条件下，可以选择SPAN标记，同理，在图片中应用也如此。 代码13.2中，同一行文字在不同文字中需要不同样式情况下，而且又不影响该行换行的效果。这时用SPAN来做文字的容器，然后在SPAN中设置ID，在样式表中设置不同ID中不同的字体颜色和字体大小。这样，在一行文本中显示出不同的样式，如代码13.2所示。 13.3 DIV与SPAN的区别 DIV与SPAN都可以用来布局，而且在布局时，用SPAN的时候，DIV难以取代，相反，用DIV的时候，SPAN也不能取代之。那么这两者的区别在哪里呢？又怎么样使用才可以给布局带来方便呢？下面讲解DIV标记与SPAN标记的区别。注意，两者相同的是都是HTML标记。 虽然DIV与SPAN用法类似，但还是有区别的，在实际应用中应当注意。下面来比较DIV与SPAN的区别。 13.3.1 默认宽度不同 SPAN和 DIV的区别在于，DIV是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等；而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。 13.3.2 块元素与行内元素 块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化。代码13.4表示了DIV与SPAN的区别，即设置块元素与行内元素时，用display属性可以对其转化。 13.4 DIV与SPAN实例手把手—多层布局 在本小节中，用实例来演示DIV与SPAN的用法，以及它们之间的区别。通过实例讲解，来介绍多层布局。所谓多层布局，就是多个层用DIV和SPAN来设置，然后通过CSS代码控制效果。因DIV与SPAN的应用之处也有不同，所以在本实例中的多层中，对DIV与SPAN的应用环境也做了个演示，当以后在这种环境中出现时，不能用DIV来做容器的，可能用SPAN会更简单。 本小节布局实例没有步骤，主要说明从CSS代码做出注解，请读者认真看CSS代码对标记的作用。详细的代码请参考13.5所示。 13.5 小结 本章主要介绍了标签SPAN的语法和其用法，对SPAN何时该用作了详细讲解。SPAN用法与DIV类似，但也有区别，在第3节进行了比较，对DIV与SPAN的区别作出细致的分析，并在第4节中在具体的布局应用中演示两者用法。本章主要介绍的是SPAN，在学习中与DIV进行了比较。往往在实际应用中DIV和SPAN会一起用，而且都可以用CSS对它们控制。