快速业务通道

CSS代码布局八条最常见的错误

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-24

很多人对于CSS都是边干边学习,因为它不像C#之类的语言那么复杂,看起来似乎挺简单,然而正是这种对CSS的不完整的理解,导致了许多的CSS代码破坏了布局,或者带来了无休止的调试,以下总结了八条最常见的错误,以及它们的解决之道:
1.不阅读或者没有读过W3C标准的文档。

上图是W3C CSS 2.1 规范截图,这是当前唯一的官方详细描述CSS2功能的文件,大部分都是干巴巴的条文,不过幸好有许多简短有用的部分,当你不清楚某些CSS性能的时候可以去查阅这个文档,下面列出一下比较常用的部分:
1.盒模型(The box model)
2.选择器(Selectors)
3.可视化格式模型(Visual formatting model)尤其是浮动(floats)和块格式(block formatting contexts)

2.DIV标签汤(  )
新手写页面最容易碰见的情况:DIV一锅粥,不管什么地方都用一大堆的DIV标签去写。比如用div去模拟表格,这种用法是完全没有道理的,增加了页面的标签污染,这种做法带来一系列问题:页面加载慢、需要写更多的CSS、代码不容易维护等等。
这种DIV综合症基本上来源于对样式表基本工作机制的误解。比如一个人写了一个3层的DIV嵌套,给每个DIV添加对应的样式,如第一个DIV设置背景色,第二个设置外边距,给第三个设置字体大小,其实他没有意识到的是,除非绝对必要,这些属性都可以合并到一个div里去实现。
另一个原因似乎是想用DIV标签去替代诸如H1/H2/LI等更恰当的标签,这是应该避免的做法,因为可能会给使用订阅器、旧的浏览器或者手机浏览器的用户带来问题。

3.ID还是CLASS?

这张图很形象,橘黄色的是class,蓝色的是ID。使用class还是id,这是相当大一部分还没有掌握逻辑化的CSS布局的人的一个通病,澄清一下:ID是定义一个项目的,而class可以定义多个项目。一个很通俗的例子,你的身份证号就是ID,而身份证上写的“中国”就是class,很多人的身份证上都写的是中国,但是号码却和你的不同。
但是也不要到处乱用class,这仍然是一个对CSS的理解问题,下图说明了滥用CLASS和合理的用ID的区别:


4.忽略缩写。

这个属于CSS的性能方面,下面一个例子就说明了问题:

DaimaRen.cn © 2009-2010 by Tomie Zhang
1
2
3
4
5
6
7
border-top-width:1px;
border-left-width:1px;
border-right-width:1px;
border-bottom-width:1px
 
/*上面和下面等值*/
border-width: 1px 1px 1px 1px;

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号