对于浮动局部的局限性，想必同行们都知道，就是每个列表元素的高度必须要一致，否则就会像是俄罗斯方块一样，“锯齿相错”，例如一个左浮动列表布局，如果第一行有个列表高度高于其他列表，那就在第二行，第一个元素会沿着最高元素的右侧对齐。
浮动本身就是个魔鬼，所以，使用浮动布局还需要修复其带来的副作用——高度塌陷的问题，也就是常提到的“清除浮动”了。
另外，IE6下，重复的列表元素会出现莫名的bug，例如出现不知哪来的文字。
而基于display:inline-block的列表布局可以避免这些问题，本文就将一步一步地展示基于display:inline-block的列表布局的可用性以及价值所在。本文内容较多，讲解详细，配以丰富飞截图，必要的demo页面。还是视频展示，希望能对您的学习有所帮助。
文章关键字 ‘布局’
拜拜了,浮动布局-基于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实例页面展示，和一些简单的源代码展示。时间仓促，文字可能略显粗糙，总之，希望能对您的学习有所帮助。
CSS样式分离之再分离
2010年07月8日，星期四
我从以前讲布局思想，讲无CSS rest，到现在的CSS样式分离之再分离，以及后面的CSS架构，都是一个体系里面的。我清楚的指导，这些东西，其实很多优秀的前端人员也是知道一二，或是比我理解更深刻的。但是，对于大多数同行而言，可能认为我“又在挑刺”，其实不然。
我把我自己的理解讲出来，是希望让您知道，现在绝大多数的CSS写法，架构都是有很多不足的，缺少创新。我就这么跟您说吧，您所做的任何项目，其实根本只要一个CSS文件就足够，您要是真的通透了CSS的“分离”、“架构”，即使这个网站项目有100个页面（风格统一），您也可以只使用一个CSS页面，并且可以控制CSS文件（未压缩）在40K以下。
我是自信可以这么实现的。我最近做的项目50多个页面，未压缩（含大量注释，竖排）的CSS文件，就30K左右，服务器端压缩后仅11K左右，同时网站整站自适应，从内容到各个按钮，导航，全部宽度自适应，兼容性良好….
纯CSS实现侧边栏/分栏高度自动相等
2010年03月25日，星期四为了表现的美观或是一些功能的需要，我们经常希望侧边栏/分栏的高度保持一致。我们可能会使用min-height属性，IE6不支持min-height但是height会自动撑高，所以min-height + _height的组合也是常用手段之一；另外就是使用背景图片了，利用背景图片的垂直平铺，可以模拟分栏的等高背景效果，但是，此方法对布局宽度有一定的要求，如果布局宽度改变，背景图片可能也要做一番修改。但是这些方法都有局限性，没有从根本上解决问题。
本文就将真是分栏高度相等的的技术，使用margin负值实现任意分栏的高度自动相等。提供详尽的插图，代码示意。提供必要的demo，希望能对您的学习有所帮助。
CSS+JavaScript实现页面不同布局的切换
2010年03月25日，星期四我们平时使用windows操作系统，应该见过文件才查看功能，我们可以选择“平铺”、“图标”、“列表”、“详细信息”等，这是一个不错的功能，可以让用户自定义一些自己喜欢的偏好的显示方式，我们再web页面上，同样可以做。这可能说是一种提高用户体验的方法。
本文就将展示如何在web页面上轻松的实现布局的切换，查看方式的转换。提供详尽的插图，提供详尽的demo，以及对应的代码，希望能对您有所帮助。
中国古代道家思想与网页重构的思考
2010年03月18日，星期四道家是以老子、庄子为代表的中国春秋战国时期诸子百家中最重要的思想学派之一。道家思想以其独特的宇宙、社会和人生领悟，在哲学思想上呈现出永恒的价值与生命力。
在众多的道家思想内容中，其非常重要的一个核心思想：顺其自然，无为而治，我是非常之推崇，这种哲学思想已经深深地影响到了自己的为人处事，思考问题的方式。
本文就将通过“顺其自然，无为而治”的思想，讲述我对网页页面重构的一些思考。揭示一些规律，希望能对您有所帮助。
css行高line-height的一些深入理解及应用
2009年11月28日，星期六
前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”，是个不错的文章，学到了不少东西，颇有感觉，于是决定结合自己的一些经验与理解写篇内容互补或者说是角度不同的文章吧。
本文核心重点在于inline box模型下的line-height高度问题，希望可以纠正css中对高度的正确认识，并依次展开列举了一些常见的有关line-height的应用，提供demo页面，希望对您的学习有所帮助。
我熟知的三种三栏网页宽度自适应布局方法
2009年11月17日，星期二目前，以1024像素显示器为目标的960~1000像素的网页在占有率越来越高的宽屏下的显示有些吃力了。采用流动性布局，也就是宽度自适应布局可以有效解决这一问题。自适应问题是个很大的题目，如果深入细节，不是几篇文章可以说清的。本文就针对实现简单的三栏宽度自适应做题。简要展示了我所熟知的三种宽度自适应布局方法。全都是比较优秀，没有兼容性问题的方法。提供demo实例演示以及源文件下载。希望对您有所帮助。
我的应用
我的应用