对于浮动局部的局限性，想必同行们都知道，就是每个列表元素的高度必须要一致，否则就会像是俄罗斯方块一样，“锯齿相错”，例如一个左浮动列表布局，如果第一行有个列表高度高于其他列表，那就在第二行，第一个元素会沿着最高元素的右侧对齐。
浮动本身就是个魔鬼，所以，使用浮动布局还需要修复其带来的副作用——高度塌陷的问题，也就是常提到的“清除浮动”了。
另外，IE6下，重复的列表元素会出现莫名的bug，例如出现不知哪来的文字。
而基于display:inline-block的列表布局可以避免这些问题，本文就将一步一步地展示基于display:inline-block的列表布局的可用性以及价值所在。本文内容较多，讲解详细，配以丰富飞截图，必要的demo页面。还是视频展示，希望能对您的学习有所帮助。
“CSS相关”目录存档
拜拜了,浮动布局-基于display:inline-block的列表布局
2010年11月3日，星期三我所知道的几种display:table-cell的应用
2010年10月28日，星期四display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用。
我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的，虽说IE6/7不支持此属性，但是幸运的是，IE6/7一些乱糟糟的属性与渲染，我们可以其他方法实现同样或是类似的效果。
本文就将介绍使用display:table-cell属性让大小不固定元素垂直对齐，两栏自适应布局，多栏等高布局，以及不太擅长的列表布局等。提供必要的截图以及demo实例页面展示，和一些简单的源代码展示。时间仓促，文字可能略显粗糙，总之，希望能对您的学习有所帮助。
页面重构“鑫三无准则” 之“无宽度”准则
2010年10月11日，星期一
为了使CSS布局模块化以及增强可扩展性，我曾自己总结了一套约束自己的CSS准则，我自己称之为“鑫三无准则”，即“无宽度”、“无图片”和“无浮动”，这些都是在页面重构中尽量避免的东西。而本文就是要最其中的“无宽度”准则进行一些探讨。
因为纯粹个人的东西，所以可能没有什么适用性，单也可能会对您的学习有所启发，所以这里还是简单分享了。对于一篇观点论述性的文章，一定要大量的图片、数据域实例支持，另外还有必要的帮助理解的demo页面，本文没有多少复杂的代码，所以源代码展示比较少。总之，希望能对您的学习有所帮助。
使用CSS3 ::selection伪元素改变文本选中颜色
2010年10月8日，星期五本文主要介绍如何使用CSS3的一些属性改变浏览器页面文字默认选中的样式（主要是文字颜色和背景色），犹如魔术一样，知道了原理其实也就很简单了。所以本文其实没有什么内容，小技巧展示而已。一如既往的，有源代码展示，有截图，还有必要的demo页面，希望能对您的学习提供一些帮助。
:after伪类+content内容生成经典应用举例
2010年09月28日，星期二
content内容生成就是通过content属性生成内容，content属性早在CSS2.1的时候就被引入了，可以使用:before以及:after伪元素生成内容。此特性目前已被大部分的浏览器支持： (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)。另外，目前Opera 9.5+ 和 Safari 4已经支持所有元素的content属性，而不仅仅是:before和:after伪元素。
本文就将讲述:after伪类+content内容生成在web页面重构上非常实际的两个应用，一是清除浮动的影响，二是大小不固定图片的垂直居中效果。提供代码展示盒截图，提供demo效果页面，希望能对您的学习有所帮助。
IE9对CSS3的支持情况概述
2010年09月25日，星期六
IE9 测试版好像是在9月16日凌晨发布的，如今在中国，IE已经四世同堂，这是多么温馨美满的画面啊，让人不由得“喜极而泣”啊！关于IE9的野史外传这里不做讨论，本文内容正如题目所示，主要概述下目前IE9版本对CSS3的支持情况。随着时间的推移，IE9必定会做一定的改进与修复等，所以，可能仅仅几个月后，现在还不支持的CSS3属性已经支持了，所以，本文所有的表格和数据仅作参考…
需警惕CSS3属性的书写顺序
2010年09月21日，星期二
本文主要的是如果不注意CSS3属性的书写顺序，可能就会给自己带来麻烦。本文通过简单的示例，简单的实例验证来说明这个问题。没有多少理论，没有多少饶舌，有的的简单的截图与代码展示，对了，还有必不可少的demo页面。希望能对您CSS3的使用提供一些帮助。
无JavaScript纯CSS实现选项卡轮转切换效果
2010年09月15日，星期三本文内容很简单，但是确实让人开眼界，新奇的技术，无JavaScript实现选项卡轮转切换效果。关键东西是什么呢？就是……看文章内容就知道了。^_^就这些，史无前例，本文无截图，只有一个简单的demo和代码展示。因为就像魔术一样，说穿了其实就是那么回事。
Selectivizr-让IE6~8支持CSS3伪类和属性选择器
2010年09月14日，星期二
IE浏览器对CSS伪类以及位元素的支持很弱，很多很不错的功能都不能使用，这某种程度上限制了web的发展。聪明的工程师们总能想出一些修复弥补的方法，就像本文要介绍的Selectivizr。Selectivizr使用很简单，可以让让IE6/IE7/IE8支持CSS3伪类和属性选择器，算是不错的东西。如果您需要的话，应该会提供不少帮助的。本文内容虽然不错，但是依旧提供源文件下载以及demo展示。
精简高效的CSS命名准则/方法
2010年09月12日，星期日老子有云：“天下万物生于有，有生于无”。具体解释就是：天下万物都是由看得见的具体事物（“有”）产生的，而看得见的具体事物（“有”）又是由看不见的，无形无状的东西（“无”）产生的，这个看不见的“无”也就是“道”，或叫做“根”、“母”。
我们看武侠片，经常听到“无招胜有招”这句话，这也是道家“无”之思想之体现。因为你心中没有招式，你才能有无限的可能，生成其他的招式以克敌，即所谓以不变应万变；相反，如果你心中牢记一套“华山剑法”，当你与人交手时，势必按照此套路走，要是遇到相克之剑法，结局就是一败涂地。“无招”是一种境界，是你功夫修炼到一定程度才能领悟到的。
可见，要想发挥更大，就需要“无”，把一些“限制的东西”通通去掉。没有限制才能发挥出最大的潜能。站在最简单，最原始的那个点上，你才能自由驰骋，应变自如。
我的应用
我的应用