column-rule-width屬性指定列之間的寬度規則。
column-rule-width: thin|medium|thick|length;
值 說明
thin 指定乙個細邊框的規則
medium 定義乙個中等邊框規則
thick 指定乙個粗邊框的規則
length 指定寬度的規則
column-rule-style屬性指定列之間的樣式規則。
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
值 描述
none 定義沒有規則。
hidden 定義隱藏規則。
dotted 定義點狀規則。
dashed 定義虛線規則。
solid 定義實線規則。
double 定義雙線規則。
groove 定義 3d grooved 規則。該效果取決於寬度和顏色值。
ridge 定義 3d ridged 規則。該效果取決於寬度和顏色值。
inset 定義 3d inset 規則。該效果取決於寬度和顏色值。
outset 定義 3d outset 規則。該效果取決於寬度和顏色值。
column-rule-color設定列中之間的顏色規則。
在div元素的文字分成三列，並指定乙個30畫素的列之間的差距。
.news*****
.box參考文件
在容器上設定有6個屬性:
2.1flex-direction屬性
2.2flex-wrap屬性
有3個可能值:
2.3flex-flow屬性
.box預設值: row nowrap
2.4justify-content屬性
有 5 個可能值:
2.5align-items屬性
假設交叉軸的方向從上往下,有 5個可能值:
2.6align-content屬性
.box注意: 如果專案只有一根軸線,該屬性不生效。
有6個可能值:
在專案上設有6個屬性值:
3.1order屬性
作用:定義專案的排列順序。
數值越小,排列越靠前,預設為0。
.item3.2flex-grow屬性
作用: 定義專案的放大比例。
預設值為0, 即:如果存在剩餘空間也不放大
.item如果所有專案的flex-grow屬性值都為1,則它們將等分剩餘空間(如果有的話)。
如果乙個專案的flex-grow屬性值為2,其它專案都為1,則 前者佔據的剩餘空間 將比 其他項 多一倍。
3.3flex-shrink屬性
作用: 定義了專案的縮小比例。
預設值為1,即: 如果空間不足,該專案將縮小。
.item如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。
如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。
3.4flex-basis屬性
作用: 定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。
預設值為auto，即專案的本來大小。
瀏覽器根據這個屬性，計算主軸是否有多餘空間。
.item它可以設為跟width或height屬性一樣的值（比如350px），則專案將佔據固定空間。
3.5flex屬性
flex-grow, flex-shrink 和 flex-basis的簡寫。
預設值為 0 1 auto。後兩個屬性可選。
有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
.item建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
3.6align-self屬性
作用: 允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。
預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
.item該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
css3 column 屬性介紹
這幾天趕緊研究研究css3引入的一些高階貨色。當然，還得看看ff和chrome倆貨的臉色，人家不支援box lines，我都快哭了，研究了大半天的box，感情尼瑪，就這個不支援，蛋蛋都碎了，想替換浮動布局帶來的壞處都成了幻想。今天看看css3 引入的column布局。屬性索引如下圖 由於目前colu...
css3多列布局column
doctype html utf 8 title wrap style head wrap 前端即 前台部分，執行在pc端，移動端等瀏覽器上展現給使用者瀏覽的網頁。br 前端即 前台部分，執行在pc端，移動端等瀏覽器上展現給使用者瀏覽的網頁。br 前端即 前台部分，執行在pc端，移動端等瀏覽器上展現...
css3 多列屬性
多列屬性 1 column count 屬性規定元素應該被分隔的列數 適用於 除table外的非替換塊級元素,table cells,inline block元素 屬性規定列之間的間隔大小 column gap 100px 效果和column gap預設效果對比 3 column rule 設定或檢...