Question

为什么网页设计推荐用div+css，但又说不要滥用div？还有怎样才能更好的学习div？

Answer 1

推荐用div+css 和 滥用div 并不冲突。

你首先要明白什么叫滥用div：

1. 滥用是由于很多人学得不到位，或没动脑筋

2. 看了教程和书死搬书上东西脑袋不能转弯
   

3. 现在的书和教程质量也差，本身也是东拼西凑出来的，误导了很多人

滥用的例子：

做一个搜索表单或导航栏，按设计效果来说，直接把css用在这个表单的form上或导航的ul上就能实现了，滥用的人偏偏要去form外面再加一个div套住表单。

网页里面的内容区，应该尽量按语意和段落用h、p等各种标签来表示，并把css用在这些标签上，而滥用的人通篇都是用div去包含这些内容。

其实滥用无非主要就是两点：

1. 胡乱的嵌套div或其他标记，由于对css和html的掌握不熟，写了多余的标签
   

2. 不用有语意的标签，一切都用div和span去包含

推荐用并没错，要避免上面几点首先要做到对html和css都掌握熟练；

但是很多时候也有模棱两可的东西在里面，这个就要根据经验和项目情况见仁见智的处理了，打个比方我做的网页只要遇到是用户能编辑输入大段内容的区域都是这样一个结构：

<div class="user-zone">

    <p>网页的内容区文字段落1</p>

    <p>网页的内容区文字段落2</p>

</div>

然后我在.user-zone里面去写样式控制这个div下面p、h、a等各种玩意的的缩进、宽度、字号、颜色等东西。

按照我上面说的不滥用的话，貌似此处就该直接在p上面写css控制其本身样式，而div是多余的该del掉。

问题是交给用户输入内容的区域，有可能他不输入p(起码80%的客户都不知道有p的存在)，而是在某编辑器里面每输入：一行字 就敲 两次回车 来换行，产生的是如下代码：

网页的内容区文字段落1<br /><br />

网页的内容区文字段落2

当你直接在p上写样式时，客户都不输入p进去，还控制个屁..

此时在外面加个div虽然p的css失效了，但起码还能控制下文字行高、链接、字号之类的，不至于整个页面太难看。

这个貌似多余的div是不是滥用看你怎么理解了，鬼知道客户会从word里面拷贝什么进去而不清除word格式标签，多个div起码你还有一半的控制权。

Answer 2

过去的网站都是表格的布局，这样的布局虽然实现起来很容易，但也会使布局和样式紧紧地结合在一起，维护起来比较困难。因为，如果你想更改页面的样式，就不得不修改HTML的结构，工作量大，容易出错。如今网站结构复杂，使用table需要嵌套很多层，这样的代码会让人看的一头雾水。

然而使用div+css，布局样式就完全分开了。使用css，就像使用细线操作木偶一样。只要你的div布局设计的合理，大部分的样式修改都不需要改变HTML的结构。你可以轻松互换两个div的位置，但表格布局却无法实现。

使用div+css，容易操作DOM结构。现在网站的交互越做越好，大量使用js特效。然而移动一个表格的单元格，会破坏整个表格的结构，谈不上什么特效了。

在该使用表格的时候就使用表格。本来就带有表格性质的数据，如果使用div，当然就是滥用喽~~

Answer 3

因为div+css对网站的布局排版作用很大，同时主要是搜索引擎比较好收录。凡事过火了当然不好啦，过分滥用div会造成网站不简洁，对搜索引擎不友好，影响网站的质量。学习div+css,主要是靠坚持，多去看一些这方面的书，参考别人的例子。其次就是去一些学习的网站看看。学习任何东西都不是一朝一夕的事，希望今后你学有所成。