关注前端开发
关注用户体验

新手在进行CSS网页编码以前需要注意的十个问题

新手在进行CSS网页编码以前,往往感觉难以下手,或者丢三忘四,虽然大前端的前端开发教程很丰富,但全面的了解,还需要动手编码,只的通过实际编码,才能提高。有时候CSS熟手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此。小错误却往往造成大问题,浪费很多无辜的时间来调试和排错。查看下面这份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?

如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头是不是忘了写下DTD声明。

这些问题,看似简单,在初写代码的时候,往往很容易犯。供大家参考。

赞(2)
未经允许不得转载:大前端 » 新手在进行CSS网页编码以前需要注意的十个问题
分享到: 更多 (0)

评论 16

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #16

    Right here is the perfect website for anybody who hopes to find out about this topic. You know a whole lot its almost tough to argue with you (not that I really would want to…HaHa). You certainly put a fresh spin on a topic that’s been discussed for a long time. Wonderful stuff, just excellent!

    Apex Legends2周前 (05-15)回复
  2. #15

    Visualize this or otherwise, you will find definitely numerous methods your home appliances could be damaged or occur to be much dirty in the kitchen area. A protective accent is a great approach to help prevent visual and also mechanised harm that will detract out of your KitchenAid product.

    Lanora Rosher2周前 (05-13)回复
  3. #14

    thank, I thoroughly enjoyed reading your article. I really appreciate your wonderful knowledge and the time you put into educating the rest of us.

    Nonton Anime2周前 (05-10)回复
  4. #13

    Awesome blog you have here but I was curious about if you knew of any discussion boards that cover the same topics talked about in this article? I’d really like to be a part of online community where I can get comments from other experienced people that share the same interest. If you have any recommendations, please let me know. Cheers!

    cat tales3周前 (05-08)回复
  5. #12

    I really like it when individuals come together and share opinions. Great website, keep it up!

    Apex Legends1个月前 (04-20)回复
  6. #11

    Nice post! Thank you.

  7. #10

    After looking over a few of the articles on your web site, I truly appreciate your technique of writing a blog. I saved it to my bookmark website list and will be checking back soon. Please check out my web site as well and let me know what you think.

    Apex Legends Octane1个月前 (04-13)回复
  8. #9

    I could not refrain from commenting. Well written!

    DMC52个月前 (04-12)回复
  9. #8

    Excellent write-up. I definitely love this website. Keep writing!

    DMC52个月前 (04-10)回复
  10. #7

    Hi there, just became alert to your blog through Google, and found that it is really informative. I¡¦m gonna watch out for brussels. I¡¦ll appreciate if you continue this in future. Many people will be benefited from your writing. Cheers!

    my singing monsters2个月前 (03-28)回复
  11. #6

    A very very interesting article! I’ll try to track that continues here! Thank you.

    Lizabeth Zolman3个月前 (03-11)回复
  12. #5

    受教了!

    demonsleep5年前 (2014-10-20)回复
  13. #4

    its first in-flow block-level child s top margin if the element has no.

    Monex9年前 (2010-12-17)回复
  14. #3

    grip n sip

    avg9年前 (2010-12-15)回复
  15. #2

    @水墨寒:嗯,确实是这样的,继续关注

    浩子9年前 (2010-12-14)回复
  16. #1

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

    也可以用不同颜色的背景确定布局特性。

    用class,慎用id

    开始写css 的时候最好在网上下载一份css命名规则,一定要要养成这样的习惯!~

    水墨寒9年前 (2010-12-14)回复

themebetter 国内更好的WordPress主题服务商

立即前往