1. 文檔流（normal flow）

即默認(rèn)布局，將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素，即為文檔流。每個(gè)非浮動(dòng)塊級(jí)元素都獨(dú)占一行, 浮動(dòng)元素則按規(guī)定浮在行的一端. 若當(dāng)前行容不下, 則另起新行再浮動(dòng)。

2. 顯示框類型

每一個(gè)元素都有display值，這個(gè)屬性用于定義建立布局時(shí)元素生成的顯示框類型，我們可以按需求重寫，以達(dá)到我們想要的效果。比如 li 是塊級(jí)元素，但是可以在具體寫水平菜單時(shí)修改為inline更方便。

display

3. 盒子模型

盒子模型

這里是一般的盒子模型，基本所有的塊級(jí)元素都會(huì)有，大小由外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、高（height）、寬（width）組成，所以你若是需要高為多少的盒子，可能需要減去要設(shè)置的一定的邊寬和內(nèi)邊距。

• 但是，現(xiàn)在有了box-sizing屬性（>= IE8），

 -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

你可以這樣設(shè)置，使高寬包含內(nèi)邊距和邊框?qū)挕?/p>

4. 定位布局

position

基于文檔流, 我們可以這樣理解以下的定位模式:

• 相對(duì)定位： 即相對(duì)于元素在文檔流中位置進(jìn)行偏移， 但保留原占位。
• 絕對(duì)定位：即完全脫離文檔流，相對(duì)于position屬性非static值的最近父級(jí)元素進(jìn)行偏移。
• 固定定位：即完全脫離文檔流, 相對(duì)于視區(qū)進(jìn)行偏移。

5. 浮動(dòng)布局

可設(shè)計(jì)流動(dòng)布局。（float浮動(dòng)、絕對(duì)定位、固定定位都會(huì)使得元素脫離文檔流而存在，但是在IE中浮動(dòng)元素也存在于文檔流中）

.float-right {
    float: right;
}
.float-left{
    float: left;
}

浮動(dòng)元素不占任何正常文檔流空間，而浮動(dòng)元素的定位還是基于正常的文檔流，它從文檔流中抽出并盡可能移動(dòng)至最左側(cè)或者最右側(cè)。文字內(nèi)容會(huì)圍繞在浮動(dòng)元素周圍。當(dāng)一個(gè)元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補(bǔ)他原先的空間。因?yàn)楦?dòng)會(huì)對(duì)下一個(gè)非float元素產(chǎn)生影響，所以我們需要按需求清除浮動(dòng)使用：

.clear-right {
    clear: right;
}
.clear-left{
    clear: left;
}
.clear-both{
    clear: both;
}

有時(shí)清除float會(huì)發(fā)生溢出，即內(nèi)部較大元素?fù)纬霭脑??？梢允褂胏learfix hack，即對(duì)外容器使用overflow: auto;即對(duì)溢出部分自適應(yīng)。然后對(duì)于IE6還要加一行zoom: 1;這個(gè)zoom就是IE私有屬性了，表示縮放倍數(shù)。當(dāng)然，清除浮動(dòng)對(duì)于不同瀏覽器還有可能有不同，比較麻煩。

.clearfix-hack {
    overflow: auto;
}
/* for IE */
.clearfix-hack {
    overflow: auto;
    zoom: 1;
}

6. 基于百分比的柵格布局

將width、height設(shè)置為以%為單位，這是比較常用的布局技巧，響應(yīng)式的柵格布局方法很多也就是這樣來(lái)設(shè)置的。同時(shí)輔以流動(dòng)特性和媒體查詢，就可以很好地做到跨屏適應(yīng)。

.width-12 {
  width: 100%;
}
.width-11 {
  width: 91.66666667%;
}

......

.width-2 {
  width: 16.66666667%;
}
.width-1 {
  width: 8.33333333%;
}

7. 媒體查詢

這是實(shí)現(xiàn)響應(yīng)式多屏適應(yīng)的一種很重要的手段：

@media screen and (min-width: 768px) {
    .container {
        width: 1170px;
    }
} 
@media screen and (max-width: 767px) {
    .container {
        width: 750px;
    }
}

即在不同寬度的窗口上渲染不同的CSS。

7. column多欄布局

CSS新屬性，用于實(shí)現(xiàn)文字的多列布局，是的，就像報(bào)刊那樣。

/* >= 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;
}

這就會(huì)將這個(gè)內(nèi)部的文本顯示成三列。

9. Flexbox彈性布局

這是最新的一種布局方式，也可能將成為未來(lái)布局的首選方式

.flexbox {
        display: flex;
}
.flexbox2 {
        display: inline-flex;
}

設(shè)置flex屬性后，子元素的float、clear、vertical-align屬性會(huì)失效。

flex使布局更方便

<!-- 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;

    /* 讓內(nèi)容（flex item）在交叉軸（cross axis）上（垂直）居中 */
    -webkit-align-items: center;
            align-items: center;

    /* 讓內(nèi)容在主軸（main axis）上（水平）居中 */
    -webkit-justify-content: center;
            justify-content: center;

    background-color: #FCFCFC;
}
.flex2 {
    -webkit-flex: 2;
            flex: 2;

    background-color: #AAAAAA;
}

flex還有跟多概念，具體可參考手冊(cè)。

10. Grid網(wǎng)格布局模型（CSS Grid Layout Module）

前端的世界真是瞬息萬(wàn)變，這里的grid是CSS的一個(gè)最新特性，新到W3C組織幾天前才宣布規(guī)范已穩(wěn)定，但是因?yàn)樘铝?，各瀏覽器并沒(méi)有很好的支持這個(gè)特性，在一些瀏覽器里甚至是實(shí)驗(yàn)功能，需要手動(dòng)開(kāi)啟。
所以寫完后，放在瀏覽器里是不會(huì)有效果的，這是因?yàn)闉g覽器并沒(méi)有默認(rèn)開(kāi)啟網(wǎng)格功能，只有IE10默認(rèn)開(kāi)啟了（實(shí)際我使用IE11和Edge時(shí)并沒(méi)有效果，然后我開(kāi)啟了Chrome的實(shí)驗(yàn)性網(wǎng)絡(luò)平臺(tái)功能才看到了grid布局的效果，但效果不是很好）。
網(wǎng)格布局更像是曾經(jīng)的table布局，先設(shè)置一個(gè)網(wǎng)格容器，并設(shè)置其行列數(shù)，然后設(shè)置子項(xiàng)目行列......但它又有更多創(chuàng)新且更為復(fù)雜、更多浮夸的功能，是的非常浮夸，想要了解更多，還是多多關(guān)注grid布局的最新動(dòng)態(tài)。但是我勸大家暫時(shí)不要在這個(gè)沒(méi)有瀏覽器能夠很好支持、還默認(rèn)關(guān)閉的特性上浪費(fèi)時(shí)間了。

11.使用rem單位進(jìn)行響應(yīng)式布局

rem是CSS3一個(gè)新增加的單位，但是已經(jīng)得到了現(xiàn)在大多瀏覽器的很好的支持。
（等待更新中……）