前端知識體系之入門篇總結（一）

      利用國慶節時間，把前端學習的知識碎片進行了整理，但願能在前端之路繼續努力。

前端是一個範圍很大的概念，其領域包括在了計算系統中的方方面面，能夠說全部與用戶交互行爲相關的程序開發工做都是前端的範圍，這包括一個數字儀表的顯示設計或者一個手機APP。一般意義上講，前端指的是Web前端的開發工做，而學習前端也是從Web前端知識開始的。

這篇blog面向對前端沒有入門或者已經有必定的網頁編碼技術但對於前端知識體系沒有一個清晰條理的開發者，其要旨是整理一個普通網頁開發過程當中所能用到的知識點。與其它相似的教程不一樣，本文不對HTML、CSS、JavaScript進行分開講解，而是以一個網頁的製做週期爲藍本，描述前端開發者在每個環節中涉及到的知識體系結構，方便你們學而能用。

1. 佈局方式與佈局技巧

咱們的知識體系從頁面佈局開始。現代網頁一般由佈局單元組成，而佈局單元的不一樣排布方式也就決定了不一樣的頁面佈局方式，所以咱們先來理解一下什麼是佈局單元。

一般來說，佈局單元是指可以完成獨立功能的一個頁面的局部，好比：標題(header)、導航欄(nav)、一篇文章(article)、一個表單(form)或者是一個新聞列表，對佈局單元進行分割會形成內部元素的語義不完整，甚至是沒法理解。

HTML5添加了大量的標籤用於區分不一樣的佈局單元，這包括：

article	標記定義一篇文章
header	標記定義導航連接
nav	標記定義導航連接
section	標記定義一個區域
aside	標記定義頁面內容部分的側邊欄
hgroup	標記定義文件中一個區塊的相關信息
figure	標記定義一組媒體內容以及它們的標題
footer	標記定義一個頁面或一個區域的底部
dialog	標記定義一個對話框(會話框)相似微信

而在不支持HTML5的瀏覽器中，咱們能夠簡單的使用一個div代替它們，而不會產生其它的影響，在CSS的默認行爲方面，它們與div相同。

從頁面的展示角度咱們能夠簡單的把頁面的佈局方式分紅如下幾種，可是這並非絕對的，不一樣的方式可能在頁面中同時出現。

1.1. 流佈局

流佈局，即文檔流佈局，目前絕大多數的網頁都是流佈局的。不過目前尚未任何官方給出流佈局的準肯定義，個人理解是：頁面主體內容定寬，而且定高或者高度自適應的佈局，頁面的佈局結構不隨頁面的大小變化而發生變化。

流佈局有以下特色：

1. 全部的佈局單元層次明顯；
2. 絕對定位的佈局單元大小固定而且一般出如今body中；
3. 經過狀況下會使用清除浮動。

在進行流佈局頁面的開發時，咱們可使用有限的水平或者豎直直線進行切割，利用塊級元素的特性區分行，利用浮動和清除浮動來區分列（關於這部分請詳細參考1.2 多列布局）

補充說明：

基於文檔流, 咱們能夠很容易理解如下的定位模式:

 

浮動元素不佔任何正常文檔流空間，而浮動元素的定位仍是基於正常的文檔流，而後從文檔流中抽出並儘量遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出後，仍然在文檔流中的其餘元素將忽略該元素並填補他原先的空間。同一行的行內元素會受到浮動的影響，而塊級元素則不會。

另外咱們常常遇到的一個疑問：脫離文檔流是否是指該元素從DOM樹中脫離？

不是，用瀏覽器的審查元素就能夠看到脫離文檔流的元素（例如被float了）依然會出如今DOM樹裏。

形象地解釋爲：有戶口，沒有地，依然是本國公民。

1.2. 分欄佈局

分欄佈局是流佈局的一種特例，現代網頁因爲屏幕愈來愈寬，一般都不是一列，而是多列。一般狀況下，分欄是使用浮動實現的，但隨着列的數量和內容變化的增長，咱們有了不少新的技術和瀏覽器接口來實現分欄效果，這一部分咱們就來詳細的講解一下分欄的一些方式與方法：

1.2.1.   兩列布局（兩列定寬）

 

這種狀況下咱們能夠考慮兩列都浮動而後對外層進行浮動閉合。

 

1.2.2.   兩列布局（一列定寬一列自適應）

 

