本文详尽介绍了display:flex布局的各个属性，最大的优点在于所有flex相关属性值的样式表现都是实时渲染的，点击不同的属性值，就可以立即实时看到不同的布局效果，非常直观。同时，很多属性的规则描述要比现有的很多文章介绍的要更详尽，对于初学者一定是一个很不错的学习教程。
文章关键字 ‘布局’
写给自己看的display: flex布局教程
2018年10月28日，星期日有人考了我一道CSS题目
2018年10月21日，星期日
前段时间@快叫我韩大人私信我考了我下面这个CSS题目：在不改变HTML结构，同时保留元素高度前提下，实现某一个布局效果……我觉得还挺有意思的，在征得其同意的前提下输出了这篇文章，大家若有兴趣，也可以进来看看，自己能不能实现相关需求。
文中提供了可实时编辑预览效果的demo，方便大家尝试自己思路。
小tips: 纯CSS显示JS/HTML等源代码行数
2018年02月1日，星期四如图，纯CSS显示JS/HTML等源代码行数，希望实现的方法可以给大家带来更多的思路和灵感。
基于CSS3 column多栏布局实现水平滑页翻页交互
2017年02月15日，星期三column多栏布局和flex弹性布局基本上是同一时间段出现的，从兼容性来讲，column多栏布局一直以来更稳定更兼容，而flex弹性布局前前后后历经多个版本，直至现在有些移动设备支持依然不好，但是两者的命运却截然相反，column多栏布局鲜有人问津，而flex弹性布局则风生水起。面试的时候，就算面试者并未在实际项目中使用过flex弹性布局，也会时不时扯到这东西上来，好像不提flex布局就跟时代脱节一样，其实完全没有必要，每个CSS属性都有它的潜力和价值所在，挖掘其内在价值而不是单纯的被外在的那层表现困于庐山才是真正想要看到的。
而本文就是通过挖掘column多栏布局潜力实现了看上去很棘手的交互效果，这里特异分享给大家，希望能够对大家的学习有所帮助~
CSS深入理解流体特性和BFC特性下多栏自适应布局
2015年02月12日，星期四
好久没写纯粹CSS相关知识的文章了，所谓新颖的CSS3技术之流占据了现在半壁江山。本文内容还是比较传统，立足基础，深入理解。希望可以帮助相关从业者有所成长。如题，本文着重分析流体特性下的自适应布局和BFC特性下的自适应布局，demo、截图以及源代码一个都不少，耐心看完，相信会有一番收获的。
准确理解CSS clear:left/right的含义及实际用途
2014年06月9日，星期一我们平时一般都使用clear:both清除浮动，貌似就干这一件事件。用得很开心，但似乎理解上懵懵懂懂，我其实也是，早年的时候，测试过CSS clear:left/right，虽知其作用（80%确定而已），但不知其机理。
有必要再次整理下，温故知新。可能很多同行都没有注意left/right值，或者可能理解上含糊，或者不知道其实际意义在何处。So, follow me…
CSS3 Media Queries的些野史外传
2011年08月23日，星期二本文是去年这个时候流产的草稿又起死回生的一篇文章。当初本来想详细讲述Media Queries的前前后后，祖宗八代，后发现被人捷足先得，不得已，流产了。今天在1周年之际，重拾此文，讲下CSS3 Media Queries的些野史外传。有demo，有源代码展示，总之，希望本文的起死回生之作能够对您的学习有所帮助。
display:inline-block/text-align:justify下列表的两端对齐布局
2011年03月13日，星期日
本文可以说是本月的重磅文章之一，讲的是如何利用text-align:justify在display:inline-block列表布局基础上实现列表元素的两端对齐布局，分门别类，由浅入深，逐层深入，并有一些总结性的注意事项。一如既往，本文不仅提供丰富的截图示意，提供必要的源代码展示，及时雨般的demo页面，更上一层楼，还提供总结性的表格数据。总之，希望本文的内容能够对您的学习有所帮助。
CSS 相对|绝对(relative/absolute)定位系列（一）
2010年12月9日，星期四本文是CSS 相对/绝对(relative/absolute)定位长篇系列的第一篇，大部分的内容被理论观点和题外话给占据了。本文主要内容就是分析了absolute与浮动之间的关系，一些典型的特性。还阐述了自己尽量不要使用absolute属性做普通DOM布局的观点。相对于本篇的文字量，图片啊代码啊以及demo相对少了写，但是，应该不会影响您的阅读与理解的。本文书写还是花了好些功夫的，力求准确表述自己观点的同时语言通俗生动。总之，希望本文能对您的学习有所帮助。
我的应用
我的应用