一、CSS3 column多欄布局

私有前綴：

-webkit-、-moz-

常用的屬性:

1. column-width：每欄的高度
2. column-count：最理想的分欄個數
3. column-gap：欄目之間的水平間隔
4. column-rule：分割線，實際上是一個縮寫，還有column-rule-width,column-rule-style,column-rule-color，就跟border是一個套路。
5. column-fill：效果不明。

其中還有一個縮寫屬性，名字為columns，其實是column-width和column-count的縮寫。

columns: 120px;   /* column-width: 120px; column-count: auto */
columns: auto 120px; /* column-width: 120px; column-count: auto */
columns: 2;   /* column-width: auto; column-count: 2 */
columns: 2 auto;  /* column-width: auto; column-count: 2 */
columns: auto;  /* column-width: auto; column-count: auto */
columns: auto auto; /* column-width: auto; column-count: auto */

二、CSS3 column有趣的空間使用特性及水平滑動瀏覽效果實現

1. margin也在空間計算之列

<div class="box col-4">
  <p>我是一個兵...</p>
</div>

<p>標簽默認有上下1em的margin間距，所以會導致第四欄有可能為空白，原因是被<p>標簽的margin-bottom給占據了。

2. column布局高度也是重要限制

上面幾個column-count示意都是定了個寬度600px，高度是默認的auto，因此，分欄的表現都很乖巧，反正高度是無限的，無論你設置多少欄，我都可以通過調整高度來實現。

但是，如果我們高度也設定了固定的值，例如高度60px，則此時很多有意思的事情就會發生了。

如果說僅僅只是指定了column-count，至少在容器元素的可視尺寸范圍內，還是設定的分欄數目，例如column-count: 3，雖然視覺上遠不止3欄，但是容器可視尺寸范圍就是3欄。

3. column-width會讓column-count打醬油

.col-4 {
    width: 600px;
    column-count: 4;
    column-width: 200px;
}

顯然這里有矛盾之處，每欄寬度200px，總共要4欄，就算不考慮每欄之間的間隙，也至少需要800px的寬度，但是，我們容器設定的寬度只有600px，怎么辦呢？

那即是column-count忽略無效打醬油，不要覺得不合理，也不要抱不平說為什么犧牲的是column-count，而不是其他屬性？那是因為column-count天生注定就是要犧牲的命，因為其語義解釋就是“最理想的分欄數目”，所謂最理想，就是你該犧牲的時候就要犧牲。

實際上這里最終的每欄每列寬度表現并不是200px，如果我沒算錯的話，在沒有樣式重置的情況下，應該是292px。

4. 高寬同時限制可以實現完美分頁

.example {
    height: 120px;
    width: 100px;
    column-width: 100px;
}

如果我們把100px*120px的這個名為.example的小容器看成是一頁內容的話，則此時，我們容器中的所有內容，就被完美的分成了一頁一頁水平呈現的內容。

此時，如果我們給父元素有個如下的overflow限制：

.father {
    width: 100px;
    overflow: hidden;
}

此時就形成了一個永遠只會顯示一頁寬度的視窗，然后下面的事情就簡單了，我們通過JS一些一些touch相關的事件，控制我們的.example元素translateX位移，就可以實現一開始展示的水平滑屏瀏覽小說內容的效果了。

PS:如何判斷已經滑動到底部，很簡單啊，設置overflow:hidden容器的scrollWidth值就是子元素的寬度。