Dudo Says

20个优秀网站助你征服CSS

dudo@dudo.org(dudo) — Sun, 31 Aug 2008 18:24:23 +0800

1. A List Apart CSS Topics

A List Apart是一个CSS优秀文章的收集网站，从1999年开始收集文章，关注最佳网页设计。

2.CSS Help Pile

CSS Help Pile重点关于CSS资源，技巧与手法。该网站授予良好的网页组及优秀的资源，适用于各个水平的开发人员，分类包括：初学者，浏览器解析的错误，简评CSS的书籍。

3.CSS Basics

CSS Basics可以当成一书来看，用了18个章节来传授基本的CSS概念，对初学者相当有帮助。还有就是所有18个章节，提供打印或PDF格式下载。

4.Holy CSS Zeldman!

Holy CSS Zeldman是关于基于标准的CSS教程、工具、布局相关链接的收集。

5.Eric Meyer: CSS

这里主要是收集Eric Meyer (著名的开发者)的作品，在css/edge和CSS reference等页面可以找到一些相关的资源。

6.456 Berea Street – CSS category

456 Berea Street下有一个CSS分类，里面有超过300篇文章，这些文章有教如果放置图片，有些是说CSS技巧。

7./* Position Is Everything */

这里只要关注的是如何摆脱浏览器显示的错误

8.HTML Dog CSS Tutorials

HTML Dog致力于教授最佳的XHTML与CSS布局，分为初级，中级，高级三个级别

9.Learn CSS Positioning in Ten Steps

如果使用CSS定位是一个棘手的问题，这里有10步，看能不能帮你解决。

10.Andy Budd CSS/Web Standards Links

Andy Budd有着一系列CSS/web标准的有用链接，以帮助你找到有用的资料。

11.W3CSchools CSS Tutorial

W3CSchools有一个CSS部分，内容涵盖了初级到高级的CSS主题。

12.css Zen Garden

css Zen Garden给我们展示了CSS是怎样工作的，使用相同的HTML文件，设计师提交的外部样式来美化这个文件。用Web Developer Tool就可以检查CSS是如何进行布局工作的。这个网站在7个最好的网上CSS资源里也有介绍。

13.CSS at MaxDesign

MaxDesign拥有Russ Weakley的一套CSS精彩教程，在Listmatic里，教你使用CSS格式化列表，在Floatutorial里，介绍floating元素的知识。

14.CSSeasy.com

CSSEasy.com拥有丰富的经验及创意分享，让我们更好地了解CSS。

15.CSS-Discuss

CSS-Discuss是一个CSS爱好者社区，而 CSS-Discuss Wiki是关于CSS的应用收集。

16.Web Design from Scratch: CSS

Web Design from Scratch有一章节是关于CSS的，涵盖了CSS的基本概念。其中的Introduction to CSS对初学者很有帮助。

17.CSS-Tricks

CSS-Tricks是一个专注CSS的博客

18.CSS on Delicious

The CSS tag on Delicious是关于优秀CSS设计的链接收集，亮点就是让我们知道哪些好东西在被人看。

19.SitePoint CSS Reference

SitePoint有一个CSS部分，专门讨论入门水平的CSS主题

20. CSSDog

CSSDog有一部分为初学者与高级开发者设计的，其中的开发经验及参考，个人认为是最有价值的部分。

原文地址：http://sixrevisions.com/css/20_websites_learn_master_css/
译文地址：http://www.jianbitou.com/post/20_websites-learn-master-css.html

工作了，发现时间真的是个大问题

dudo@dudo.org(dudo) — Thu, 14 Aug 2008 19:15:59 +0800

    很久之前就想整一下自己的博客，而且已经有了比较好的想法，但是时间是个在问题，下了班之后想休息，加之没有电脑又不想去网吧（越来越不喜欢那种环境了）所以就连更新都已经很少了。很想把程序升级一下，但是这需要大把的时间和精力，我真不知道，过了这么长时间自己还能不能写出一个像样的程序来。原来打算发布一个“博客分家”程序，估计要被推迟了，可能是明年？我不知道！

   工作之后爱好也可能成了一种负担，我喜欢从事IT，可是机缘的不巧合让我始终无法进入到这个行业（在这里我要特别感谢Ghost的推荐，但是由于很长一段时间我无法上网以至错过了，sorry）。

   每次更新的时候总是那么匆匆，我已经有好长时间没有上QQ了，两三个月甚至更长，我很想念我的朋友们。

离开一段时间（Absent for a long time）

dudo@dudo.org(dudo) — Wed, 30 Jul 2008 19:39:28 +0800

    最近一直在进行封闭式培训，没有时间出来上网，基本上是过着与世隔绝的日子。这样的生活已经持续了一个月，还将继续持续到8月7号，天呢，我快受不了了。
    PJBlog已经更新，但是我也还没有时间更新，估计也要半个月之后的事情的了，还好在6月底我已经体验了一下内测版了。
    谢谢朋友们的关心，祝大家都快乐！

内联格式化模式（line-height原理）

dudo@dudo.org(dudo) — Fri, 27 Jun 2008 23:05:04 +0800

英文原文：http://meyerweb.com/eric/css/inline-format.html
中文翻译：http://www.dudo.org/article.asp?id=254

重要提示：

本文并非一篇简单地介绍内联格式模型（inline formatting model）的文章。相反，它是对内联格式（inline formatting）本质规则和过程的扼要剖析，是对CSS2中规则的总结。本文的知识点十分密集，即使错过其中一个小小的知识点也可会导致根本性地误解。本文经过了CSS工作组（CSS Working Group）和多个CSS组织（CSS cmmounity）反复推敲和检查，但是这并是说本文已经做到至善至美了。也可能有些情况这里没有涉及到，同时有可能文中提到的一些名词术语对于新手来说存在一定理解上的困难。但是我坚信本文得出的结论是正确无疑的。如果你确定本文存在某方面的谬误，请把你的观点写下来发信到www-style@w3.org进行讨论。谢谢！

