页面中css调试和问题 解决的一些经验总结
“飘尘”通过精心收集，向本站投稿了3篇页面中css调试和问题 解决的一些经验总结，下面就是小编给大家分享的页面中css调试和问题 解决的一些经验总结，希望大家喜欢!
篇1：页面中css调试和问题 解决的一些经验总结
在前端开发中经常会碰到浏览器兼容性问题、css2各个属性被各个浏览器支持的问题,css继承,css叠加等等,我们经常因为这些而需要调试页面中c...
在前端开发中经常会碰到浏览器兼容性问题、css2各个属性被各个浏览器支持的问题,css继承,css叠加等等,我们经常因为这些而需要调试页面中css.
以下只是我个人的一些经验总结,如果有不合适请留言斧正,欢迎补充.
一、为什么页面会出现种种的bug
1.浏览器的本身对CSS支持BUG:
IE6有一堆BUG;
FF需要注意清除浮动;
还有浏览器对css2各个属性的支持问题,大家需要了解浏览器对css2各个属性的支持情况;
2.直接书写错误,由于自己在写css时候的粗心造成的BUG
比如将 .ask-lable{width: 934px;height:94px; padding-top:43px; margin:0 auto;}
中的“{}”写成了中文状态的“{}”,或者溜掉了结束的“}”;margin:0 auto;中的冒号和封号,也会经常被写成中文的,还有0(零)经常会被写成o(英文字母o);width: 934px;中的px经常会被忘掉,还有以下缩写的格式等等;
3.在页面编码不统一的情况下,经常会碰到,样式写着写着,在ie6下页面就乱掉了,这是IE6的bug;
4.没搞清楚html的块状元素和内联元素,css的某些属性对内联元素不起作用,
比如:《span style=“text-align:right;margin:30px; padding:30px; border:#F00 2px solid”》span是内联元素《/span》;
比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性.也可以把块元素div加上display:inline,让他显示为内联元素.
5.css继承,css叠加也可能造成一些bug,这里要特别注意一下重置样式(cssreset)中和公用样式(public)的继承.
二、开始调试
1.找一个合适的调试工具,比如FireFox Web Developer, DOM Inspector,遨游的PageView, Internet Explorer
Developer Toolbar, 还有Firebug等等,现在FireFox 的Firebug调试比较流行,他会把你所选择的DOM(标签)的相关样式都显示在右边,当然然其他工具也有这个这些功能.
2.确认问题所在的样式,主要可以看看第一部分说的为什么页面会出现种种的bug,修改并测试.
3.排出以上问题,如果还是找不到那里错了,那就用“平分法”删除样式;平分法就是一半一半的删除样式,直到页面达到你预想的那样位置,一半1分钟呢可以找到问题所在的那一行或者几行代码,这个方法要确保你的编辑器能任意的撤销,还原.
三、解决问题
1.学会用google,百度.ie6的大多数bug,firefox的清除浮动,都可以在网上找到,同时要靠自己积累经验.
2.问问题,到群里,论坛里问问题要注意方式方法;首先要表达清楚你的问题所在,能表达问题的做好方法是用简单的demo,告诉人家什么浏览器,什么样情况下会出错,做好把demo直接放到论坛,或者代码盒子,让人家最直接的看到你的问题,群里不要贴10行以上的代码,大家每天再看这些东西,你贴一堆,如果不是他空的无聊,我保证没人会看你的代码.不要只要答案!人家可能不会给你答案,只给你一些建议,一些提醒,或几个关键字,根据建议,提醒,关键字去google,百度搜索一下.比如:人家说这可能是清除浮动的问题,可能你从来没听说过清除浮动这个词,那就别问了,马上去google,百度搜索清除浮动.看看是不是这个问题,如果不是,告诉人家不是这个问题.不管有没有解决问题,跟人家说声谢谢,至少要心存感激.
3.回避问题,不是任何问题你都可以找到答案的,但是却可以找到解决方法.不是任何问题你都可以找到解决方法,但是却可以避免这些问题,比如,上下容器margin-bottom和 margin-top重叠问题,其实这些问题可以回避,你把下一个浏览器的margin-top改成padding-top试试等等.
厚诚集智 成长无限 企业大学网 www.51hlht.com
篇2：在WordPress页面中直接切换css文件
首先请看以下这三个用WordPress搭建的站点：
Xplosive Reloaded
Wicked Lemon
Wpdesigner7
注意它们的右上角位置都有几个色块，点击这几个色块，可以立即更改整个站点的配色，实际上是即时切换了style. sheet(css)文件，以实现这种效果，其实切换css文件可不仅仅可以改配色，把整个主题翻个底朝天都不难。那么这种华丽的效果在代码上是如何实现的呢？BlogOhBlog的Jai专门写了一篇文章教导大家。当然了，我很乐意将其用方块字重新描述一遍与大家分享。
第一步，让我们来看看WordPress是怎样调用css文件的，在header.php里头，可以找到类似：
这样的一行，其中rel=“stylesheet”说明这是在调用css。
好，现在假设你有两个别的css文件，一个叫orange.css，另一个叫blue.css，你希望站点能实时切换这几个css文件，那要怎么办呢？
首先必须在header里面加入定义，把那两个css文件放在你正在使用的模板目录下(也就是原始的style.css所在的路径)，然后在header.php方才那行的下面加上这样两行：
当然，也可以放在别的地方，以上两行的路径做相应修改即可，
管理资料
其次，点击下载styleswitcher.js文件 （酷勤网备用下载地址：styleswitcher.js），将其也放在正在使用的模板目录下。
接着，继续编辑header.php，在标签前面加上调用这个js文件的代码：
最后，就是在你的WordPress页面中加入几个按钮来切换css。这就没有什么统一的代码了，你想怎么弄都行，发挥想象力吧。下面是一例，随便在模板哪个地方加上：
Orange Blue
那么，教程结束了，很简单吧。自己动手试试看？
来自：webabie.com/switch-style-sheet-real-time/
篇3：在移动Web页面中使用CSS固定页脚
这篇文章主要介绍了在移动Web页面中使用CSS固定页脚,作者推荐使用box-sizing的百分比调整方法,需要的朋友可以参考下
一种单页应用的页面结构
面向移动端的单页应用（Single Page Web Application），从页面代码上来说，会使用较一般网页不同的结构，单页应用并不是说应用只需要一个视图，而是说可以将组成应用的多个视图集合在一个网页内呈现，且在视图之间能够自由切换（平滑的动画形式居多）。
我制作单页应用使用的是一种常见方法，像下面这样：
CSS Code复制内容到剪贴板
“view-page view-current”>
“view-page”>
“view-page”>
.view-page{
display:none;
position:absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.view-current{
display:block;
}
可以看出，其原理是视图都由绝对定位的覆盖屏幕大小（可见视口）的元素构成，在某一时间点，只会显示一个视图。
固定页脚的问题
那么，固定页脚是一个什么问题呢？请看下图：
先说说什么是固定页脚吧。上图右可以看到，当页面内容较多，超出一屏的高度时，页脚是“自然地”紧跟在内容后边，滚动到底部时，才会看到位于最下方的页脚。同时，上图左可以看到，当页面内容较少时，页脚则直接位于屏幕最下方，剩余区域则是空白。这就是固定页脚，它可以算是一种比较理想的“总是在它应该在的位置”的页脚。
那么，问题来了。参考上图左，除了固定页脚的效果之外，现在还要求当页面内容较少时，页面内容（Content）可以水平垂直居中于剩余的空间（Container）。在上述单页应用的页面结构中，应该如何实现呢？
方法探讨
水平垂直居中与Flexbox
让我们一步一步来。先完成“水平垂直居中”。由于内容高度不确定，所以这里适合使用弹性盒模型（Flexbox）。
关于弹性盒模型的指南，推荐阅读A Complete Guide to Flexbox 和Dive into Flexbox 。
应用Flexbox实现水平垂直居中可以先得到这样的代码（由于其他视图不再需要，这里只保留一个视图）：
CSS Code复制内容到剪贴板
“view-page view-current”>
“container flex-container justify-content-center align-items-center”>
“content”>
上面的div.container对应前面图中的剩余空间（作为容器），div.content则是需要水平垂直居中的内容。对应的css是：
CSS Code复制内容到剪贴板
.container{
min-height: 100%;
}
flex-container、justify-content-center、align-items-center都是弹性盒模型的辅助class（熟悉了Flexbox就可以很快理解）。使用辅助class是因为弹性盒模型从前到后几经变化，兼容处理需要稍多代码，
这些辅助class的css是：
CSS Code复制内容到剪贴板
.flex-container{
display: -webkit-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.justify-content-center{
-webkit-box-pack:center;
-webkit-flex-pack:center;
-ms-flex-pack:center;
-webkit-justify-content:center;
justify-content:center;
}
.align-items-center{
-webkit-box-align:center;
-webkit-flex-align:center;
-ms-flex-align:center;
-webkit-align-items:center;
align-items:center;
}
到此，水平垂直居中就完成了。
实现固定页脚
现在加入页脚的部分。这时候html代码变成：
CSS Code复制内容到剪贴板
“view-page view-current”>
“container flex-container justify-content-center align-items-center”>
“content”>
“footer”>
注意，div.view-page是绝对定位，且定义了height: 100%;，而此时div.container也定义了min-height: 100%;。考虑到要“为页脚留空间”，结合传统网页中的固定页脚的做法，得到完整的css：
CSS Code复制内容到剪贴板
.container{
min-height: 100%;
margin-bottom: -120px;
padding-bottom:120px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.footer{
height:120px;/*假定页脚的高度为120px*/
}
以上就是在这种条件下的固定页脚的实现方法。虽然最后看起来只是这样一小段代码，但我还是思考了相当一段时间加上试验才得到。其中padding-bottom和负值的margin-bottom的结合应用很关键。此外，作为移动端的网页，要想到使用box-sizing这个配合百分比会非常有用的CSS3属性。
其他形式的尝试？
我也试过使用主轴为垂直方向的Flexbox来实现，但可惜经过测试，flex-direction: column;还没有被现在的主流手机浏览器所支持。
传统网页的固定页脚
关于传统网页的固定页脚，有一个专门的站点HTML5 CSS Sticky Footer介绍了其实现方法和原理，你也可以阅读我以前写的简单实现固定在页面底部的页脚。
结语
移动Web单页应用的页面结构是比较特别，所以固定页脚这么有用的东西做起来又是一个新话题了。想到并试验成功后，我第一反应就是赶紧记下来，真是担心以后忘掉了还得费劲重想...
如果你也碰到过类似的需求或有过类似的想法，相信本文可以提供一点参考！
【页面中css调试和问题 解决的一些经验总结】相关文章：
6.在PL/SQL 开发中调试存储过程和函数的一般性方法数据库教程
7.浅析Oracle和SqlServer存储过程的调试、出错处理数据库
9.和刘中书仙诗
10.从失败中学习和总结
文档为doc格式
