### 多列布局 —— Columns
> 為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面，這種布局在報紙和雜志上都使用了幾十年了，但要在Web頁面上實現這樣的效果還是有相當大的難度，慶幸的是，CSS3的多列布局可以輕松實現
語法：
```css
columns：<column-width> || <column-count>
```
多列布局columns屬性參數主要就兩個屬性參數：列寬和列數
|參數|參數說明|
|---|---|
|`<column-width>`|主要用來定義多列中每列的寬度|
|`<column-count>`|主要用來定義多列中的列數|
舉例：要顯示2欄顯示，每欄寬度為200px，代碼為：
```css
columns: 200px 2;
```
### 多列布局 —— column-width
> `column-width`的使用和CSS中的width屬性一樣，不過不同的是，`column-width`屬性在定義元素列寬的時候，既可以單獨使用，也可以和多列屬性中其他屬性配合使用。其基本語法如下所示 :
```css
column-width: auto | <length>
```
屬性值|壽命
---|---
auto|如果`column-width`設置值為`auto`或者沒有顯示的設置值時，元素多列的列寬將由其他屬性來決定，比如前面的示例就是由列數`column-count`來決定
length|使用固定值來設置元素列的寬度，其主要是由數值和長度單位組成，不過其值只能是正值，不能為負值
### 多列布局——column-count
> `column-count`屬性主要用來給元素指定想要的列數和允許的最大列數。
其語法規則：
```css
column-count：auto | <integer>
```
取值說明：
屬性值|屬性值說明
---|---
auto|此值為`column-count`的默認值，表示元素只有一列，其主要依靠瀏覽器自動設置
integer|此值為整數值，主要用來定義元素的列數，取值為大于0的整數，負值無效
例如：將列分成四列顯示，代碼如下：
```css
column-count: 4;
```
### 列間距column-gap
> `column-gap`主要用來設置列與列之間的間距
其語法規則如下：
```css
column-gap: normal || <length>
```
取值說明
屬性值|屬性值說明
---|---
normal|默認值，默認為1em(如果你的字號是px，其默認值為你的font-size值)
length|此值用來設置列與列之間的距離，其可以使用px,em單位的任何整數值，但不能是負值
例如：將內容分三列顯列，列與列之間的間距為2em，實現代碼為：
```css
column-count: 3;
column-gap: 2em;
```
### 列表邊框column-rule
> `column-rule`主要是用來定義列與列之間的邊框寬度、邊框樣式和邊框顏色。簡單點說，就有點類似于常用的`border`屬性。但`column-rule`是不占用任何空間位置的，在列與列之間改變其寬度不會改變任何列的位置。
語法規則：
```css
column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
```
取值說明：
屬性值|屬性值說明
---|---
column-rule-width|類似border-width屬性，主要用來定義列邊框的寬度，其默認值為'medium'，`column-rule-width`屬性接受任意浮點數，但不接收負值，也可以使用關鍵詞：`medium`、`thick`和`thin`
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`(透明色)
例如：為了能有效區分欄目列之間的關系，可以為其設置一個列邊框，代碼為：
```css
column-rule: 2px dotted green;
```
### 跨列設置column-span
> `column-span`主要用來定義一個分列元素中的子元素能跨列多少
`column-width`、`column-count`等屬性能讓一元素分成多列，不管里面元素如何排放順序，他們都是從左向右的放置內容，但有時我們需要基中一段內容或一個標題不進行分列，也就是橫跨所有列，此時column-span就可以輕松實現，此屬性的語法如下
```css
column-span: none | all
```
例如：將第一個標題跨越所有列，代碼：
```css
column-span:all;
```
### 盒子模型
> CSS中有一種基礎設計模式叫盒模型，盒模型定義了Web頁面中的元素中如何來解析。
CSS中每一個元素都是一個盒模型，包括`html`和`body`標簽元素。在盒模型中主要包括`width`、`height`、`border`、`background`、`padding`和`margin`這些屬性，而且他們之間的層次關系可以相互影響
#### box-sizing：
在CSS中盒模型被分為兩種，第一種是w3c的標準模型，另一種是IE的傳統模型，它們相同之處都是對元素計算尺寸的模型，具體說不是對元素的width、height、padding和border以及元素實際尺寸的計算關系，它們不同之處是兩者的計算方法不一致，原則上來說盒模型是分得很細的，這里所看到的主要是外盒模型和內盒模型，如下面計算公式所示：
* W3C標準盒模型
```
外盒尺寸計算（元素空間尺寸）
element空間高度＝內容高度＋內距＋邊框＋外距
element空間寬度＝內容寬度＋內距＋邊框＋外距
內盒尺寸計算（元素大小）
element高度＝內容高度＋內距＋邊框（height為內容高度）
element寬度＝內容寬度＋內距＋邊框（width為內容寬度）
```
* IE傳統下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”）
```
外盒尺寸計算（元素空間尺寸）
element空間高度＝內容高度＋外距（height包含了元素內容寬度、邊框、內距）
element寬間寬度＝內容寬度＋外距（width包含了元素內容寬度、邊框、內距）
內盒尺寸計算（元素大小）
element高度＝內容高度（height包含了元素內容寬度、邊框、內距）
element寬度＝內容寬度（width包含了元素內容寬度、邊框、內距）
```
在CSS3中新增加了`box-sizing`屬性，能夠事先定義盒模型的尺寸解析方式，其語法規則如下：
```css
box-sizing: content-box | border-box | inherit
```
屬性值|屬性值說明
---|---
content-box|默認值，其讓元素維持W3C的標準盒模型，也就是說元素的寬度和高度（width/height）等于元素邊框寬度（border）加上元素內距（padding）加上元素內容寬度或高度（content width/ height），也就是element width/height = border + padding + content width / height
border-box|重新定義CSS2.1中盒模型組成的模式，讓元素維持IE傳統的盒模型（IE6以下版本和IE6-7怪異模式），也就是說元素的寬度或高度等于元素內容的寬度或高度。從上面盒模型介紹可知，這里的內容寬度或高度包含了元素的border、padding、內容的寬度或高度（此處的內容寬度或高度＝盒子的寬度或高度—邊框—內距）。
inherit|使元素繼承父元素的盒模型模式
其中最為關鍵的是`box-sizing`中`content-box`和`border-box`兩者的區別
#### 伸縮布局
> CSS3引入了一種新的布局模式——`Flexbox`布局，即伸縮布局盒模型（Flexible Box），用來提供一個更加有效的方式制定、調整和分布一個容器里項目布局，即使它們的大小是未知或者動態的，這里簡稱為Flex
`Flexbox`布局常用于設計比較復雜的頁面，可以輕松的實現屏幕和瀏覽器窗口大小發生變化時保持元素的相對位置和大小不變，同時減少了依賴于浮動布局實現元素位置的定義以及重置元素的大小。
`Flexbox`布局在定義伸縮項目大小時伸縮容器會預留一些可用空間，讓你可以調節伸縮項目的相對大小和位置。例如，你可以確保伸縮容器中的多余空間平均分配多個伸縮項目，當然，如果你的伸縮容器沒有足夠大的空間放置伸縮項目時，瀏覽器會根據一定的比例減少伸縮項目的大小，使其不溢出伸縮容器。綜合而言，`Flexbox`布局功能主要具有以下幾點：
1. 屏幕和瀏覽器窗口大小發生改變也可以靈活調整布局；
2. 可以指定伸縮項目沿著主軸或側軸按比例分配額外空間（伸縮容器額外空間），從而調整伸縮項目的大小；
3. 可以指定伸縮項目沿著主軸或側軸將伸縮容器額外空間，分配到伸縮項目之前、之后或之間；
4. 可以指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍；
5. 可以控制元素在頁面上的布局方向；
6. 可以按照不同于文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序。也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項目順序。
`Flexbox`規范版本眾多，瀏覽器對此語法支持度也各有不同，接下來的內容以最新語法版本為例向大家展示：
* 創建一個flex容器
任何一個`flexbox`布局的第一步是需要創建一個`flex`容器。為此給元素設置`display`屬性的值為`flex`,在Safari瀏覽器中，你依然需要添加前綴`-webkit`
```css
.flexcontainer{
display: -webkit-flex;
display: flex;
}
```
* `Flex`項目顯示
`Flex`項目是`Flex`容器的子元素。他們沿著主要軸和橫軸定位。默認的是沿著水平軸排列一行。你可以通過`flex-direction`來改變主軸方向修改為`column`，其默認值是`row`
* `Flex`項目列顯示
```css
.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
```
* `Flex`項目移動到頂部
如何將`flex`項目移動到頂部，取決于主軸的方向。如果它是垂直的方向通過`align-items`設置；如果它是水平的方向通過`justify-content`設置。
```css
.flexcontainer{
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
```
```css
.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: flex-start;
align-items: flex-start;
}
```
* `Flex`項目移到左邊
`flex`項目稱動到左邊或右邊也取決于主軸的方向。如果`flex-direction`設置為`row`，設置`justify-content`控制方向；如果設置為`column`，設置`align-items`控制方向。
```css
.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
```
```css
.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
align-items: flex-start;
}
```
* `Flex`項目移動右邊
```css
.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
```
```css
.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-end;
align-items: flex-end; }
```
* `Flex`水平垂直居中
在`Flexbox`容器中制作水平垂直居中是微不足道的。設置`justify-content`或者`align-items`為`center`。另外根據主軸的方向設置`flex-direction`為`row`或`column`
```css
.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
```
```css
.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
```
* `Flex`項目實現自動伸縮
您可以定義一個`flex`項目，如何相對于`flex`容器實現自動的伸縮。需要給每個`flex`項目設置`flex`屬性設置需要伸縮的值。
```css
.bigitem{
-webkit-flex:200;
flex:200;
}
.smallitem{
-webkit-flex:100;
flex:100;
}
```