前言：

为了清晰地描述内联格式模型（inline formatting model）的工作原理，弄清使用到的专业术语的具体含义非常重要。首先来看几个等式，然后是对这些术语的解释。

em-box = font-size = content-area
content-area + (half-)leading = inline box
inline box(min/max) = line-box

其中，

em-box = 指定字体中定义的em-box（文本本身盒模型的大小）
font-size ＝ em-box中指定用于度量字体显示大小的数值
content-area = 在非置换元素中，盒模型是使用元素内每个字符的font-size的整体大小来描述的；在可置换元素中，则中元素的实际高度加上margin、border、padding的值；
（half-）leading ＝每个元素由于font-size和line-height的不同，在content-area的上方和下方产生的差值，并且上下方的差值相等的
inline box ＝每个元素的(half-)leading和content-area之和；对于非转换元素，一个元素的inline-box的高度恰好等于它的line-height的值；对于可转换元素，一个元素的inline box高度则正好等于其实际高度加上所有的margin、border、padding等。
line-box＝它的上下边界分别是行内所有inline-box的最高点和最低点。

上面的描述中所未涉及到的几点：

content-area和块级元素的内容盒框相似
内联元素的背景会同时应用在元素content-area和padding上
内联元素的边框是围绕在contend-area和padding之外的
内联元素及其衍生盒模型的非转换元素中在垂直方向上应用margin将不会起作用（但是水平方向可以）
可转换元素的margin和border会影响元素line-box的高度，因此也会影响到所在行的line-box高度

此外，inline box是根据vertical-align来处理对齐方式的。上面的说明中没有提到这一点，但是它却CSS2：10.8中介绍的规则。

结论：

在只有一行font-size和line-height相等的内联非置换元素情况下同，解决起来比较简单。content-area直接通过font-size来定义，line-box的高度等于line-height。（后面会有更加充分的解释）
而在同时包含有可置换和非置换内联元素的情况下（什么是可置换、非可置换元素？），它们有不同的font-size和line-height值，问题就得使用下面的方法来解决。对于每个元素来说，content-area的高度取决于每一个非可置换元素的font-size和可置换元素的实际高度加上所有的padding、border和margin。之后再加上leading，一半位于上部，一半位于下部。得出的这个数值就是inline box中用以计算对齐方式的数值。inline-box中顶部最高位置就是line-box的顶部，inline-box中底部的最低位置就是line-box中的底部（也就前面所说的line-box的上下边界由所以inline-box的最高和最底位置来决定）。

这就是说，一个足够大的元素，即使只有一个很小的line-height，也可以通过指定content-area的值来使得和后面内容保持较大行距。例如，考虑下面的例子：

<P style="line-height: 12pt; font-size: 12pt;">
<A style="font-size: 128pt;">anchor</A> 
angry text 
<B style="vertical-align: top">bold</B>
</P>

超级链接的content-area高度为128pt，但是由于指定了line-height，它的inline box只有12pt高。这个inline box位于baseline之上；根据上面的参数，我们就可能判断超级链接底部（bottom）位于baseline之上30pt。这就使得inline box的顶部位于baseline之上42pt。而纯文本则正好偏于baseline之上，其content-area高度为12pt，底部位于baseline之下2pt。加粗文本的content-area也是12pt高，但它是靠line-box的顶部对齐的。

“根据上面的参数，我们就可能判……位于baseline之上30pt”的计算原理：
以Helvetica字体为例来说。在Helvetica字体中已经指定了baseline的位置，文本会从baseline下降-219/1000，上升781/1000。因此，对于font-size大小为128pt来说，它下降（位于baseline以下）部分为-28pt（128pt*219/1000），上升（位于baseline心目）部分为100pt。根据line-height的规则，本例中为12pt，实际起作用的halfheading就是12pt-128pt)/2 = -58pt。half leading是从128pt 字母高度（EM）的顶部和底部计算得出的。因此，字体大小为128pt的inline box的content area底部就是-28pt-(-58pt)=58pt-28pt=30pt。同样，inline box的content area的顶部位于（baseline的）100pt-58pt＝42pt处。
（注意：Helvetica字体处于数字的时候有轻微的变动。它实际上升和下降数值接近于775/1000 EM和-225/1000 EM。）
对于content area的baseline可能看来有点“怪异”，因为baseline不是正好处在字符的中间，而是向字符的底部稍微有点偏移。需要注意的是，这个例子只是用以介绍CSS规则的一个方面，而不是说每个人都应该对字体使用较大的负leading。
--Steve Zilles

现在计算得到line-box高度为44pt：42pt位于baseline之上，2pt位于baseline之下。加粗字体的inline-box顶部（在本例中同content-area一致）和line-box字体的顶部重合。纯文本之上有30pt的空白，而链接文字上部会有baseline之上58pt、之下26pt“浸入”到相邻行中中（注意，这些数字都是假定链接文本的inline box底部位于baseline以上30pt，溢出扩展部分主要根据链接的“content-area”的中点与baseline之间的关系决定）。

测试：对照这个测试文件和相关显示效果。两个示例中，都是在上面的代码基础进行了扩展，此外，前者和代码设置相同，后者使用了的36pt的链接。

如果在行内出现了一个可置换文本，它的content-area就等于它的实际高度和宽度加上所有的padding、border和margin。line-height对于可置换元素的inline box没有效果（但是当解释vertical-align属性的百分比数值时可以使用）。例如，考虑下面的例子：

<P style="line-height: 12pt; font-size: 12pt;">
<IMG SRC="filler.gif" style="height: 120pt; width: 16pt; margin: 8pt;"> 
angry text 
<B style="vertical-align: top">bold</B>
</P>

图片的content-area总高度为136pt（120pt + 8pt + 8pt），12pt的line-height会被忽略。此外，图片底部的外边缘（content加上margin）将会同baseline对齐，这会使line-box的顶部升高，因为图片inline box的顶部会比前面例子中的链接顶部要高。使可置换元素的inline-box比元素大小还要小的唯一方法就是使用负的margin值。顶部对齐的粗体文本将会与line-box的顶部对齐，这也正好是图片的顶部外边缘（content加margin）。

测试：对照这个测试文件和相关显示效果。两个示例中，都是在上面的代码基础进行了扩展，此外，前者和代码设置相同，后者使用了的30pt的图片，其margin值为6pt。

如果父级内联元素设置了border，那么border将和元素的font-size一致；同时也会和元素的content-area相匹配，后代元素。例如，考虑下面的例子：

<P style="line-height: 12pt; font-size: 12pt;">
<SPAN style="border: 1px solid gray;">
<A style="font-size: 72pt;">anchor</A> 
<IMG SRC="filler.gif" style="height: 60pt; width: 16pt; margin: 4pt;"> 
angry text 
<B style="vertical-align: top">bold</B>
</SPAN>
</P>

SPAN的边框将和假定的content-area一致，在本例中为12pt，因为从父元素中继承来的font-size是12pt。（此外，在本例中SPAN的content-area和其inline box正好一致，因为font-size和line-height数值相同。）这个边框将会穿过段落内外部元素，可能在任何顶部对齐（top-align）的元素下方显示。在内联元素与SPANinline box重叠的情况下，规范中并未指定谁应该在谁的上方。

测试：对照这个测试文件和相关显示效果。两个示例中，都是在上面的代码基础进行了扩展，此外，前者和代码设置相同，后者使用了的30pt的图片，其margin值o为2pt，此外还有一个36pt的链接。

在一些常见情况下，可以查看这个测试文档和H?kon Lie's 提供的相关显示效果。

合理关闭XHTML标签

dudo@dudo.org(dudo) — Tue, 24 Jun 2008 18:23:58 +0800

XHTML规范中有一条标准就是“每个XHTML标签都有一个结束标记”。那么对于HTML中原来不带结束标记的元素，则在该结束前加上“/”来关闭这个标签，如，<img>标签原来在HTML中的写法：

 <img src="..." alt="...">

到了XHTML中，就应该在“>”前增加一个“/”来关闭这个标签，为了防止某些老式浏览器不认识这种写法，因此要在“/”前加上一个空格（HTML兼容性标准）：

<img src="..." alt="..." />

这似乎是说在开始标记中加上一个“/”就可以关闭掉这个标签。特别是对于空内的标签来说，似乎使用这种写法更简洁了。比如说，

<div class="clear"></div>

这是在清除浮动（闭合浮动元素）中经常用到的一段代码。那么它似乎可以样写：

<div class="clear" />

是的，<div>元素可以为空，这样写没有问题，但是我们对其它标签也使用类似的写法会出现什么样的后果呢？如在<head>中引入外部Javascript文件，我们一般这么写：

<script type="text/javascript" src="..." language="javascript"></script>

既然没有内容为空，我们们可不可以写成

<script type="text/javascript" src="..." language="javascript" />

我们发现，这样的写法在浏览器要么不起作用，要么会出错，多数情况下，浏览器会认为这个标签没有关闭，而错误地认识<script>之后的所有内容都是Javascript代码，所以会产生错误。再如，

<textarea id="tt" cols="10" rows="8" />

如果在浏览器运行这段代码，你会发现从<textarea>开始，之后的所有XHTML代码都会被当作文本框的内容出现在文本框内。

这样看来，HTML4.0中已经存在成对的标签在XHTML中必须使用已有的结束标签。那么<div>为什么可以呢？其实，<div>也不可以，只是<div>的在浏览器没有那么明显的显示而已。而诸如<span />一类的写法就更加不正确了，首先<span>本身有关闭标签</span>，此外<span>标签内容不能为空白（纯空格也不行）。也就是说除了<img>、<hr>、<link>、<br>等标签可以使用“/”关闭外，其它的元素必须使用</...>，否则会出现不可预料的问题。

CSS的优先级与特殊性

dudo@dudo.org(dudo) — Mon, 23 Jun 2008 11:37:40 +0800

即使在不太复杂的样式表中，也可能会有两个或者更多个规则找到同一元素。CSS通过一个叫做层叠（cascade）的过程处理这种冲突。层叠给每个规则分配一个重要程度指数。作者定义的样式具有最高的重要性指数，其次是用户定义的样式。但是为了增强用户的控制能力，用户可以通过为任何规则增加一个!important来提高它的重要性指数，让它的优先级高于任何规则，甚至是比作者的!important还要高。

因此，层叠重要性指数的次序依次为：

标记为!important的用户样式
标记为!important的作者样式
作者样式
用户样式
浏览器/用户代理的默认样式

为了计算规则的优先级，每种类型的选择符都有一个相应的数值，由于每个选择器都由若干选择符组成，所以选择器的优先指数由选择符对应的数值相加而成，数值越高，优先级越高。CSS中的选择符有四类：

行内样式（Inline Style），如<span style="color:red">...</span>
ID选择符（ID selectors），如#myid
类、属性选择符、伪类（Classes, attributes and pseudo-classes），如 .class {...}、

