布局相關樣式

2022-09-13 15:18:15 字數 2313 閱讀 7016

多欄布局

1.column-count屬性

在css3中可以通過,column-count屬性來進行多欄布局,這個屬性的含義是將乙個元素中的內容分成多欄進行顯示。

寫法:column-count:欄目數;

相容性寫法:

-webkit-column-count:3;           

-moz-column-count:3

需要注意的是,在使用多欄布局的時候,要將元素的寬度設定成多個欄目的總寬度。

2.column-width屬性:指定欄目的寬度來生成分欄

相容性寫法:-webkit-column-width、-moz-column-width

3.column-gap屬性:指定欄目與欄目之間的距離

相容性寫法:-webkit-column-gap、-moz-column-gap

4.column-rule屬性:欄目與欄目之間增加一條分割線

相容性寫法:-webkit-column-rule、-moz-column-rule

盒布局

1.使用float屬性和position屬性時的缺點

在css3中,除了多欄布局之外,還可以使用盒布局來解決使用float屬性和position屬性時多欄底部不能對齊的缺點。

2.使用盒布局

在css3中,使用box屬性來使用盒布局,如「-moz-box」(火狐)、「-webkit-box」(谷歌)

3.盒布局與多欄布局的區別

多欄布局的欄目寬度必須相等,指定欄目的寬度有時也只能統一指定,欄目的寬度不可能全都一樣,所以多欄布局比較適合在文字內容頁面使用,並不適合整個頁面編排時使用。

彈性盒布局

1.使用自適應視窗的彈性盒布局

如何才能讓div的寬度跟隨瀏覽器視窗變化而變化?在css3中我們只要使用乙個box-flex屬性,使得我們的盒布局變成彈性盒布局就可以了。

相容性寫法:

-webkit-box-flex(sanfari瀏覽器、chrome瀏覽器時前面加-webkit-)

-moz-box-flex(firefox瀏覽器時前面加-moz-)

2.改變元素的顯示順序

使用彈性盒布局的時候,可以通過box-ordinal-group屬性來改變各個元素的顯示順序,在每個元素中加入box-ordinal-group屬性,這個屬性使用乙個標識序號的正數屬性值,瀏覽器在顯示的時候根據序號的從小到大來顯示這些元素。

相容性寫法:

-webkit-box-ordinal-group(sanfari瀏覽器、chrome瀏覽器時前面加-webkit-)

-moz-box-ordinal-group(firefox瀏覽器時前面加-moz-)

3.改變元素的排列方向

在使用彈性盒布局的時候,可以通過box-orient來指定多個元素的排列方向

值:horizontal在水平行中從左向右排列子元素/vertical從上向下垂直排列子元素

相容性寫法:

-webkit-box-orient:vertical(sanfari瀏覽器、chrome瀏覽器時前面加-webkit-)

-moz-box-orient:vertical(firefox瀏覽器時前面加-moz-)

4.元素的寬度與高度自適應

在使用盒布局的時候,元素的寬度與高度具有自適應性,就是元素的寬度與高度可以根據排列方向的改變而改變

5.使用彈性盒布局來消除空白

方法:給子div中加入乙個box-flex屬性

6.對多個元素使用box-flex屬性

讓瀏覽器或者容器的元素總寬度或者是總高度都等於瀏覽器或者容器的高度

方法對多個元素使用box-flex屬性

7.指定水平方向與垂直方向的對齊方式

使用盒布局的時候,可以使用box-pack屬性及box-align屬性來指定元素中的文字、影象以及子元素的水平方向或者是垂直方向上的對齊方式

相容性寫法:

-webkit-box-pack:值(sanfari瀏覽器、chrome瀏覽器時前面加-webkit-)

-moz-box-pack:值(firefox瀏覽器時前面加-moz-)

css3之布局相關的樣式

本篇主要講布局相關的樣式。1 多欄布局。在css3之前,若要實現分欄的效果,可以使用浮動 float 來實現。但是這樣會有乙個缺點就是,分欄時造成分欄的幾個欄不能對齊。而在css3中,可以通過column count屬性來進行多欄布局,這個屬性的含義是將乙個元素中的內容分成多欄進行顯示。使用方法 c...

scrollbar樣式相關

一些 為了整體效果,會調整頁面滾動條的顏色,但是,這個解決方案只有 kde 上的 konqueror 瀏覽器和 windows 上的 internet explorer 5.5 才支援,發在這裡只是供有需要的人採用,因此,使用前要根據自己的使用者群來進行選擇。由於在 xhtml 中 定義在 body...

ScrollBar樣式相關

最好設定listview或者scrollview的margin,這樣顯示效果較好,關於scrollbarstyle insideoverlay 預設值,表示在padding區域內並且覆蓋在view上 insideinset 表示在padding區域內並且插入在view後面 outsideoverla...