用 CSS3可以像报纸一样对文本多列排版。其中主要属性有：
column-count 具体列数
column-gap 列与列之间的距离
column-rule 设置列于列宽之间的样式（包括颜色、分割线等）
继续阅读 »
Flexbox 布局是 CSS3 中一种新的布局模型，被称为弹性盒模型。该模型是为了改进容器中内容的对齐、方向和排序方式，即使是动态，甚至是未知大小的容器。弹性盒模型的主要特点是，可以在不同屏幕尺寸下以最佳的方式，修改其子项的高度或宽度来填充容器的可用空间。
许多设计师和开发人员认为这种布局使用起来更加简单，弹性盒模型的使元素的定位更加简单，从而某些复杂的布局可以用更少的代码来实现，进而简化了开发过程。Flexbox 布局算法是基于方向的，这与基于垂直和水平的 block 和 inline 布局不同。弹性盒模型可用于小应用或组建的布局，然而对于大型应用应该使用 Grid 布局。
本文将用可视化的方式介绍 Flex 如何影响我们的
继续阅读 »
前一阵子在项目组中讲了一个关于CSS的Session，在讲之前我曾收到了许多意见，大部分是希望能讲讲CSS实用性的技术，比如盒模型，CSS3之类的。干货人人都喜欢，因为看得见摸得着，拿来就有用，但我最后还是决定讲一些”湿货“。因为在Code Diff的时候我发现了许多样式的问题不是由于不会写CSS导致的，而是由于在错误的地方使用了写在错误地方的样式。
其实CSS很简单，没有计算没有流程，只是一直描述，无论什么复杂的效果，你只要Google一下就知道怎么写了，甚至可以直接copy。但CSS又很复杂，一个元素的表现会受到它旁边的兄弟元素，也会受到内部的子元素影响，还会受到父元素影响，在这种多重影响下，一个元素的显示逻辑会变得错综复杂。
继续阅读 »