元素（elements)、伪元素选择符(pseudo-elements)，如 p {...}、:first-line {...}

    怎么来测量呢？如前所述，它们每一类都有不同的数值表示，其中：
行内样式为：1000
ID选择符为：0100
类选择符为：0010
元素样式为：0001

  这里要指出的是，所有这些数值都不是10进制数字，1000只是代码它是一个行内样式，

    例如，body #wrap p {...}，那么它的优先级指数就是 1+100+1=102，而body div#wrap p {...}的优先级指数就是 1+ 1 +100 + 1 =103。
    再看一下其它的例子：
* { } 0
li:first-line { } 2 (one element, one pseudo-element)
ul ol+li { } 3 (three elements)
ul ol li.red { } 13 (one class, three elements)
style=”” 1000 (one inline styling)
div p { } 2 (two HTML selectors)
div p.sith { } 12 (two HTML selectors and a class selector)
body #darkside .sith p { } 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)
看这段代码：

    #wrap #content {color: blue;}
    #content {color: red;}

  <div id="wrap">
    <div id="content">this is a text here</div>
  </div>

最终文本会显示什么样的颜色呢？
相看运行效果

是的，样式覆盖只会发生在具有相同优先级的情况下。这个例子中#wrap #content为200，而#content为100，纵使后设定color:red，也不会覆盖掉先前设定的color:blue;。此外，你可以为#content {color: red;}增加!important来看看效果。

以上都是在少于10个选择符的情况下，可以把这些数值当作十进制来使用和比较，但是，当选择符超过10个（虽然可能性很小）又会怎么样呢？我们参考一个Eric的例子:

 .hello {color: red;}    /* specificity = 10 */
   HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI {color: green;}
                           /* specificity = 15 */

这里的10并不是“十”，它仅仅代表是一个烦选择符，所以的它的优先级依然要比 15个类型选择符组成的选择器要高。如果换成十六进制的话，就是这个样子

 .hello {color: red;}    /* specificity = 10 */
   HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI {color: green;}
                           /* specificity = 15 */

但是问题，如果你再添加两个元素，就又变成了11了，还是出现前面的情况。不过你应该始终记得，即使数值“看起来”比较大，它们的排序首先按照类型优先级来决定。

使用CSS简单实现垂直居中

dudo@dudo.org(dudo) — Sat, 21 Jun 2008 23:11:09 +0800

学习一些你已经知道的知识也没有什么坏处，是吧？

我知道这可能并不一定非常有意义，但是很多时候我们往往知其然而不知其所以然，这会使得事情出现惊人的差异。这就是CSS的魅力所在，你可以使用不同的方法实现相同的布局。这样的事情同样也发生在了我的身上，某个礼拜，我发现一个网站使用了一种不同的方法来实现居中布局，而这种方法对我们大家来说早已是都是很熟悉知的简单技术了。的确，可能对于大家很多人来说这种方法早已采用过，但是直到今天它起了我的注意。

传统做法：

我学到的第一个CSS知识就是如何把一个固定宽度和高度的元素水平或者垂直居中。这些居中的内容可能是入站欢迎页面（Splash　Page　http://searchsoa.techtarget.com/sDefinition/0,,sid26_gci213036,00.html）中图片，或者是一些设计喜欢的居中设计的网站等。最原始的解决办法就是把元素在窗口中距左和距上边缘进行50%的绝对定位。当然这只是把元素的右上角移动到了窗口的中央，接下来你还需要设置负的margin-left和margin-top并且使它们的值刚好是宽和高的一半来把元素拉加到屏幕的中央。

让我们看一下旧式做法的例子并注意一下其中的不足：

html,body{
	height:100%;
	margin:0;
	padding:0;
}
body{
	background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;
	text-align:center;
	min-width:626px;
	min-height:400px;
}
#vert-hoz{
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-198px;/* half elements height*/
	margin-left:-313px;/* half elements width*/
	width:624px;
	height:394px;
	border:1px solid silver;
	background:#666;
	overflow:auto;/* allow content to scroll inside element */
	text-align:left;
}
h1 {color:#fff;margin:0;padding:0}

<div id="vert-hoz">
	<h1>Content goes here</h1>
</div>

你可以在这里看到线上演示，效果如下图：

图1

    为了页面美观起见我给各元素添加了一些背景颜色，这里我们真正感兴趣的是灰色居中部分（此外，你应该注意到为了使背景图片居中你应该设置html、body的高度为100%）。
    如图1所示，这个结果正题我们想要的，元素在水平和垂直方向上都完美地实现了居中。文章中已经提到，对元素绝对定位使其top和left值都为50%，然后使用负的顶部填充和左侧填充并使填充的值为高和宽的一半。
   尽管看起来没有什么问题，但是使用这种方法存在几个严重的不足，水平或者垂直缩小窗口你就会发现这个问题了。当窗口缩小到比元素还要小时，元素就会开始从窗口的上部和左侧滑出。滑出的部分即使是使用窗口的滚动条也无法可见。这就意味着使用较小屏幕的用户根本看不见这些内容。
    图2显示了当窗口缩小时例子中单行文本发生的变化。

图2

    文本上部有一半丢失，左侧也有一部分不见了。如果我们进一步缩小窗口，整个文本会完全消失。为了达到我们最初的目的，试着给body增加min-height和min-width属性，但是你会发现这根本没有任何效果，元素依然会滑出窗口之外。

修正后的方法

面对这些问题，一个类似居中技术可以供我们采用，它依然采用了对于顶部的绝对定位，但是对于水平居中使用的是自由浮动。这会限制元素从窗口的左侧滑出。
下面是修正后的代码：

html,body{
	height:100%;
	margin:0;
	padding:0;
}
body{
	background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;
	text-align:center;
	min-width:626px;
	min-height:400px;
}
#vertical{
	position:absolute;
	top:50%;
	margin-top:-198px;/* half main elements height*/
	left:0;
	width:100%;
}
#hoz {
	width:624px;
	margin-left:auto;
	margin-right:auto;
	height:394px;
	border:1px solid silver;
	background:#666;
	overflow:auto;/* allow content to scroll inside element */
	text-align:left;
}
h1 {color:#fff;margin:0;padding:0}

<div id="vertical">
	<div id="hoz">
		<h1>Content goes here</h1>
	</div>
</div>

可以在这里查看在线演示。
水平方向上已经达到我们所要的效果，但是当窗口高度缩小时顶部依然会消失，如图3所示：

图3

修正：

    为了解决这个问题（也是本文写作的目的）我之前曾经使用过几个比较复杂的方法，但是现在使用的这种方法更简单、更健壮，那就是使用浮动（float）来代替绝对定位。
    页面中设置为顶端50%绝对定位的第一个元素进行浮动。然后把浮动向上拉动，大小为元素高度的一半。
    下面是必要的修改：

#vertical{
	float:left;
	height:50%;
	margin-top:-198px;/* half vertical height*/
	width:100%;
}

