九乡新闻网致远海程贸易公司电话:CSS调试技巧五则，兼谈“提问的艺术” - CSS,Javascript,jQuery,视...
来源：百度文库 编辑：九乡新闻网 时间：2024/04/30 10:49:56
CSS开始进入布局领域，并逐渐开始广泛地被使用，越来越多的设计师转向CSS，然而随着使用的逐步深入，会发现使用CSS的一个问题是，懂得越多，遇到的问题就越多。在实际制做网站的时候，总会遇到以前没有碰到过的新问题。就好像我们学了十几年的英语，单词、语法都背了一大堆，但是真到用的时候，还是总遇到不会说的东西。
实际上这还是学习途中的一个阶段，算是成长的烦恼。毕竟每解决一个问题，功力就会精进一层。因此，除了彻底把CSS的原理搞清楚之外，就要尽可能多地实践，解决实际问题，这样终归是可以把问题都解决的。
在实践中，最关键的问题就是如何调试，也就是在遇到页面表现和预想的不一样的时候，怎么找到问题的关键。当然，前提是你对你写的代码基本上是清楚的，否则谈不上调试。
对于CSS而言，本质就是大大小小的盒子在页面上摆放，你不是设计师，而是排字工人，你眼中看到的不是文字，不是图像，就是一堆盒子！你要考虑的就是盒子与盒子之间的关系！标准流？并列？上下？嵌套？间隔？背景？浮动？绝对？相对？定位基准？等等等等……
技巧1：设置背景色或者边框，确认错误范围
归根到底，任何排版上的错误，都是由于你认为某个盒子应该在的位置和浏览器认为的位置不同，所以如果你本身就是浏览器，一切错误都不会出现。
因此，每当你发现表现页面不如你意的时候，比如希望在左边跑到右边了，希望在一行的变成两行了等等，都首先明确每个盒子的范围，这时你可以通过临时给盒子设置背景色，或者设置一个1像素边框的方法，清楚地了解浏览器认为和盒子范围和你认为的盒子范围是否一致。如果可以设置背景色最好使用背景色，因为设置边框会改变布局，这就好像我们使用温度表测量温度，前提是认为温度表本身不会影响被测物体的温度，实际上物理学告诉我们，任何两个物体都是相互影响的，即所谓测不准原理。但有时对于复杂的页面，背景色可能无法看出范围，还是需要使用边框来完成这项任务，但你要排除增加的临时边框引入新的问题的可能性。
当某个盒子的范围不是你所希望的，恭喜你，你已经找到错误所在了，接下来就是分析为什么浏览器要把它放在这里，而不是按照你的意愿去放置？你经过这一步仔细计算，你的所有代码都是符合CSS规范的，那么你需要确认这是浏览器错了，而不是你错了。不过你应该相信，99%的可能是你粗心算错了，1%的可能是浏览器有错误。就好像你回忆一下，上学时参加过的所有考试，老师确实有时会把你答对的题目判错，但是这种概率很低。