裁纸刀下

原文:clearfix Reloaded + overflow:hidden Demystified

clearfix 和 overflow:hidden 可算得上是不增加额外标签清除浮动的两个最流行的技术了。

这篇短文介绍了如何改进clearfix进行增强，同时对overflow:hidden进行了深入的解释。

在掌握了丰富而强大的css选择符之后，就具备了将css样式根据需要应用到网页中任何元素的能力。能够应用规则了，接下来就需要熟练掌握规则的制定方法——什么样的属性组合能够实现什么样的效果。一般的颜色、字体、字号、行高等的设置比较容易掌握，而初学者在应用css的时候，主要头疼的还是如何用css实现复杂的网页布局，从两栏布局、三栏布局，到表单设计等。在布局的时候，实际上主要是借助元素的宽、高、定位、浮动、边距、边框、间距、背景颜色、背景图片的组合来实现的。而所有这些，都要基于对css盒模型的理解。网上对盒模型的论述很多（推荐阅读《彻底理解css盒子模式》），我这里想从实用的角度来谈谈。

以前我接受了网上不少博文的说法，一直认为学习css的三大最重要问题是：盒模型、定位、浮动。因为这三块的内容决定了css布局的能力。但是通过上一篇日志的分析，xhtml要实现和css的解耦，就要尽量不依赖于css（或者说不要纯粹为了给css预留接口而添加不必要的class和id），那么，在用css布局之前，其实就有一个更紧迫的任务摆在我们的面前——如何将css规则准确应用到目标元素。于是，css选择符的地位在这个前提下就空前的提高了。所以，在开始学习盒模型、浮动、定位之前，有必要回顾一下选择符。

虽然CSS在表现方面天生具有很多优势，但是如果不是web标准化的盛行，估计CSS不会达到今天这样的热门。所以要说CSS，肯定要从web标准化说起。实际上，对CSS的理解越深，才能越好地理解和使用CSS。

很多人对于web标准化的理解就是“DIV+CSS”，或者“IE、FF、Chrome、Opera、Safari测试无错”，或者就是“通过w3c校验”。实际上，这些都只是web标准化以后附带的一些好处或者说一些表现。web标准化的精髓并不是为了抛弃表格，或者浏览器兼容，或者通过w3c校验。有时候，标准化了的网页未必一定能达到上述这些特征。

绝大部分现代浏览器支持 css 中的 :hover 伪类选择器，可以用于所有 html 元素。这很酷，因为这使你可以仅通过 css 来对表格行()应用鼠标滑过事件(mouseover)时的特殊效果。然而，万恶的IE，对 :hover 伪类顶多只提供了有限的支持，具体支持的程度要取决于你的IE浏览器的具体版本。

Whatever:hover 是一个小小的脚本，它可以迅速、自动地为IE6，IE7，IE8添加标准的 :hover、:active 和 :focus 伪类支持。第三版引入了 ajax 支持，意味着通过 javascript 动态添加到文档中的任意html元素也同样可以在IE中响应 :hover、:active 和 :focus 样式。

结合JavaScript的下拉菜单，纯CSS的下拉菜单我也写过很多了。不过在微软 Microsoft Expression Web 的相关站点上看到这个纯CSS下拉菜单的时候，我还是觉得很赞赏。这应该是最精简、最干净的纯CSS下拉菜单了。

网页上的空间是寸土寸金，虽然显示器的分辨率越来越大，可是直到今天，网页设计中仍然是以至少1024×768 像素的支持为主，也就是说，每一屏页面只有区区 955×600像素 的安全尺寸可以用而已。于是，为了在有限的空间里容纳更多的内容，滑动门式的标签切换（Tabs）方式越来越受欢迎。通过滑动门技术，可以在同一块页面区域内放置数倍的内容。根据用户的选择来决定显示哪一部分。最近我在实际应用中，逐步完善出一种基于 jQuery，但是比 jQuery UI Tabs 插件更小巧也更通用的简单 Tabs 实现。

最近很长一段时间没有读书，主要是Asp.net自身更新太快，买了几本书都买了没多久就过时了。所以除了参考MSDN和cnblog以外，就基本上靠google来解决问题了。但是还是时常上china-pub去看看，了解一下最新计算机图书的情况。

这次发现一本书，国内作者撰写的。书名叫《别具光芒：DIV+CSS网页布局与美化》。

睡觉前，NT给我发了两个网址，是老外的，那个家伙暴强，居然用纯CSS在页面上画出房子来，平面的、3D的，都画出来了。 看了一下他的CSS代码，一开始以为是这样用：

.class{
    width:100px;
    w\idth:60px;
    height:200px;
    h\eight:160px;
}

后来发现其实一些特殊图形的绘制跟上面的这个怪异的用法没关系，而是用边框来实现的，比如：

这三个形状除了Div，没有任何其它的元素或者文本，更不用说图形了。这是充分利用了border的显示特性。因为当我们同时设置四个方向的border时，浏览器自动会把交叉的部分叠加或者相互剪除。当border足够大的时候，我们就看到了上面这样的特殊效果。谁能想象到这是4个200像素的边框形成的效果呢？ 代码如下：