深入学习css2.0结构，再谈div、span的困惑

《深入学习css2.0结构，再谈div、span的困惑》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、深入学习CSS2.0结构，再谈div、span的困惑>>edu.5151doc.教育资源库　　使用div进行布局，提出div应当用于组织代码结构，现在我们再深入一点，div拥有语义吗？　　division（分割），对了，前段时间浏览ent.我想我对div的理解是没错的。在文档中定义一个分割或者节点。我说div用于模块化页面内容，实际上从代码结构角度是展现xml化的节点结构。除了定义一个节点以外，div目前还用于定义一个分割，产生具有结构的行。还是以登陆为例：<div><h3>用户登陆</h3><div><labelfor="name">用户名

2、</label><inputid="name"/></div><div><labelfor="pl2.0，2.0中的section和line标签，是的，在1.X中，div同时扮演了section和line的角色，因为分割产生节点，因为分割产生行。但是很明显section和line具有比div更为明确的语义，那么我们可不可以认为div的语义和br一样是模糊的，既然是模糊的，br已经被毙了，我们现在大量使用的div会不会落到同样的下场呢？不知道，至少目前的xhtml2.0中，div仍然存在。看看上面的结构代码在xhtml2.0中应该如何展示（没考

3、虑XForm）：<section><h>用户登陆</h><line><labelfor="name">用户名</label><inputid="name"/></line><line><labelfor="pl1.X中我使用了p，严格说从结构上是错误的，很明显按钮不是一个段落，我仅仅是希望它换行呈现，但是如果使用div，那么就必须给予这个div一个class="button"以区分开来，并且在设定css的时候必须先清除公有的样式属性，这样会带来不少麻烦。另外作为节点的div和作为行的div同样会出现这种问题。示例

4、：如果我定义节点div{argin:10px;padding:0/*清除*/;color:#333;}，然后在定义divdiv.button{margin:0/*清除*/;color:#F60/*覆盖*/;background:#999;}的时候再做对行div的样式冲突避免，为了避免这种情况，采用对节点div增加class="loginarea"和p，这样就可以避开两次样式清除和覆盖操作。这样的情况在结构复杂的页面中更为明显，不要告诉我加class就行了，class越多，文档通用性越差，xhtml越难固定。这就是在xhtml1.X中因为div的语义模糊带来的麻烦，回头在x

5、html2.0的结构中就很好办了，section{}，sectionline{}，sectiondiv{}，无需class也互不干扰，诶诶诶，这里的div貌似很适合它分隔的语义哈，不是行也不是节点，仅仅就是一个分隔，呵呵。　　在我认为标签中最难理解的2个之一的div现在应该算是很清楚了。剩下的一个就是span，至今我仍未能理解到span如何产生结构，只好说说自己的迷惑了。　　先还是说说div和span的区别，从大的方面来说，div被归类到StructuralModule（结构模块），而span被归类到TextModule（文本模块）。小的方面，div是block-elem

6、ents（块级元素），span是inline-elements（行内元素）。在所有StructuralModule中，div是唯一一个语义模糊的，在所有TextModule中，span也是唯一一个语义模糊的，呵呵，两个Tag唯一的共性：语义模糊。9731248:12下一页[这篇文章来自..，]上一页12[这篇文章来自..，]