CSS3布局樣式

1.多列布局--columns

為了能在web頁面中方便實現類似報紙、雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組（css multi column layout module）。它主要應用在文字的多列布局方面。

columns：<
column-width
> || <
column-count
>

引數引數說明

主要用來定義多列中每列的寬度

主要用來定義多列中的列數

column-width的使用和css中的width屬性一樣，不過不同的是，column-width屬性在定義元素列寬的時候，既可以單獨使用，也可以和多列屬性中其他屬性配合使用。其基本語法如下所示；

column-width: auto | <
length
>

屬性值說明

auto

如果column-width設定值為auto或者沒有顯式的設定值時，元素多列的列寬將由其他屬性來決定，比如前面的示例就是由列數column-count來決定。

使用固定值來設定元素列的寬度，其主要是由數值和長度單位組成，不過其值只能是正值，不能為負值。

3.column-count

column-count屬性主要用來給元素指定想要的列數和允許的最大列數。其語法規則：

column-count：auto | <
integer
>

屬性值屬性值說明

auto

此值為column-count的預設值，表示元素只有一列，其主要依靠瀏覽器計算自動設定。

此值為正整數值，主要用來定義元素的列數，取值為大於0的整數，負值無效。

4.column-gap間距

column-gap主要用來設定列與列之間的間距，其語法規則如下：

column-gap: normal || <
length
>

column-gap: 2em;

屬性值屬性值說明

normal

預設值，默值為1em（如果你的字型大小是px，其預設值為你的font-size值）。

此值用來設定列與列之間的距離，其可以使用px,em單位的任何整數值，但不能是負值。

5.column-rule

column-rule主要是用來定義列與列之間的邊框寬度、邊框樣式和邊框顏色。簡單點說，就有點類似於常用的border屬性。但column-rule是不占用任何空間位置的，在列與列之間改變其寬度不會改變任何列的位置。

column-rule:<
column-rule-width
>|<
column-rule-style
>|<
column-rule-color
>

column-rule: 2px dotted green;

屬性值屬性值說明

column-rule-width

column-rule-style

類似於border-style屬性，主要用來定義列邊框樣式，其預設值為「none」。column-rule-style屬性值與border-style屬值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。

column-rule-color

類似於border-color屬性，主要用來定義列邊框顏色，其預設值為前景色color的值，使用時相當於border-color。column-rule-color接受所有的顏色。如果不希望顯示顏色，也可以將其設定為transparent(透明色)

6.column-span跨列

column-span主要用來定義乙個分列元素中的子元素能跨列多少。column-width、column-count等屬效能讓一元素分成多列，不管裡面元素如何排放順序，他們都是從左向右的放置內容，但有時我們需要基中一段內容或乙個標題不進行分列，也就是橫跨所有列，此時column-span就可以輕鬆實現，此屬性的語法如下。

column-span: none | all

屬性值屬性值說明

none

此值為column-span的預設值，表示不跨越任何列。

all這個值跟none值剛好相反，表示的是元素跨越所有列，並定位在列的ｚ軸之上。

CSS3布局樣式

CSS3布局樣式

CSS3 控制樣式，網頁布局

css3之布局相關的樣式

CSS3布局樣式

CSS3布局樣式

CSS3 控制樣式，網頁布局

css3之布局相關的樣式

相關推薦