网页设计中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：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd
">
分享到：
相关推荐
《CSS+DIV网页样式与布局》是一本深入探讨如何使用CSS（层叠样式表）和HTML的DIV元素来实现高效、灵活的网页设计的书籍。源码提供了书中各个实例的实际代码，供读者学习和实践。以下是对这些知识点的详细解释： 1. ...
2. **Div+CSS布局**：在网页布局中，Div是容器，CSS负责样式和定位。常见的布局模式有流式布局、固定布局、响应式布局等。流式布局让元素按顺序排列；固定布局适用于屏幕尺寸固定的设备，元素的位置和大小固定；响应...
通过逐步调试和修改源码，你可以逐步掌握各种布局技巧，提升网页设计的灵活性和效率。 总之，"高效学习CSS布局之道244个范例源码"是一份宝贵的教育资源，它将带你踏上精通CSS布局的道路。不论你是初学者还是经验...
在网页设计领域，CSS（Cascading Style Sheets...通过学习这个CSS教程，你将能够熟练地掌握网页布局与美化的方法，从而提升你的网页设计能力。实践出真知，不断尝试和调试，你会发现CSS的世界既充满挑战，又极具乐趣。
在网页设计领域，`DIV+CSS`布局是现代网页制作的核心技术之一，它极大地提高了页面的可维护性和表现力。本资源"DIV+CSS布局练习"提供了一个经典的实例，适合那些想要深入理解和掌握`CSS`与`DIV`的开发者。在这个...
在这个“完美网页设计-CSS”主题中，我们将深入探讨CSS的重要概念和实践技巧。 1. **CSS基本语法** CSS由选择器和声明组成。选择器定位要应用样式的HTML元素，声明则包含属性和值，定义元素的样式。例如： ```css...
《Div+CSS布局大全》是一本深入探讨网页布局技术的资源集合，主要聚焦于使用HTML的Div元素结合CSS样式表来构建网页结构和设计的方法。在这个压缩包中，包含了一份详细的PDF文档，全面讲解了Div+CSS布局的核心概念、...
- **DIV+CSS布局**：这是一种常用的网页布局方式，通过将页面内容分割成不同的区块（DIV），并利用CSS对这些区块进行位置和样式的控制，从而实现更加灵活和丰富的页面设计。 - **色彩与活力**：通过合理选择色彩搭配...
在这个个人网页设计中，CSS可以用来设置字体、颜色、背景、边距、布局等，以实现美观的效果。CSS3提供了许多新的选择器（如伪类、属性选择器）、过渡和动画效果、以及响应式设计的媒体查询等，使得设计更加灵活和...
这个设计作业不仅有助于学习者掌握基本的网页布局技巧，还能激发他们的创新思维，提升网页设计技能。 1. **HTML**（HyperText Markup Language）：HTML是网页设计的基础，用于创建网页结构和内容。在这个模板中，...
在网页设计领域，`DIV+CSS`是一种广泛使用的布局技术，它将内容和表现分离，提高了页面的可维护性和可扩展性。本实例教程旨在帮助读者深入理解和掌握`DIV+CSS`网页样式与布局的技巧。 一、`DIV`元素详解 `DIV`是...
总之，《div+css布局大全》将带您逐步深入CSS2的世界，从基本概念到高级技巧，帮助您成为一名熟练的网页布局专家。通过深入研究并动手实践，您将能够自如地运用div和CSS创造出美观且功能强大的网页设计。
总的来说，"别具光芒－网页布局案例剖析源代码"是一个全面的教育资源，旨在帮助开发者提升CSS布局技能，理解网页设计的创新方法，并通过实际操作来增强实践经验。无论是初学者还是有经验的开发者，都能从中获益，...
- **Grid布局**：适用于二维布局，让网页设计可以更精确地控制行和列，实现复杂的网格系统。 - **浮动布局**：传统方法，通过float属性使元素脱离正常文档流，实现并排显示。 4. **案例分析** - **导航栏设计**...
在网页设计领域，CSS（Cascading Style Sheets）是一种至关重要的技术，用于定义网页内容的样式、布局和呈现效果。本资源"CSS 网站设计模版学习"旨在帮助初学者和进阶者深入理解如何运用CSS进行高效且美观的网站设计...
它允许我们将样式规则与结构内容分离，使得网页设计更加灵活且易于维护。本文将重点讨论CSS调试工具和CSS可视化编辑器，以及它们在提升开发效率和学习过程中的重要作用。 首先，CSS调试工具是Web开发者必不可少的...
【div+css网页布局】是网页设计中一种广泛采用的技术，用于实现页面的结构化和样式化。Div（Division）是HTML中的一个区块元素，它主要用于组织和分隔页面内容，而CSS（Cascading Style Sheets）则是一种样式表语言...
《变幻之美-DivCSS网页布局揭秘（案例...通过学习《变幻之美-DivCSS网页布局揭秘（案例实战篇）》案例源码，读者不仅可以掌握DivCSS布局的理论知识，还能通过实践提升实际操作技能，为未来网页设计与开发打下坚实基础。
该项目主要是一个面向大学生群体的静态网页设计作业示例，特别强调了“黑色主题个人博客”的设计与实现，这为那些需要完成网页设计作业的学生提供了一个非常实用的参考模板。此项目不仅限于博客类网站，还覆盖了多种...
《CSS网站布局实战》这本书是Web开发者们学习和提升CSS布局技能的...总之，这个实例源码包是学习和提升CSS布局技巧的宝贵资源，通过实践和调试代码，你可以加深对CSS布局的理解，从而构建出更加优雅、功能丰富的网站。