[让CSS更规范]div和span

摘自《精通CSS:高级Web标准解决方案》

有助于在文档中添加结构的一个元素是div元素。许多人误以为div元素没有语义意义。但是，div实际上代表部分(division)，它提供了将文档分割为有意义的区域的方法。所以，通过将主要内容区域包围在div中并分配ID mainContent，就可以在文档中添加结构和意义。

为了将不必要的标记减到最少，应该只在没有现有元素能够实现区域分割的情况下使用div元素。例如，如果使用主导航列表，那么不需要将包围在div中。

 

• 
     
• Home
• 
   
• About us
• 
   
• Contact
• 
   

可以完全删除div，直接在列表上应用ID：

• 
   
• Home
• 
   
• About us
• 
   
• Contact
• 
  

过度使用div常常称为“多div症”(divitus)，这是代码结构不合理而且过分复杂的一个信号。一些CSS新手会尝试用div重建自己原来的表格结构。但是，这只是用一套不必要的标签替换了另一套不必要的标签。实际上，应该使用div根据条目的意义或功能（而不是根据它们的表现方式或布局）对相关条目进行分组。

div可以用来对块级元素进行分组，而span可以用来对行内元素进行分组或标识：

Where's Durstan?

Published on March 22nd, 2005
by Andy Budd

一般不需要对行内元素进行分组或标识，所以使用span的情况比div少。在实现图像替换等效果时会看到span。不这种情况下，它们用做额外的钩子，可以应该额外的样式。

尽管目标是保持代码尽可能简洁且有意义，但是有时候为了以希望的方式显示页面，无法避免添加额外的无语义的div或span。如果是这种情况，那么也不必过分为此担心。我们正处在一个过渡时期，CSS3有望提供更强大的文档控制能力。在目前，现实世界的需要常常比理论出现得早。关键是知道在什么时候必须进行折中，并且要根据正确的原因进行折中。