CSS3多列布局columns
為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局,W3C特意給CSS3增加了一個多列布局模塊(CSS Multi Column Layout Module)。它主要應用在文本的多列布局方面,這種布局在報紙和雜志上都使用了幾十年了,但要在Web頁面上實現這樣的效果還是有相當大的難度,慶幸的是,CSS3的多列布局可以輕松實現,語法:

參數描述:

例子:

CSS3 列間距column-gap
column-gap主要用來設置列與列之間的間距,其語法規則如下:

參數說明:

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

參數說明:

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

參數說明:

實現標題跨列,例子:

CSS3 盒子模型
在CSS3中新增加了box-sizing屬性,能夠事先定義盒模型的尺寸解析方式,其語法規則如下:

參數說明:

例子:

