cc3的多列屬性multi-column
0 16-09-17
1 16-09-17
2 16-09-17
3 16-09-17
4 16-09-17
5 16-09-17
6 16-09-17
7 16-09-17
8 16-09-17
9 16-09-17
10 16-09-17
11 16-09-17
12 16-09-17
13 16-09-17
14 16-09-17
15 16-09-17
16 16-09-17
17 16-09-17
18 16-09-17
19 16-09-17
20 16-09-17
21 16-09-17
22 16-09-17
23 16-09-17
24 16-09-17
25 16-09-17
26 16-09-17
上面的方塊是使用h5的多列屬性弄的,搞了好久.有一些誤區總如下.1.使用多列屬性時候,內容最好是內聯元素,不能搞塊級的.不然的話分列不達預期.
2.感覺分列時,每一列等於總寬度除以指定的列數
3.分列時,它是從上到下從左到右的順序.例如乙個div裡有7個內聯小塊,指定分3列那麼是這樣
1 4 7 1 2 3
2 5 (而不是這樣->) 4 5 6
3 6 7
4.主要屬性說明:
// columns表示分幾列,每個多寬.當前是分4列,寬度自動(auto可不寫)
columns: 4 auto;
-moz-columns: 4 auto; /* firefox */
-webkit-columns: 4 auto; /* safari 和 chrome */
// 這是一系列屬性簡寫 ,當前指定了列之間的分界線 10畫素,實線,黑色.這個線看起來是10畫素,但是它不占用列的空間.好像是"浮在列之間的"
column-rule: 10px solid #000000;
-moz-column-rule: 10px solid #000000; /* firefox */
-webkit-column-rule: 10px solid #000000; /* safari and chrome */
// 這是指定列之間的距離 和列間分界線不同,這個距離是要佔空間的,如果指定了,將會擠占列寬,使列寬度"縮小".
/*-moz-column-gap: 5px; firefox */
/*-webkit-column-gap: 5px; safari 和 chrome */
/*column-gap: 5px;*/
css3 多列屬性
多列屬性 1 column count 屬性規定元素應該被分隔的列數 適用於 除table外的非替換塊級元素,table cells,inline block元素 屬性規定列之間的間隔大小 column gap 100px 效果和column gap預設效果對比 3 column rule 設定或檢...
CC3中的2D轉換
2d轉換方法 translate rotate scale skew matrix 1 translate 方法，根據左 x軸 和頂部 y軸 位置給定的引數，從當前元素位置移動 例如 1 div2 translate值 50px，100px 是從左邊元素移動50個畫素，並從頂部移動100畫素。2 r...
CSS3 多列屬性columns
屬性 簡介columns css3 columns 屬性，是復合屬性，設定或檢索物件的列數和每列的寬度。column width css3 column width 屬性，設定或檢索物件每列的寬度 column count css3 column count 屬性，設定或檢索物件的列數 column...