八条常见的CSS错误及修复方法

很多人对于CSS都是边干边学习，因为它不像C#之类的语言那么复杂，看起来似乎挺简单，然而正是这种对CSS的不完整的理解，导致了许多的CSS代码破坏了布局，或者带来了无休止的调试，以下总结了八条最常见的错误，以及它们的解决之道：

1.不阅读或者没有读过W3C标准的文档。

上图是W3C CSS 2.1 规范截图，这是当前唯一的官方详细描述CSS2功能的文件，大部分都是干巴巴的条文，不过幸好有许多简短有用的部分，当你不清楚某些CSS性能的时候可以去查阅这个文档，下面列出一下比较常用的部分：

1.盒模型（The box model）

2.选择器（Selectors）

3.可视化格式模型(Visual formatting model)尤其是浮动（floats）和块格式(block formatting contexts)

2.DIV标签汤

新手写页面最容易碰见的情况：DIV一锅粥，不管什么地方都用一大堆的DIV标签去写。比如用div去模拟表格，这种用法是完全没有道理的，增加了页面的标签污染，这种做法带来一系列问题：页面加载慢、需要写更多的CSS、代码不容易维护等等。

这种DIV综合症基本上来源于对样式表基本工作机制的误解。比如一个人写了一个3层的DIV嵌套，给每个DIV添加对应的样式，如第一个DIV设置背景色，第二个设置外边距，给第三个设置字体大小，其实他没有意识到的是，除非绝对必要，这些属性都可以合并到一个div里去实现。

另一个原因似乎是想用DIV标签去替代诸如H1/H2/LI等更恰当的标签，这是应该避免的做法，因为可能会给使用订阅器、旧的浏览器或者手机浏览器的用户带来问题。

3.ID还是CLASS？

这张图很形象，橘黄色的是class，蓝色的是ID。使用class还是id，这是相当大一部分还没有掌握逻辑化的CSS布局的人的一个通病，澄清一下：ID是定义一个项目的，而class可以定义多个项目。一个很通俗的例子，你的身份证号就是ID，而身份证上写的“中国”就是class，很多人的身份证上都写的是中国，但是号码却和你的不同。

但是也不要到处乱用class，这仍然是一个对CSS的理解问题，下图说明了滥用CLASS和合理的用ID的区别：