css3學習 理論之多列布局

2022-04-22 20:16:32 字數 875 閱讀 6242

例子:columns: 250px 3;250px表示的是列寬,3表示的是多列的數目。

也可以只指定列寬,column-width:300px;-moz-column-width:300px;-webkit-column-width:300px; 網頁中每個欄目的最大寬度為300畫素;根據視窗寬度自動調整幾欄顯示。

同樣可以只指定列數,column-count:3;-moz-column-count:3;-webkit-column-count:3; 根據視窗寬度自動調整列寬。

column-gap,列間距,column-gap:3em;-moz-column-gap:3em;-webkit-column-gap:3em; 定義列間距為3em,預設為1em。

column-rule,列邊框樣式,例如:column-rule:dashed 2px gray;-moz-column-rule:dashed 2px gray;-webkit-column-rule:dashed 2px gray;定義列邊框為2畫素寬的灰色虛線。column-rule:solid 5px blue;-moz-column-rule:solid 5px blue;-webkit-column-rule:solid 5px blue;定義列邊框為5畫素寬的藍色實線。

column-span,定義跨列顯示,取值只能是1或者all,當是1 的時候,就意味著只在本欄顯示,而取all的時候,將橫跨所有列,並定位在列的z軸之上。column-span:all;-moz-column-span:all;-webkit-column-span:all; 

column-fill,定義欄目高度是否統一,取值只能是auto或者balance,設定auto時,各列的高度隨其內容的變化而自動變化。設定為balance時,高度統一。

學習學習。。o(∩_∩)o~

css3學習 理論之漸變

下面來一起學習下css3的漸變,激動人心啊,終於可以不用來做漸變背景了。webkit和gecko引擎對於css3的漸變實現有一定的差異,只能分開學習。一 webkit webkit gradient stop 引數說明 定義漸變型別,包括線性漸變 linear 和徑向漸變 radial 定義漸變起始...

css3學習 理論之文字

1.text shadow,在css3中被重新定義,增加了不透明度效果。例如 text shadow 1px 1px 1px 333 第乙個值表示水平偏移,第二個值表示垂直偏移,第三個值表示模糊半徑 可選 第四個值表示陰影的顏色 可選 還可以接受乙個以逗號分隔的陰影效果列表。例如 text shad...

css3學習 理論之彈性盒模型

彈性盒模型,該模型用於決定元素在盒子中的分布方式以及如何處理盒子的可用空間。有了他,咱們就可以輕鬆建立自適應瀏覽器視窗的流動布局或者自適應字型大小的彈性布局。其屬性有 box align,定義子元素在盒子內垂直方向上的空間分配方式。box pack,定義子元素在盒子內水平方向上的空間分配方式。box...