网页规划 CSS布局调试的有用办法

网页规划中CSS布局是很重要的部分，下面介绍几种查看调试CSS布局的有用办法。

1. 查看HTML元素是否有拼写过错、是否忘掉完毕符号

即使是内行也经常会弄错div的嵌套关系。能够用dreamweaver的验证功能查看一下有无过错。

2. 查看CSS是否书写正确

查看一下有无拼写过错、是否忘掉结尾的 } 等。能够使用CleanCSS来查看 CSS的拼写过错。CleanCSS本是为CSS瘦身的东西，但也能查看出拼写过错。

3. 用删去法确定过错发作的方位

如果过错影响了全体布局，则能够逐一删去div块，直到删去某个div块后显现恢复正常，即可确定过错发作的方位。

4. 使用border特点确定犯错元素的布局特性

使用float特点布局一不小心就会犯错。这时为元素增加border特点确定元素鸿沟，过错原因即真相大白。

5. float元素的父元素不能指定clear特点

MacIE下如果对float的元素的父元素使用clear特点，周围的float元素布局就会紊乱。这是MacIE的闻名的bug，假使不知道就会走弯路。

6. float元素务必指定width特点

很多浏览器在显现未指定width的float元素时会有bug。所以不论float元素的内容如何，一定要为其指定width特点。

别的指定元素时尽量使用em而不是px做单位。

7. float元素不能指定margin和padding等特点

IE在显现指定了margin和padding的float元素时有bug。因而不要对float元素指定margin和padding特点（能够在float元素内部嵌套一个div来设置margin和padding）。也能够使用hack办法为IE指定特别的值。

8. float元素的宽度之和要小于100%

如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显现。因而请保证宽度之和小于99%。

9. 是否重设了默许的款式？

某些特点如margin、padding等，不同浏览器会有不同的解释。因而最好在开发前首先将全体的margin、padding设置为0、列表款式设置为none等。

10. 是否忘掉了写DTD？

如果无论怎样调整不同浏览器显现结果还是不一样，那么能够查看一下页面最初是不是忘了写下面这行DTD：

http://www.w3.org/TR/html4/loose.dtd“》