解析CSS网页布局容易发生的错误

随着CSS网页布局越来越普及，国内大部分网站已经采用CSS网页布局的制作方法。在应用DIV+CSS编码时很容易犯一些错误，这里列举一些常见的错误，帮助新手朋友更好的学习与进步。

一、检查HTML元素是否有拼写错误 是否忘记结束标记

即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

二、检查CSS是否正确

检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

三、确定错误发生的位置

如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

四、利用border属性确定出错元素的布局特性

使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。

五、float元素的父元素不能指定clear属性

MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。

六、float元素务必指定width属性

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

七、float元素不能指定margin和padding等属性

IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。

八、float元素的宽度之和要小于100%

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

九、是否重设了默认的样式?

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

十、是否忘记了写DTD

如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头。

希望对初学者有帮助

• DIV+CSS是网站标准中常用术语之一，div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式,真正地达到了w3c内容与表现相分离。

• DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。下面为你介绍几点注意事项，希望对你有帮助。

  1、不要使用过小的图片做背景平铺。

  这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200*200=40, 000 次，占用资源。

  2、无边框。

  推荐的写法是 border:none;，哈哈，我一直在用这个。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源。

  3、慎用 * 通配符。

  所谓通配符，就是将 CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。

  4、CSS 的十六进制颜色代码缩写。

  习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。

  5、样式放头上，脚本放脚下。不内嵌，只外链。

  6、坚决不用 CSS 表达式。

  7、使用 引用样式表，而不是通过 @import 导入。

  8、一般来说，PNG 比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化。

  9、千万不要在 HTML 中缩放图片，一者不好看，二者占资源。

  10、正文字体最好用偶数，12px、14px、16px，效果非常好。特例，15px。

  11、block、ul、ol 等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。

  12、段落之间，至少要有一倍行距。

  13、强行指定某些元素的 line-height，正文 1.6 倍于文字大小，标题 1.3 倍。

  14、中文标点用全角。英文夹杂在中文中，左右空格，半角。

  15、中文字体的粗体和斜体，远离较好，利民利己。

2、使用position:relative

设置一个标签position:relative可以解决很多问题，特别是曾经有过看不见的经历或者奇怪布局的框架。明显的，你需要小心，绝对位置放置的子元素是否都参照找到新位置。

3、为浮动元素使用display:inline

浮动元素会有一个著名的IE6双边距marginbug。假如你设置了左边距5px但实际上得到了10px左边距。display:inline可以解决这个问题，尽管它不是必需的，但是CSS仍然有效。

4、设置元素启动hasLayout

大部分IE6（IE7）的渲染问题都可以通过起来元素的hasLayout属性来兼容。这是IE内置的设定，确定一个内容块相对其它内容块是有界限和位置的。当你需要设置一个行内元素例如一个连接变成块状元素或者是透明效果，设置hasLayout也是必须的。

5、修复重复字符的bug

复杂的布局会触发一个bug：浮动对象的最后字符会出现在已经清除浮动的元素后面。这里有几种解决的办法，部分是理想的，并且一些测试和出错是必须的。

◆确保浮动元素都使用：display:inline；

◆最后一个浮动元素使用margin-right:-3px；

◆在浮动对象最后一个元素后使用一个条件注释。例如这里输入注释…<![endif]；

◆在容器内的最后使用一个div空标签（它也必须设置90%宽度甚至更小）。