以前對CSS布局有些接觸，但是因為沒有系統的學習過，導致每次在調整和修改起來都覺得比較困難，為了解決這個難啃的骨頭花了兩天時間系統的把目前比較主流的CSS布局方式系統的看了一遍，解決了之前的一些模糊的知其然不知其所以然的問題，在此記錄供后續參考。
一、盒模型（Box Model）
所有HTML元素可以看作盒子，CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：
- margin：邊距/外邊距，清除邊框外的區域，外邊距是透明的；
- border：邊框，圍繞在內邊距和內容外的邊框；
- padding：填充/內邊距，清除內容周圍的區域，內邊距是透明的；
- content：內容，盒子的內容，顯示文本和圖像。
下面的圖片展示了盒模型：
元素的高度和寬度
通過CSS設置元素的高度和寬度，實際設置的是content（內容）部分的高度和寬度而不是整個盒子的寬度和高度，而整個盒子的寬度是：（內容寬度 +padding寬度 + border寬度 + margin寬度）之和，如下圖：
這樣我們改四個中的其中一個，都會導致盒子寬度的改變，這對我們來說不友好，為了消除這種差異，CSS新增了box-sizing屬性，現在通過CSS設置的寬度300px是content+padding+border，如下圖：
想要頁面上所有的元素在高度和寬度的設置上都有統一的表現，所以建議為系統寫css時候，第一個樣式是：
*{
margin:0;
padding:0;
-webkit-box-sizing: border-box; /*兼容webkit內核瀏覽器，如：Chrome，Safari等*/
-moz-box-sizing: border-box; /*兼容火狐瀏覽器*/
box-sizing: border-box;
}
二、display屬性
display 是CSS中最重要的用于控制布局的屬性，決定元素屬于那種盒子（指定元素的顯示類型）。每個元素都有一個默認的 display 值，這與元素的類型有關。對于大多數元素它們的默認值通常是 block 或 inline 。
塊級元素（block）
一般是其他元素的容器，可容納內聯元素和其他塊狀元素，塊狀元素排斥其他元素與其位于同一行，寬度(width)高度(height)起作用。常見塊狀元素為div、p、h1、li。
內聯元素（inline）
內聯元素只能容納文本或者其他內聯元素，它允許其他內聯元素與其位于同一行，其寬度(width)和高度(height)只與其包含的內容有關，通過CSS設置高度和寬度不起作用。常見內聯元素為a、span。
可以通過設置display屬性讓塊級元素和內聯元素相互轉換，如：
li{
display:inline; /*將內聯元素設置為塊級元素*/
}
span{
display:block; /*將塊級元素設置為內聯元素*/
}
隱藏元素（none）
一些特殊元素的默認 display 值就是none，如：script。
隱藏一個元素可以通過display:none，或visibility:hidden。但是請注意，這兩種方法會產生不同的結果：
- 通過visibility:hidden隱藏的元素仍需占用與未隱藏之前一樣的空間，也就是說，該元素雖然被隱藏了，但仍然會影響布局；
- display:none，不會占據它本來應該占據的空間，不會影響布局。
塊級內聯元素（inline-block）
將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。準確地說，應用此特性的元素呈現為內聯對象，周圍內聯元素保持在同一行，但保留設置寬度和高度地塊元素的屬性。
三、position屬性
display決定了盒子種類，position就用來確定盒子的位置。
標準文檔流（static）
static 是positon屬性的默認值，指按照文檔至上而下的標準文檔流，被 position: static 修飾的元素不會受到top, bottom, left, right影響。
絕對定位（fixed）
元素的位置相對于瀏覽器窗口固定，配合top、right、bottom、left進行定位，脫離標準文檔流，不會受到父元素overflow:hidden影響，即使窗口是滾動的它也不會移動，常用示例：二維碼、廣告的懸浮；
絕對定位（absolute）
絕對定位的元素的位置相對于最近的已定位（position屬性值不為static）父元素，如果元素沒有已定位的父元素，那么它的位置相對于body，配合top、right、bottom、left進行定位，脫離標準文檔流，會受到父元素overflow:hidden影響，并且它會隨著頁面滾動而移動。
相對定位（relative）
默認參照父級的原始點為原始點，配合top、right、bottom、left進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位。
四、float屬性
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動，一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止，浮動元素之后的元素將圍繞它，浮動元素之前的元素將不會受到影響，其屬性值如下：
- left（向左浮動）
- rigth（向右浮動）
- top（向上浮動）
- bottom（向下浮動）
清除浮動（clean）
使用浮動后會影響到后面的元素所以需要及時的清除浮動，而且會造成父級元素高度塌陷。
.clean{
clean:left; /*清除左浮動*/
clean:right; /*清除右浮動*/
clean:top; /*清除上浮動*/
clean:bottom; /*清除下浮動*/
clean:both; /*清除所有浮動*/
}
/*清除浮動并防止父級元素高度塌陷*/
.clearfix:before, .clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0; height: 0;
}
.clearfix:after { clear: both }
.clearfix { *zoom: 1 }
五、響應式布局
使用媒體查詢 （@media） 可以針對不同的媒體類型定義不同的樣式，達到響應式布局的目的，在不同尺寸的設備上都有完美的展示。
@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}
同時可以針對不同的媒體引用不同的 stylesheets
<link media="screen and (max-device-width:299px)" rel="stylesheet" href="small.css" />
<link media="screen and (min-device-width:300px) and (max-device-width:900px)" rel="stylesheet" href="middle.css" />
<link media="screen and (min-device-width:901px)" rel="stylesheet" href="big.css" />
六、彈性布局（Flex）
Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。圖示如下：
任何一個容器都可以指定為flex布局
.box{
display: -webkit-flex;
display: flex;
}
行內元素也可以使用flex布局
.box{
display: -webkit-inline-flex;
display：inline-flex;
}
** 注意：** 設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效，如果元素不是彈性盒模型對象的子元素，則 flex 屬性不起作用。
下面了解一下彈性布局的威力：
.container {
display: -webkit-flex;
display: flex;
}
.initial {
-webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;
}
.none {
-webkit-flex: none;
flex: none;
width: 200px;
}
.flex1 {
-webkit-flex: 1;
flex: 1;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}
實現棘手的垂直居中：
.vertical-container {
height: 300px;
display: -webkit-flex;
display: flex; /*設置容器為flex布局*/
-webkit-align-items: center; /*設置交叉軸方向上的對齊方式為居中*/
align-items: center;
-webkit-justify-content: center; /*設置主軸方向上的對齊方式為居中*/
justify-content: center;
}
對使用flex布局的容器的屬性：
flex-direction定義主軸的方向（即項目的排列方向）flex-wrap定義當一條軸線排不下時換行的方式flex-flow是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。justify-content定義了項目在主軸上的對齊方式。align-items定義項目在交叉軸上如何對齊。align-content定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
和使用flex布局容器里子元素的屬性：
order定義項目的排列順序。數值越小，排列越靠前，默認為0。flex-grow定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。flex-shrink定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。flex-basis定義了在分配多余空間之前，項目占據的主軸空間（main size），也可以設為跟width或height屬性一樣的值（比如350px），則項目將占據固定空間flex是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性，默認值為0 1 auto后兩個屬性可選。該屬性有三個快捷值：auto(1 1 auto) 、 none (0 0 auto)和initial（0 1 auto）。align-self允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性，默認值為auto，表示繼承父元素的align-items屬性。
因flex布局涉及到的屬性比較多在此只做屬性描述待深入學習后再做總結。
七、Grid布局
CSS Grid現在已經被W3C納入到CSS3的一個布局模塊當中，但由于其目前僅在IE10+上支持，而且也僅支持部分屬性，目前各瀏覽器對其支持程度不一致，致使無法全面使用，就算是學習做一些測試示例都還需要做一些設置，所以暫時不做學習，等后續標準規范之后再學習總結。
不過“大漠”在W3cplus中已經有了詳細的教程，感興趣的可以提前了解學習，鏈接如下：
