位置：首页>> 网络编程>> 网页设计>> 八条常见的CSS错误及修复方法（2）

八条常见的CSS错误及修复方法（2）

作者：代码人　来源：代码人blog　发布时间：2010-04-08 16:54:00　

标签：CSS错误,修复,缩写

4.忽略缩写。

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

border-top-width:1px;
border-left-width:1px;
border-right-width:1px;
border-bottom-width:1px

/*上面和下面等值*/
border-width: 1px 1px 1px 1px;

一般的缩写顺序为上右下左，记不住的话就记住时钟方向从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）。

<!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，不是最好的做法。应该如下：

#container {overflow:hidden}
/*IE6 hack*/
#container {display:inline-block} #container {display:block}

为什么要用overflow:hidden，因为它具有神奇的魔力，具体解释看W3C的文档解释。
(这里有待商榷，感谢Smallto提出的想法，浮动清除方法以及他们的优缺点见彪叔的总结 )

8.忽略验证。

幸运的是，越来越多的人加入到了web标准的行列，并主动去效验它们的网站，而不幸的是，还有很多网站没有意识到，无效的标记意味着今后更多的工作。
W3C为我们提供了HTML在线效验与CSS在线效验

第一页上一页 1

投稿

八条常见的CSS错误及修复方法（2）

猜你喜欢