w3c特意給css3增加了乙個多列布局模組（css multi column layout module）。它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上經常使用。
columns： ||要顯示3欄顯示，每欄寬度為150px，**為：
class="columns">
為了能在web頁面中方便實現類似報紙、雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組（css multi column layout module）。它主要應用在文字的多列布局方面。對於文字的多列布局，我想大家並不陌生，因為報紙和雜誌上我們隨處可見，這種布局在報紙和雜誌上都使用了幾十年了，但需要在web頁面上實現文字的多列布局，正如下圖所示。p>
為了能在web頁面中方便實現類似報紙、雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組（css multi column layout module）。它主要應用在文字的多列布局方面。對於文字的多列布局，我想大家並不陌生，因為報紙和雜誌上我們隨處可見，這種布局在報紙和雜誌上都使用了幾十年了，但需要在web頁面上實現文字的多列布局，正如下圖所示。p>
div>
/*css***/
.columns
column-width: auto |column-count：auto |column-gap: normal ||/*css***/
column-count: 3;
column-gap: 2em;
}
column-rule:
-width
>|
-style
>|
-color
>
類似於border-color屬性，主要用來定義列邊框顏色，其預設值為前景色color的值，使用時相當於border-color。column-rule-color接受所有的顏色。如果不希望顯示顏色，也可以將其設定為transparent(透明色)。
為了能有效區分欄目列之間的關係，可以為其設定乙個列邊框，**為：
/*css***/
column-rule: 2px
dotted
green;
column-span: none
|all
/*css***/
column-span
:all;
在盒模型中主要包括width、height、border、background、padding和margin這些屬性，而且他們之間的層次關係可以相互影響。
盒模型的3d展示圖：
從圖中可以看出padding屬性和content屬性層疊background-image屬性，層疊background-color屬性，這個是存在的，它們四者之間構成了ｚ軸（垂直螢幕的座標）多重層疊關係。
border屬性與margin屬性、padding屬性三者之間應該是平面上的並級關係，並不能構成ｚ軸的層疊關係。
在css中盒模型被分為兩種，第一種是w3c的標準模型，另一種是ie的傳統模型，它們相同之處都是對元素計算尺寸的模型，具體說不是對元素的width、height、padding和border以及元素實際尺寸的計算關係，它們不同之處是兩者的計算方法不一致，原則上來說盒模型是分得很細的，這裡所看到的主要是外盒模型和內盒模型，如下面計算公式所示：
①w3c標準盒模型
外盒尺寸計算（元素空間尺寸）
element空間高度＝內容高度＋內距＋邊框＋外距
element空間寬度＝內容寬度＋內距＋邊框＋外距
內盒尺寸計算（元素大小）
element高度＝內容高度＋內距＋邊框（height為內容高度）
element寬度＝內容寬度＋內距＋邊框（width為內容寬度）
外盒尺寸計算（元素空間尺寸）
element空間高度＝內容高度＋外距（height包含了元素內容寬度、邊框、內距）
element寬間寬度＝內容寬度＋外距（width包含了元素內容寬度、邊框、內距）
內盒尺寸計算（元素大小）
element高度＝內容高度（height包含了元素內容寬度、邊框、內距）
element寬度＝內容寬度（width包含了元素內容寬度、邊框、內距）
flexbox布局，即伸縮布局盒模型（flexible box），用來提供乙個更加有效的方式制定、調整和分布乙個容器裡專案布局，即使它們的大小是未知或者動態的，這裡簡稱為flex。
可以輕鬆的實現螢幕和瀏覽器視窗大小發生變化時保持元素的相對位置和大小不變，同時減少了依賴於浮動布局實現元素位置的定義以及重置元素的大小。
flexbox布局在定義伸縮專案大小時伸縮容器會預留一些可用空間，讓你可以調節伸縮專案的相對大小和位置。例如，你可以確保伸縮容器中的多餘空間平均分配多個伸縮專案，當然，如果你的伸縮容器沒有足夠大的空間放置伸縮專案時，瀏覽器會根據一定的比例減少伸縮專案的大小，使其不溢位伸縮容器。
綜合而言，flexbox布局功能主要具有以下幾點：
1. 螢幕和瀏覽器視窗大小發生改變也可以靈活調整布局；
2. 可以指定伸縮專案沿著主軸或側軸按比例分配額外空間（伸縮容器額外空間），從而調整伸縮專案的大小；
3. 可以指定伸縮專案沿著主軸或側軸將伸縮容器額外空間，分配到伸縮專案之前、之後或之間；
4. 可以指定如何將垂直於元素布局軸的額外空間分布到該元素的周圍；
5. 可以控制元素在頁面上的布局方向；
6. 可以按照不同於文件物件模型（dom）所指定排序方式對螢幕上的元素重新排序。也就是說可以在瀏覽器渲染中不按照文件流先後順序重排伸縮專案順序。
詳見css3 flex布局—慕課網
CSS3 邊框 慕課網 學習總結
border radius是向元素新增圓角邊框。使用方法 border radius 10px 所有角都使用半徑為10px的圓角 border radius 5px 4px 3px 2px 四個半徑值分別是左上角 右上角 右下角和左下角，順時針 border radius的值只能用px單位，你還可以...
CSS3布局樣式
css3多列布局columns 為了能在web頁面中方便實現類似報紙 雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上都使用了幾十年了，但要在web頁面上實現這樣的...
CSS3布局樣式
1.多列布局 columns 為了能在web頁面中方便實現類似報紙 雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面。columns column width column count 引...