在CSS3的世界里，width属性又多了几个关键字成员，fill-available, max-content, min-content, 以及fit-content。
本文就将分析与介绍这几个关键字，顺便帮忙理一下CSS世界中的尺寸概念，相信本文的内容不仅对于CSS3的学习，包括对CSS2.1整个尺寸的认知都会有一定的帮助。
文章关键字 ‘inline-block’
理解CSS3 max/min-content及fit-content等width值
2016年05月20日，星期五CSS深入理解流体特性和BFC特性下多栏自适应布局
2015年02月12日，星期四
好久没写纯粹CSS相关知识的文章了，所谓新颖的CSS3技术之流占据了现在半壁江山。本文内容还是比较传统，立足基础，深入理解。希望可以帮助相关从业者有所成长。如题，本文着重分析流体特性下的自适应布局和BFC特性下的自适应布局，demo、截图以及源代码一个都不少，耐心看完，相信会有一番收获的。
利用重绘解决IE下JS交互产生的定位重叠等棘手bug
2013年01月22日，星期二我们平常在页面布局时候探讨的bug大多都属于静态的——即页面载入渲染完毕后出现的布局问题，像是错位啊，不对齐啊，行高失效等。
这些都是嚼了好多年的烂芋头，就像风水日晒很多年的门面店，是个装修工都能美化修复，不值得拿出来卖弄。
还有一类bug是伴随着JS交互产生了，比方说一个外表靓丽光鲜的门面店，只要门一开，尼玛，天花板就会挂到门上去了。此时该怎么办？……
本文就将从重绘这块解决JS交互再IE浏览器下产生的棘手问题，精制的demo，丰富的截图以及必要的源代码展示，希望本文的内容能够您的学习有所帮助。
折腾:瀑布流布局（基于多栏列表流体布局实现）
2012年03月23日，星期五跟风，尤其受pinterest的煽风点火，瀑布流就有不少人关注了。我正好最近比较闲，加上有人曾在我站点提出希望我介绍点瀑布流的东西，所以，今儿个也随下大流。
pinterest以及上面迅雷UED xwei的瀑布流demo（至少在FireFox下还是有致命的显示bug的）都是采用的绝对定位实现的，有相对复杂的位置计算。
我一向不喜欢吃别人嚼过的米饭，于是尝试使用另外的原理实现。我是个流体布局控，对绝对定位啊、浮动啊什么的一向没什么好感，于是，这里要介绍的就是基于多栏列表流体布局实现的瀑布流布局效果。
display:inline-block/text-align:justify下列表的两端对齐布局
2011年03月13日，星期日
本文可以说是本月的重磅文章之一，讲的是如何利用text-align:justify在display:inline-block列表布局基础上实现列表元素的两端对齐布局，分门别类，由浅入深，逐层深入，并有一些总结性的注意事项。一如既往，本文不仅提供丰富的截图示意，提供必要的源代码展示，及时雨般的demo页面，更上一层楼，还提供总结性的表格数据。总之，希望本文的内容能够对您的学习有所帮助。
拜拜了,浮动布局-基于display:inline-block的列表布局
2010年11月3日，星期三
对于浮动局部的局限性，想必同行们都知道，就是每个列表元素的高度必须要一致，否则就会像是俄罗斯方块一样，“锯齿相错”，例如一个左浮动列表布局，如果第一行有个列表高度高于其他列表，那就在第二行，第一个元素会沿着最高元素的右侧对齐。
浮动本身就是个魔鬼，所以，使用浮动布局还需要修复其带来的副作用——高度塌陷的问题，也就是常提到的“清除浮动”了。
另外，IE6下，重复的列表元素会出现莫名的bug，例如出现不知哪来的文字。
而基于display:inline-block的列表布局可以避免这些问题，本文就将一步一步地展示基于display:inline-block的列表布局的可用性以及价值所在。本文内容较多，讲解详细，配以丰富飞截图，必要的demo页面。还是视频展示，希望能对您的学习有所帮助。
我所知道的几种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实例页面展示，和一些简单的源代码展示。时间仓促，文字可能略显粗糙，总之，希望能对您的学习有所帮助。
: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效果页面，希望能对您的学习有所帮助。
CSS渐变图片背景下高度亦自适应按钮
2010年06月21日，星期一
本文将介绍一种效果精湛，兼容性强，扩展性强，易上手易理解的按钮实现方案，此按钮与以往介绍的按钮一样，也是高宽自适应，可与图片混排，受控于text-align属性。但是这里的代码更加精简易懂，更符合主流与开发者的习惯。
本文提供必要的截图，提供Demo页面，以及代码展示，并对代码做了一定的讲解，希望能对您的学习有所帮助。
我的应用
我的应用