本文详尽介绍了display:flex布局的各个属性，最大的优点在于所有flex相关属性值的样式表现都是实时渲染的，点击不同的属性值，就可以立即实时看到不同的布局效果，非常直观。同时，很多属性的规则描述要比现有的很多文章介绍的要更详尽，对于初学者一定是一个很不错的学习教程。
文章关键字 ‘box-flex’
写给自己看的display: flex布局教程
2018年10月28日，星期日基于CSS3 column多栏布局实现水平滑页翻页交互
2017年02月15日，星期三column多栏布局和flex弹性布局基本上是同一时间段出现的，从兼容性来讲，column多栏布局一直以来更稳定更兼容，而flex弹性布局前前后后历经多个版本，直至现在有些移动设备支持依然不好，但是两者的命运却截然相反，column多栏布局鲜有人问津，而flex弹性布局则风生水起。面试的时候，就算面试者并未在实际项目中使用过flex弹性布局，也会时不时扯到这东西上来，好像不提flex布局就跟时代脱节一样，其实完全没有必要，每个CSS属性都有它的潜力和价值所在，挖掘其内在价值而不是单纯的被外在的那层表现困于庐山才是真正想要看到的。
而本文就是通过挖掘column多栏布局潜力实现了看上去很棘手的交互效果，这里特异分享给大家，希望能够对大家的学习有所帮助~
深入CSS ::first-letter伪元素及其实例等
2016年09月30日，星期五首先，::first-letter本身兼容性非常好，然而，细细体味，会发现，虽然::first-letter兼容性很好，浏览器很早就支持，但是我们实际项目用得并不多，那是因为，我们可以通过嵌套span标签的方式，实现更为广泛更灵活的样式控制。
但是，实际开发场景千千万，总会遇到HTML结构不能改动，或者改动成本很高的的情况，此时::first-letter等就非常有用，而且多半扮演英雄或者救星的角色……
聊聊CSS世界中的margin-box
2016年09月16日，星期五盒尺寸由4个盒子组成，分别是content box, padding box, border box, margin box。这个和盒模型中的几个盒子其实是对应的。但是，对于的CSS关键字中却没有margin-box，唯独缺了margin-box，这是为什么呢？
CSS box-flex属性，然后弹性盒子模型简介
2010年12月19日，星期日本文以CSS3中的box-flex属性未切入口，简单介绍下CSS3中新的盒子模型——弹性盒子模型。介绍内容涵盖目前盒子模型所有的CSS属性，如box-orient, box-direction, box-align, box-pack, box-lines之类，其中每个属性都有代码展示与demo示例，并有丰富飞截图展示，可能有些地方啰嗦了点，但是内容还算比较具体，总之，希望能对您的学习有所帮助。
关于文字内容溢出用点点点(…)省略号表示
2009年09月5日，星期六在实际的项目中，由于文字内容的长度不确定性和页面布局的固定性，难免会出现文字内容超过div（或其他标签，下同）区域的情况，此时比较好的做法就是当文字超过限定的div宽度后自动以省略号（…）显示，这样，按照习惯，人们都会知道这儿有文字被省略了。css中有个属性叫做text-overflow:ellipsis;配合其他一些属性可以实现IE,chrome,safria浏览器下文字溢出点点点省略号显示，在加上opera浏览器的私有属性-o-text-overflow:ellipsis;就目前而言，可以实现Firefox浏览器以外的所有主流浏览器的文字溢出点点点省略号显示。
而本文将提供多种兼容性上佳的文字溢出点点点省略号显示的方法，而里面不少方法就是自己想出来的。有使用外部辅助文件的，有纯粹的css方法的，还有使用jQuery方法的。每种方法都提供各个浏览器下的截图验证，提供实例页面，提供部分源文件，都是值得信赖的方法，希望对您有所帮助。
我的应用
我的应用