1. 文檔流（normal flow）
即默認布局，將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素，即為文檔流。每個非浮動塊級元素都獨占一行, 浮動元素則按規定浮在行的一端. 若當前行容不下, 則另起新行再浮動。
2. 顯示框類型
每一個元素都有display值，這個屬性用于定義建立布局時元素生成的顯示框類型，我們可以按需求重寫，以達到我們想要的效果。比如 li 是塊級元素，但是可以在具體寫水平菜單時修改為inline更方便。
這些都是最基本的幾個，還有更多設置。
3. 盒子模型
這里是一般的盒子模型，基本所有的塊級元素都會有，大小由外邊距（margin）、邊框（border）、內邊距（padding）、高（height）、寬（width）組成，所以你若是需要高為多少的盒子，可能需要減去要設置的一定的邊寬和內邊距。
- 但是，現在有了box-sizing屬性（>= IE8），
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
你可以這樣設置，使高寬包含內邊距和邊框寬。
4. 定位布局
基于文檔流, 我們可以這樣理解以下的定位模式:
- 相對定位： 即相對于元素在文檔流中位置進行偏移， 但保留原占位。
- 絕對定位：即完全脫離文檔流，相對于position屬性非static值的最近父級元素進行偏移。
- 固定定位：即完全脫離文檔流, 相對于視區進行偏移。
5. 浮動布局
可設計流動布局。（float浮動、絕對定位、固定定位都會使得元素脫離文檔流而存在，但是在IE中浮動元素也存在于文檔流中）
.float-right {
float: right;
}
.float-left{
float: left;
}
浮動元素不占任何正常文檔流空間，而浮動元素的定位還是基于正常的文檔流，它從文檔流中抽出并盡可能移動至最左側或者最右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補他原先的空間。因為浮動會對下一個非float元素產生影響，所以我們需要按需求清除浮動使用：
.clear-right {
clear: right;
}
.clear-left{
clear: left;
}
.clear-both{
clear: both;
}
有時清除float會發生溢出，即內部較大元素撐出包含它的元素。可以使用clearfix hack，即對外容器使用overflow: auto;即對溢出部分自適應。然后對于IE6還要加一行zoom: 1;這個zoom就是IE私有屬性了，表示縮放倍數。當然，清除浮動對于不同瀏覽器還有可能有不同，比較麻煩。
.clearfix-hack {
overflow: auto;
}
/* for IE */
.clearfix-hack {
overflow: auto;
zoom: 1;
}
6. 基于百分比的柵格布局
將width、height設置為以%為單位，這是比較常用的布局技巧，響應式的柵格布局方法很多也就是這樣來設置的。同時輔以流動特性和媒體查詢，就可以很好地做到跨屏適應。
.width-12 {
width: 100%;
}
.width-11 {
width: 91.66666667%;
}
......
.width-2 {
width: 16.66666667%;
}
.width-1 {
width: 8.33333333%;
}
7. 媒體查詢
這是實現響應式多屏適應的一種很重要的手段：
@media screen and (min-width: 768px) {
.container {
width: 1170px;
}
}
@media screen and (max-width: 767px) {
.container {
width: 750px;
}
}
即在不同寬度的窗口上渲染不同的CSS。
7. column多欄布局
CSS新屬性，用于實現文字的多列布局，是的，就像報刊那樣。
/* >= IE9 */
.three-column {
padding: 1em;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
}
這就會將這個內部的文本顯示成三列。
9. Flexbox彈性布局
這是最新的一種布局方式，也可能將成為未來布局的首選方式
.flexbox {
display: flex;
}
.flexbox2 {
display: inline-flex;
}
設置flex屬性后，子元素的float、clear、vertical-align屬性會失效。
<!-- HTML -->
<div class="container">
<div class="noflex1">這里是固定的200px</div>
<div class="noflex2">這里是固定不變的300px</div>
<div class="flex1">
<div class="flex-center">
flex-item居中
</div>
</div>
<div class="flex2">左邊一格占剩下的1/3，這里占有剩下的2/3</div>
</div>
/* CSS */
div {
height: 300px;
font-size: 30px;
}
.container {
/*width: 100%;*/
width: 100%;
display: -webkit-flex;
display: flex;
background-color: #233333;
}
.noflex1 {
-webkit-flex: initial;
flex: initial;
width: 100px;
background-color: #666666;
}
.noflex2 {
-webkit-flex: none;
flex: none;
width: 200px;
background-color: #765432;
}
.flex-center {
width: 100px;
height: 100px;
background-color: #8080FF;
}
.flex1 {
-webkit-flex: 1;
flex: 1;
/* flex使得CSS終于有一種比較好的居中方式了！ */
display: -webkit-flex;
display: flex;
/* 讓內容（flex item）在交叉軸（cross axis）上（垂直）居中 */
-webkit-align-items: center;
align-items: center;
/* 讓內容在主軸（main axis）上（水平）居中 */
-webkit-justify-content: center;
justify-content: center;
background-color: #FCFCFC;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
background-color: #AAAAAA;
}
flex還有跟多概念，具體可參考手冊。
10. Grid網格布局模型（CSS Grid Layout Module）
前端的世界真是瞬息萬變，這里的grid是CSS的一個最新特性，新到W3C組織幾天前才宣布規范已穩定，但是因為太新了，各瀏覽器并沒有很好的支持這個特性，在一些瀏覽器里甚至是實驗功能，需要手動開啟。
所以寫完后，放在瀏覽器里是不會有效果的，這是因為瀏覽器并沒有默認開啟網格功能，只有IE10默認開啟了（實際我使用IE11和Edge時并沒有效果，然后我開啟了Chrome的實驗性網絡平臺功能才看到了grid布局的效果，但效果不是很好）。
網格布局更像是曾經的table布局，先設置一個網格容器，并設置其行列數，然后設置子項目行列......但它又有更多創新且更為復雜、更多浮夸的功能，是的非常浮夸，想要了解更多，還是多多關注grid布局的最新動態。但是我勸大家暫時不要在這個沒有瀏覽器能夠很好支持、還默認關閉的特性上浪費時間了。
11.使用rem單位進行響應式布局
rem是CSS3一個新增加的單位，但是已經得到了現在大多瀏覽器的很好的支持。
（等待更新中……）
