欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 > 经验分享 > Css&Div > 新手写CSS常见错误汇总

新手写CSS常见错误汇总

2018-06-23 565 收藏 0 赞一个 0 真差劲 0 去评论

刚写CSS那会,发现同样的代码在别外可以运行,而在自己的网页上不能运行,有时候气得想摔鼠标,其实有时候不是你代码有问题,而是与CSS相关的定义出了问题,为了避免出现这些错误,即使你是CSS老手,也要关注一下这些常见的错误,下面来说下,在写CSS的时候,究竟有哪些错误是最容易犯的。

一、检查HTML元素是否有拼写错误、是否忘记结束标记  即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

二、确定错误发生的位置  如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。当然,在测试前请注意原来代码的备份。 

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

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

五、检查CSS是否正确  检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。六、float元素务必指定width属性  很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。

七、是否忘记了写DTD  如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头是不是忘了写DTD。个人建议DTD还是一定要加的,要不然你会发现CSS代码根本和定义的运行效果不一样,你可将下面这行代码拷贝到你网页的最头部,替换<htmll>标签:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

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

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

十、float元素需谨慎指定margin和padding等属性  IE在显示指定了margin和padding的float元素时有bug。因此谨慎对float元素指定margin和padding属性。也可以使用hack方法为IE指定特别的值。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

大家评论