一碟案、CSS3 column多欄布局
私有前綴：
-webkit-簇爆、-moz-
常用的屬性:
-
column-width：每欄的高度 -
column-count：最理想的分欄個數(shù) -
column-gap：欄目之間的水平間隔 -
column-rule：分割線，實際上是一個縮寫损姜，還有column-rule-width,column-rule-style,column-rule-color洋机，就跟border是一個套路。 -
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有趣的空間使用特性及水平滑動瀏覽效果實現(xiàn)
1. margin也在空間計算之列
<div class="box col-4">
<p>我是一個兵...</p>
</div>
<p>標簽?zāi)J有上下1em的margin間距博助，所以會導(dǎo)致第四欄有可能為空白险污，原因是被<p>標簽的margin-bottom給占據(jù)了。
2. column布局高度也是重要限制
上面幾個column-count示意都是定了個寬度600px富岳，高度是默認的auto蛔糯，因此，分欄的表現(xiàn)都很乖巧窖式，反正高度是無限的蚁飒，無論你設(shè)置多少欄，我都可以通過調(diào)整高度來實現(xiàn)萝喘。
但是淮逻，如果我們高度也設(shè)定了固定的值，例如高度60px阁簸，則此時很多有意思的事情就會發(fā)生了爬早。
如果說僅僅只是指定了column-count，至少在容器元素的可視尺寸范圍內(nèi)启妹，還是設(shè)定的分欄數(shù)目筛严，例如column-count: 3，雖然視覺上遠不止3欄饶米，但是容器可視尺寸范圍就是3欄桨啃。
3. column-width會讓column-count打醬油
.col-4 {
width: 600px;
column-count: 4;
column-width: 200px;
}
顯然這里有矛盾之處，每欄寬度200px檬输，總共要4欄照瘾，就算不考慮每欄之間的間隙，也至少需要800px的寬度丧慈，但是析命，我們?nèi)萜髟O(shè)定的寬度只有600px，怎么辦呢伊滋？
那即是column-count忽略無效打醬油碳却，不要覺得不合理，也不要抱不平說為什么犧牲的是column-count笑旺，而不是其他屬性昼浦？那是因為column-count天生注定就是要犧牲的命，因為其語義解釋就是“最理想的分欄數(shù)目”筒主，所謂最理想关噪，就是你該犧牲的時候就要犧牲鸟蟹。
實際上這里最終的每欄每列寬度表現(xiàn)并不是200px，如果我沒算錯的話使兔，在沒有樣式重置的情況下建钥，應(yīng)該是292px。
4. 高寬同時限制可以實現(xiàn)完美分頁
.example {
height: 120px;
width: 100px;
column-width: 100px;
}
如果我們把100px*120px的這個名為.example的小容器看成是一頁內(nèi)容的話虐沥，則此時熊经，我們?nèi)萜髦械乃袃?nèi)容，就被完美的分成了一頁一頁水平呈現(xiàn)的內(nèi)容欲险。
此時镐依，如果我們給父元素有個如下的overflow限制：
.father {
width: 100px;
overflow: hidden;
}
此時就形成了一個永遠只會顯示一頁寬度的視窗，然后下面的事情就簡單了天试，我們通過JS一些一些touch相關(guān)的事件槐壳，控制我們的.example元素translateX位移，就可以實現(xiàn)一開始展示的水平滑屏瀏覽小說內(nèi)容的效果了喜每。
PS:如何判斷已經(jīng)滑動到底部务唐，很簡單啊，設(shè)置overflow:hidden容器的scrollWidth值就是子元素的寬度带兜。