這種狀況下咱們能夠對一列進行浮動，而另外一列設置與浮動大小相同的margin-left，而後對外層進行浮動閉合。

1.2.3.   三列布局（兩邊定寬中間自適應）

這種狀況咱們能夠兩列進行浮動，而後一列自適應的方式來實現，但浮動元素必須寫在非浮動元素的前面。

 

1.2.4.   使用絕對定位代替浮動

咱們也可使用絕對定位代替浮動來進行分欄，可是這必須保證非絕對定位元素的高度要大於絕對定位元素，否則會出現塌陷。

1.2.5.   使用負margin來實現頁面佈局

負margin是瀏覽器提供的一種改變元素位置的方式，它可使元素髮生層疊並改變元素在文檔流中的實際大小。

static元素設置負margin：

  未定寬元素的負margin

定位元素的負margin  （案例：居中佈局）

 

浮動元素的負margin

 

使用負margin能夠很方便的實現多列布局，如：

1.兩列布局（一列定寬一列自適應）

 

2.三列布局（雙飛翼佈局）

 

3.三列布局（聖盃佈局）

4.等高佈局

1.2.6.   瀑布流（多列）佈局

一般狀況下，多列布局也叫瀑布流佈局，目前不少網站都使用瀑布流佈局對佈局單元進行展現，而實現瀑布流一樣也有不少方案，下邊逐一進行介紹。

方案一：多列浮動

 

 

使用這種方式的優勢是佈局簡單、不用指定列內元素的高度、自動撐開，但一樣會有列數固定，不易增長或刪除，數據沒法按順序加載的問題。

方案2：絕對定位

使用這種方式的優勢scroll和resize時方便添加數據內容，但須要知道列內數據塊的高度，同時會在resize時產生性能問題。

方案三：利用CSS3

這種方式使用方便，直接定義CSS便可，數據能夠按順序加載，resize時自動根據尺寸自動重排。可是目前支持的瀏覽器比較少，並且其排布方式與常規瀑布流不一樣，可能截斷單個區塊內容。

 

1.3.  全屏佈局

一般用在管理系統或者一些模擬原生應用的場景中。元素非流佈局，以角或者邊爲錨點，沒有必定結構的佈局,屏幕老是被佔滿。在實現過程當中，有如下幾種方式：

1.3.1.   表格佈局（內部元素可肯定高度）

整個頁面爲一個表格，經過給行列設置合適的數值來知足顯示效果。

代碼實現：

<table height="100%" width="100%" cellpadding="0" cellspacing="0">
<tr height="120">    
            <td id="header" colspan="2" style="background:red;"></td>
        </tr>
        <tr>
             <td id="aside" width="200" style="background:yellow;"></td>
             <td id="main" style="background:green;"></td>
        </tr>
        <tr height="80">
            <td id="footer" colspan="2" style="background:blue;"></td>
        </tr>
    </table>

能夠兼容到IE8，若是要兼容IE67須要用JS計算中間一行的高度，或者用內容將中間一行天然撐開。這種方法因爲會破壞頁面的語義化，適合於管理系統等對SEO要求不高的系統軟件，或者是非登陸狀態下沒法使用的軟件。

1.3.2.   絕對定位

將頁面是的每個元素都使用絕對定位，分別參考不一樣的錨點，代碼以下：

（兼容ie7+，IE6兼容方面須要用JS處理。）

    <style>
#header{
  height:120px;
  width:100%;
  background:red;
  position:absolute;
}    
#aside{
  width:200px;
  background:yellow;
  position:absolute;
  top:120px;
  bottom:80px;
}
#main{
  background:green;
  position:absolute;
  top:120px;
  bottom:80px;
  left:200px;
  right:0;
}
#footer{
  height:80px;
  width:100%;
  background:blue;
  position:absolute;
  bottom:0;
}
</style>

<div id="header"></div>
      <div id="aside">nihao</div>
      <div id="main"></div>
      <div id="footer"></div>
能夠兼容到IE7，若是要兼容到IE6，須要動態計算main元素的寬高，不過相對來講語義化的程度要好不少，main元素能夠比較方便的用iframe。

1.4.                 響應式佈局：

響應式佈局的實現主要是依賴於CSS3提供的media query，下表列出了全部目前被支持的media query

對不一樣設備支持：

對Retina支持

使用響應式佈局可讓頁面有更多的適用性，可是開發成本高，頁面加載時間長，相對來講更適合於功能性不強的頁面。