CSS3 多列布局屬性
1.column-count
column-count屬性規(guī)定元素應(yīng)該被劃分的列數(shù)。
2.column-gap
column-gap屬性規(guī)定列之間的間隔。
為之前的實例添加此屬性,代碼如下:
column-gap: 40px;
3.column-rule-style
column-ru!e-style屬性規(guī)定列之間的樣式規(guī)則,它類似于border-style屬性,其屬性的值可以是以下幾種:
?none:定義沒有規(guī)則。
?hidden:定義隱藏規(guī)則。
?dotted: 定義點狀規(guī)則。
?dashed:定義虛線規(guī)則。
?solid:定義實線規(guī)則。
?double:定義雙線規(guī)則。
?groove:定義3D graoved規(guī)則,該效果取決于寬度和顏色值。
?ridge:定義3D ridged規(guī)則,該效果取決于寬度和顏色值。
?inset:定義3D inset規(guī)則,該效果取決于寬度和顏色值。
?outset:定義3D outset規(guī)則,該效果取決于寬度和顏色值。
4.column-rule-width
column-rule-width屬性規(guī)定列之間的寬度規(guī)則,它類似于border-width屬性,其屬性的值可以使以下幾種:
?thin:定義纖細規(guī)則。
?medium:定義中等規(guī)則。
?thick:定義寬厚規(guī)則。
?length:規(guī)定規(guī)則的寬度。
5.column一rulo-color
column-rule-color屬性規(guī)定列之間的顏色規(guī)則,它類似于border-color屬性。
下面利用上述三個屬性添加列與列的分割線,代碼如下:
column-rule-color: red;
column-rule-width: 5 px;
column-rule-style: dotted;
6.column-rule
column-ruie是一個簡寫屬性,用于設(shè)置所有column-rule-*屬性。column-rule屬性設(shè)置列之間寬度、樣式和顏色規(guī)則,類似于border屬性。
7.column-span
column-span屬性規(guī)定元素應(yīng)橫跨多少列,其值可以是以下兩種:
?1:元素應(yīng)橫跨一列。
?all:元素應(yīng)橫跨所有列。
8.column-width
column-width屬性規(guī)定列的寬度,其屬性的值可以是以下兩種:
?auto:由瀏覽器決定列寬。
?length:規(guī)定列的寬度。
9.columns
columns屬性是一個簡寫屬性,用于設(shè)置列寬和列數(shù),語法如下:
columns: column-width column-count:
點擊加載更多評論>>