快速业务通道

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

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

一般的缩写顺序为上右下左,记不住的话就记住时钟方向从12点开始。
下面是一个小清单,列出了几个最常用的缩写属性:

* font: style, weight, size, family. eg: font: italic bold 12px Helvetica
* border: width, style, color. eg: border:1px solid #ccc.
* background: color, image, repeat. eg: background: #000 url(image.png) no-repeat.
*hex色值可以将6位缩写为3位,如:#111111, #111.

点击下载一份完整的缩写汇总表:css-cheat-sheet

5.忽略Doctype。
Web浏览器被设计为可以处理几乎任何网页,当然也包括一塌糊涂的网页:标签在错误的地方封闭,没有关闭所有标签,标签关闭,但从来没有打开,不胜枚举。浏览器将尝试以适应你写的任何标记。不同的浏览器会呈现不同的断码,导致后来很多头痛。有一个最好的做法就是为页面添加Doctype。
在HTML4时代,你可以声明文档Doctype为严格性或者过渡性或者其他完全不同的东西,幸好从IE6开始浏览器开始支持新的HTML5Doctype,将浏览器带入到标准模式,而与之相对应的是诡异模式(quirks mode)。

DaimaRen.cn © 2009-2010 by Tomie Zhang
<!doctype html>

doctype非常好加,记得将每次将它放在文档的最顶部即可。

6.不当的使用单位。
不要使用px定义字体大小,使用px定义字体大小应该是table布局时代的一种旧习惯,与之对应的是像素字体在1024*768分辨率下看起来OK,但是时代是不断变化,现在1024分辨率的占有率不断下降,这也就意味着在1920的显示器上会觉得字很小。
如何解决?用em单位定义,比如font-size:1.2em,意思就是该字体是默认字体的1.2倍,在火狐和IE下相当于16px,使用em的好处是,你可以通过改变body标签或者其他任意外部标签的字体大小来控制整站的字体大小,让字体具有弹性,而用px是无法做到的,除非你使用的浏览器的缩放功能。
另外字体也不应该用诸如pt、cm等单位定义,避免使用百分比,1em和100%是等效的,但是后者占用了更多的空间而且有自己的怪癖。

7.使用清除浮动元素。
停止书写诸如<div style=”clear:both”></div>,以及element:after {content:”.”;clear:both;visibility:hidden;height:0;display:block}这些都是hacks,不是最好的做法。应该如下:

DaimaRen.cn © 2009-2010 by Tomie Zhang
#container {overflow:hidden}
/*IE6 hack*/
#container {display:inline-block} #container {display:block}

为什么要

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站: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号