<div id="vertical"></div>
<div id="hoz">
	<h1>Content goes here</h1>
</div>

这里有一个在线演示你可以自己观察一下。

图4

重要的是我们对浮动元素设置的宽度是100%，并且记住由于某些浏览器会出现问题我们需要对后面的元素设置clear:both。如果我们不使用“float”，元素依然会居中但是它会从顶端消失掉。

为什么这样可行呢？

实际上这里涉及到浮动的一个有趣的行为，而且也比较好理解它的原理。为什么当我们使用一个静态元素（或者是第一个示例中绝对定位元素）时内容会从窗口的顶端消失，而当我们使用float时却不会产生这个问题呢？

浮动的一个特点就是他们脱离了文本流（尽管你可以通过为后面的元素使用clear来重新控制它们）。浮动元素后面的内容会被移动以为浮动元素留空间（通常是通过浏览器对静态顶部填充来清除浮动）。如果浮动元素根本没有出现该位置，那么后面的内容会占居浮动元素原来在页面中的位置。因此对一个浮动元素使用负的顶部填充（margin），浮动元素会冲破任何包含它的块级元素限制，因为我们前面已经提到浮动元素一开始就脱离了文本流。但是如果我们把元素从包含它的块级元素向外拖动足够远以至于它完全超出父元素范围，那么它后面的任何元素将不会继续跟随其向上移动，但是重新设定包含块级元素的内部内容的大小，会使浮动元素继续浮动。

这就是我们的例子中发生的事情，浮动元素被从body中向上移动，它后面的元素被迫留在body形成的块级元素中。这可能有点难以直接去理解，但是我们可以看一下下面的这个演示。

.float{
	width:200px;
	height:100px;
	background:red;
	float:left;
}
.top{
	background:green;
	height:300px;
	width:100%;
}
.follow-on{
	clear:both;
	background:blue;
	height:100px
}

<div class="top">Top</div>
<div class="float">Float</div>
<div class="follow-on">Following content</div>

上面的代码在页面的顶端设置了一个静态元素，其后是一个浮动元素，再后是其它的静态内容，它就产生了如图5所示的效果，或者可看在线演示。

图5

没有什么特别需要注意的，一切如同我们相像的一样。

如果下面我们给浮动元素增加一个负的100px的顶端边距，我们就得到如图6所示的结果：

.float{
	width:200px;
	height:100px;
	background:red;
	float:left;
	margin-top:-100px
}

图6

仍然和我们料想的一样，但是如果我们增加负的200px的顶端填充又会发生什么呢？

.float{
	width:200px;
	height:100px;
	background:red;
	float:left;
	margin-top:-200px
}

图7显示了结果：

图7

和你看到的一样，浮动元素从后面的内容中移走，但是浮动元素后面的内容仍然会停留在包含它的元素的顶端（如在绿色元素的下面）。在我们的前面的例子中，当我们向外移动浮动元素时，也是发生了同样的事情。

但是如果我们从红色的div去掉float属性，那么红色的div和它后面下面的内容就会被移动到绿色元素的上面。

图8

    浮动元素负的边距产生变化，后面的内容也会相应地向上移动。

    我希望这个小的提示会让你感兴趣（即使你已经知道了），这也说明对于我们每一个人都有新的东西要去学习。前面的例子中所有的代码都已经放在了<head>中，方便大家查看。

    如果你想了解一些更多高级的居中设计技术，我这里还有其它几个方法供参考。好运！

dudo注：在我前面的文章中，我已经总结果实现水平居中和垂直居中的方法，你可以对比参照一下。
再p.s. 前几点做了几道，类似的题，好像也是犯了两样的毛病，汗~！

原谅链接：http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/
中文翻译：http://www.dudo.org/article.asp?id=251
转载请以链接形式注明原谅出处，谢谢！

CSS Dock Menu：JS+CSS 仿苹果MAC机桌面导航菜单

dudo@dudo.org(dudo) — Thu, 19 Jun 2008 11:17:00 +0800

如果你是苹果机的疯狂粉丝，那么你一定会喜欢我设计的这款CSS Dock Menu。它采用了Jquery的JavaScript库和Fisheye的界面，其中一些图标是我自己设计的。这里有两种样式：底部和顶部。下面我演示一下如何在你的Web页面中使用它：

1、下载源文件

点击下载此文件

2、插入代码
在HTML中的<head>标签中插入如下代码：

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>


<link href="style.css" rel="stylesheet" type="text/css" />


<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>

第一部分是需要用到的Javascript代码，第二部分是用到的CSS样式表，最后一个是用于Internet Explorer 6中PNG图片的Hack处理。

3、配置
且记要把下面的代码放到HTML中的<body>标签内

<script type="text/javascript">
$(document).ready(
function()
{
$(’#dock2′).Fisheye(
{
maxWidth: 60,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);
</script>

4 添加或者删除项目
向顶部菜单中增加新的项目（注：<span>标签位于<img>之后）：

<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>

向底部菜单中增加新项目（注：<span>标签位于<img>之前）：

<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>

浏览器兼容性
我在Internet Explorer 6、Internet Explorer 7、Opera 9、Firefox 2以及Safari 2（尽管在Safari中存在一些小问题）中测试通过。
P.S. FireFox 3中也测试通过（dudo注）

演示：CSS Dock Menu
CSS Dock Memu:top
CSS Dock Meu: Bottom

原作者：http://www.ndesign-studio.com/blog/mac/css-dock-menu
翻译：http://www.dudo.org/article.asp?id=250
转载请注意出处，至少保留原作者链接，谢谢！

X/HTML5 v.s. XHTML2（II）

dudo@dudo.org(dudo) — Tue, 17 Jun 2008 21:03:26 +0800

在了解了XHTML 2的进展之后，我们再来看看X/HTML 5 的进展。

X/HTML 5酷在什么地方

章节元素的构想

X/HTML 5引入新的元素用于把Web页面分成若干章节。这些组成部分有助于搜索引擎和辅助工具更好地理解页面内容。使用这些新元素可以使标签更具可读性。

章节化内容的构想很酷！但是请看一下为什么使用章节的技术不够酷。

对话元素

对话元素用来表示一段交谈。它包括一个用于定义会话者的dt元素和代表会话者讲话内容的dd元素。例如：

<dialog>
  <dt>Costello</dt>
  <dd>Look, you gotta first baseman?</dd>
  <dt>Abbott</dt>
  <dd>Certainly.</dd>
  <dt>Costello</dt>
  <dd>Who's playing first?</dd>
  <dt>Abbott</dt>
  <dd>That's right.</dd>
  <dt>Costello</dt>
  <dd>When you pay off the first baseman every month, who gets the money?</dd>
  <dt>Abbott</dt>
  <dd>Every dollar of it.</dd>
</dialog>

figrue元素

在印刷发行（教科书、报纸、杂志等）媒体对象（照片、插图、图表等）中经常会使用到标头。到目前为止，Web标记语言还没有可以产生这种效果的结构。figrue元素有一个legend子元素可以用来指定图像的标头。例如：

XML/HTML代码

<figure>
<legend>Credit: Media Inc., 2007</legend>
<img src="smith.jpg" alt="Photo: J. Smith" />
</figure>

m元素

m元素代表一段文本被标记或者是高亮。这在动态网页中显示搜索关键字时候非常有用，此时页面中的关键字就可以使用m元素来标出来了。例如，响应用户搜索的关键字snow时，Web页面可以生成下面这样一段内容：

XML/HTML代码

<p>A <m>snow</m>man is a man-like sculpture constructed out of <m>snow</m>.</p>

input元素得到加强

input元素功能加强之后可以支持email、url、数据相关、时间相关、和数字等数据类型。这就意味着更加的验证功能可以在客户端完成了。

开放的进程

X/HTML的开发进程比XHTML 2开放得多。每个人都可以参与到X/HTML 5创意明细中。

X/HTML 5的美中不足

章节元素的使用

    采用章节元素的的想法是好的，但是X/HTML 5的应用中显得有点累赘。甚至有些解释会让你更加困惑。例如：
    aside元素表示组成页面内容的一个部分，它和aside元素前后的内容相关联，它可以被看作是内容中独立的部分。这些组成部分经常用于印刷技术中的侧连栏。
    难道拥有role属性的div元素不加具有扩展性和更容易被理解？
    另外一个被提及的章节元素是nav，用于表示页面中链接其它页面的链接。我们真的需要nav元素吗？XHTML 2中的nl元素可以更好地完成这个任务。

HTML 4和XHTML 1中的不足在未来的规范中还将存在

因为X/HTML试图提供向后支持，HTML 4和XHTML 1中的不足将还会在X/HTML 5中存在。规范不必向后当空，相反应该客户端软件通过支持多种规范来提供向后兼容能力。

X/HTML 5没有遵循X/HTML 5手册

    X/HTML 5旨在向后兼容HTML 4和XHTML 1。现在big、acronym、u和tt都还不是这个规范中的内容，而像i和samll等其它元素有了重新定义之后的语意。例如，在HTML 4.01规范中是这样定义i和small的：
i：使文本呈现斜体
small：以“小”字体呈现文本
在X/HTML 5中，i和small有了新的含意：
    i元素用不同的方式来表现一段文本或者是与正文存在差异的段落，如分类设计、技术术语、外来语言的习惯用语、某个想法、意见、船名或者其它需要在印刷技术中呈现斜体的文本。。
    small元素呈现的是小的打印字体（文档中具有说明法律约束作用的部分，如版权或者存在的弊端）和批注等。
    通过重新定义i和small的含义，这破坏了对HTML 4和XHTML 1的向后兼容性。这是因为向后兼容应该意味着HTML 5的用户代理（user agent，浏览器）在呈现HTML 4的文档时应该和HTML 4的user agent保持一致。因此，如果HTML 5强调向后兼容，HTML 4中意义不大的结构在HTML 5中也同样没有多少意义。

不会吧？仍然支持font元素？

是的，如果开发者使用WYSIWYG编辑器的话， X/HTML 5依然支持font元素。这样做有什么合理性吗？难道WYSIWYG编辑器就能避免使用font吗？

WYSIWYG签名

使用WYSIWYG编辑器生成的文档必须在head元素中包含下面的WYSIWYG签名：

XML/HTML代码

<meta name="generator" content="(WYSIWYG editor)" />

或者：

XML/HTML代码

<meta name="generator" content="Sample Editor 1.0 (WYSIWYG editor)" />

这样做的理由是什么呢？某种耻辱的标记？它是不是要告诉浏览器做好最坏的准备，因为这个文档是用WYSIWYG编辑器生成的？那么，如果文档中只有一部分是使用WYSIWYG工具完成的又该怎么做呢？

支持预定义类名

预定义类名是X/HTML 5用户代理中保留的具有语意的CSS类名。下面的例子中copyright就是一个预定义的类名：

XML/HTML代码

<p class="copyright>...</p>

其它的预定义类名还有“error”、“example”、“issue”、“note”、“search”和“warning”。更麻烦的是，有些预定义类名只有在某些特定元素中使用而不能别其它元素中使用。例如，类名“copyright”只有在p和span元素中使用。类名“error”只有在p、section、span和strong中使用。
预定义类名的一个问题就是下面这样的写法没有什么意义：

XML/HTML代码

<p class="important">

而这样的写法才会有意义：

XML/HTML代码

<p class="copyright">

重写class属性变得很难去说明结构的具体含意。例如，下面的代码意味着什么呢：

XML/HTML代码

<p class="important copyright issue">

预定义类名还会限制开发者对类名使用的自由。同样，如果开发者现在使用了一个非预定义类名，但是之后某天这个类名变成预定义类，那又会首产生什么状况呢？这难道就改变了开发者之前内容的语意吗？

HTML 5 v.s. XHTML 5

在试图最终解决HTML和XHTML的争论中，X/HTML 5规范使事情变得更难于理解。的确，X/HTML 5规范中确实说“一般说来，开发者在Web中还能直接使用XML”，即使W3C一直都在为XML未来在Web中的应用不断努力。

开发过程过于匆忙

X/HTML 5是为了应对W3C在HTML 4和XHTML 1更新换代中的拖沓。因此，这导致X/HTML 5的开发过程有点匆忙，感觉这个规范不知道突然从什么地方冒出来然后又快速地跟进。即使是直接参与到其中的开发者也感到规范的开发进程有点不切实际。

下一代标记语言的竞争

X/HTML 5和XHTML 2都在为能够替代HTML 4和XHTML 1展开竞争。即时是在开发的前期，一些浏览器的供应商就已经声称他们对这两种规范的偏好。由于审议的紧迫性和封闭性，这使得Web标准组织出现了两极分化。随着两种规范的进展，更多的开发资源和市场资金将会投入到其中的某一个中，所有的这些因素都会引起一场“标准的”战争。
我们每一个人都是这个标准的制定者，因为Web属于每一个人，只有一场诚实、公开的争论才能保证最好的标准成为赢家。

注：为阅读方便文章中把“HTML 4.x/XHTML 1.x”简写为“HTML 4 and XHTML 1”

深入阅读：

X/HTML5 v.s. XHTML2（I）

dudo@dudo.org(dudo) — Mon, 16 Jun 2008 14:19:47 +0800

英文原文：http://xhtml.com/en/future/x-html-5-versus-xhtml-2/
中文译文：http://www.dudo.org/article.asp?id=248

背景

尽管到目前为止HTML4和XHTML1仍能够很好地满足我们的要求，但是它们仍然存在不足。为了满足用户丰富的基于Web应该程序的需要，达到更佳搜索结果、为所有使用不同设备的所有人群创建更加易用的Web程序，它们都需要升级换代。

目前有两种规范在竞争成为HTML 4和XHTML 1的继承者。它们是XHTML 2.0和Web Application 1.0，后者就是我们通常所说的X/HTML 5.0。这两种规范根据标记语言的未来发展采用了不同的手段并且产生了迥异的效果。

XHTML 2为构建日常工作和应用中的W3C技术通用语言向前迈出了坚实的大步。XHTML 2完全是基于XML之上的，而XML被多数人认为是可以充分发挥Web潜力的一种语言。XHTML 2侧重于应该如何去使用标签，而不是标签使用的现状。

X/HTML 5是HTML 4和XHTML 1的扩展。它是向前发展的一种渐进而不是如同XHTM 2那样大步地跳跃。由于HTML 4和XHTML 1存在种种局限，X/HTML 5旨在解决HTML 4和XHTML 1中的不足。X/HTML 5也可以看作是HTML或者是XML。因此与XHTML 2不同，X/HTML 5受到了当前技术形式（如浏览器技术等）和目前标签的应用状况影响。

X/HTML 5和XHTML 2目前都处于工作草稿阶段。它们都还在不断地改进，要成为推荐标准大约还要几年的时间。本文的评论是以2007年2月份的草稿为基础的。

XHTML 2

XHTML 2“酷”在什么地方

导航列表
导航列表是用来创建导航菜单的。导航列表使用nl元素来定义一个菜单，它必须包含一个用于指定列表名称的label元素。例如:

   <nl>
    <label>You are here:</label>
    <li href="/">Home</li>
    <li href="/products/">Products</li>
    <li href="/products/widget/">Widgit</li>
    <li>Features</li>
   </nl>

导航列表的确很酷！

定义列表得到加强
定义列表（dl元素）定义一个术语（dt元素）和一个术语的解释（dd元素）。一个术语可以有多个解释，同样多个术语也可以有同一个解释。XHTML 2使用di元素来分组术语和解释。这样一来，术语与解释间的关系就变得清晰了，页面元素变得更加具有可读性。例如

   <dl>
    <di>
     <dt>center</dt>
     <dt>centre</dt>
     <dd>a building dedicated to a particular activity</dd>
     <dd>a point equidistant from its ends</dt>
    </di>
    <di>
     <dt>key</dt>
     <dd>metal device used to open a lock</dd>
     <dd>pitch of the voice</dd>
   </di>
  </dl>

很酷！

每个元素都成以是超级链接

为每一个元素增加一个href属性就可以所这个元素变为超级链接。例如：

<q href="http://en.wikipedia.org/wiki/Neil_Armstrong">That's one small step for man, 
one giant leap for mankind</q>

这个功能实在是太棒了！

剔除了acronym元素
很多文章作者都会为应该如何去使用acronym元素而困惑。XHTML 2中将会使用abbr元素来表示所有类型的缩写，包括acronmy。酷！

b, i, small, big, tt, font and basefont元素都会消失

XHTML 2已经和这些元素说再见了，取而代之的是更加严格的格式。告别是font元素在过去经常会被误用，导致文章作者们不能使用正确的标签。

不止是有点酷！

iframe消失
iframe元素经常会引起用户辅助设备产生问题，如今它也要消失了。

新的标题结构

在达到页面易用方面，内容的标题是最重要的组成部分。实际上，目前没有人能正解地使用标题，因为数字化的标题结构（h1到h6）对于大多数人来说很难直观地去区分，对于使用WYSIWYG（所见即所得）的设计者来说更加是不可能了。实质上，数字化的标题是使用直线结构（与其后面的内容是兄弟元素关系）来达到内容逻辑上的层次关系。因此，在下面的例子中，你必须去使内容上的这种层次关系可视化

 <h1>...</h1>
 <p>...</p>
 <h2>...</h2>
 <p>...</p>
 <h2>...</h2>
 <p>...</p>
 <h3>...</h3>
 <p>...</p>
 <h4>...</h4>
 <p>...</p>
 <h3>...</h3>
 <p>...</p>
 <h2>...</h2>
 <p>...</p>

相比而言，新的标题结构，配合分组元素section使用h元素，使得层次关系表达变得异常地容易实现

<h>...</h>
<p>...</p>
<section>
<h>...</h>
<p>...</p>
<h>...</h>
<p>...</p>
<section>
<h>...</h>
<p>...</p>
<section>
<h>...</h>
<p>...</p>
</section>
<h>...</h>
<p>...</p>
</section>
<h>...</h>
<p>...</p>
</section>

h元素很酷！

输出计算机代码功得到加强
blockcode元素代替pre和code元素来盛装计算机代码段。例如

<blockcode>
function get_random_name() {
$rand_name = "";
for ($i = 1; $i &lt;= 8; $i++) {
$rand_name .= chr(rand(97, 122));
}
return $rand_name;
}
</blockcode>

hr被separator取代
hr元素的名字——“水平线”——常常为设计者和工具供应商带来麻烦。它的名字是水平线，但实际上它却被用来分隔文档的不同部分。使用separator可以解决这种误解。

del和ins元素被edit属性取代
在表达内容变化上，edit属性的确比del和ins元素更加适合。可以使用类似下面的方法使用它们：

<p>This is <span edit="deleted">cool</span><span edit="inserted">way cool</span>!</p>

可以为已有元素增加额外语意
role属性可以为已有元素增加新的语意和元数据（meta），这有助于搜索引擎和辅助工具更好地理解web页面。下面的例子中演示了如何表示指定的导航列表应该解释为一组“面包屑”

<nl role="breadcrumbs">
<label>You are here:</label>
<li href="/">Home</li>
<li href="/products/">Products</li>
<li href="/products/widget/">Widgit</li>
<li>Features</li>
</nl>

使用role属性的技术术语叫作“XHTML中的RDF嵌入”。这使得XHTML 2非常具有扩展性，这可能会成为使Web发挥其全部潜能的唯一最重要工具。

XHTML 2的美中不足

元素使用仍然需环绕内容
由于每个元素都可以使用href属性，因此实际上a元素的存在已经没有意义。继续保留它只会增加开发者的困扰。例如在HTML 4和XHTML 1中id属性可以用作任意元素的锚点。如：

<h2 id="introduction">Introduction</h2>

但是很多开发者还在使用a元素作为锚点。例如：

<h2><a name="introduction">Introduction</a></h2>

继续保留a元素实在有点不够酷！

img元素仍然需要环绕使用
在XHTML 2中，object元素可以做img元素能做的任何事情。根据规范，之所以保留img元素是为了保证向XHTML 2顺利过渡，但是这样做的确会给开发者造成困扰。而且保留下来的img元素也不再是一个空元素，它必须包含可替换文本。例如：

<img src="W3C.png">W3C</img>

如果XHTML 2中的元素与HTML 4或者XHTML 1中元素有相同的名称，但是行为却不同，这肯定会引起争论与使用上的混乱。

仍然支持数字化的标题
由于使用h元素更加容易创新标题，数字化的标题已经不再需要。同时支持h元素和数字化标题只会增加麻烦。

XHTML 2开发小组的封闭性
一个开发可能成为下一代标记语言的开发小组对于公众却很少公布信息。同志们，这不是研究秘密武器的“skunk工程”。让它们见见光吧！

下面我们将看看X/HTML 5的进展状况。

英文原文：http://xhtml.com/en/future/x-html-5-versus-xhtml-2/
中文译文：http://www.dudo.org/article.asp?id=248