web前端學習筆記(CSS變化寬度佈局)

1、「1-2-1」單列變寬佈局：

      對於變寬度的佈局，首先要使內容的總體寬度隨瀏覽器窗口寬度的變化而變化。所以中間的container容器中的左右兩列的總寬度也會變化，這樣就會產生不一樣的狀況。這兩列是按照必定的比例同時變化，仍是一列固定，另外一列變化。這兩種都是很經常使用的佈局方式。然而對於等比方式而言，相對比較簡單，和我上一篇博客中1-2-1的佈局方式很是相似，所以這裏只是介紹一列固定另外一列變寬的case。
      在實際的應用中，只有單列寬度變化，而其它保持固定的佈局可能會更加實用。通常在存在多個列的頁面中，一般比較寬的一個列是用來放置內容的，而窄列放置連接、導航等內容，這些內容通常寬度是固定的，不須要擴大。所以若是能把內容列設置爲能夠變化，而其餘列固定，會是一個很好的方式。
      考慮到綜合緣由，該篇博客將只是給出示意圖和CSS關鍵概要。

示意圖：

原理分析：

      核心的問題就是浮動列的寬度應該等於「100% - 300px」，而CSS顯然不支持這種帶有減法運算的寬度表達方法。可是經過margin能夠變通的實現這個寬度。實現的原理爲，在content外面再套一個div，即圖中的contentWrap，使它的寬度爲100%，也就是等於container的寬度。而後經過將其margin-left設置爲-300px，就使它向左平移了300px。再將content的margin-left設置爲正的300px，就實現了「100% - 300px」這個原本沒法表達的寬度。此時，content在contentWrap的裏面，以標準流的方式存在，將將其左側margin設置爲300px以後，就能夠保證裏面的內容不會溢出到佈局的外面。這種方法的最大好處就是不用考慮各列的高度，經過設置footer的clear: both屬性，就能夠保證不會發生重疊現象。 

CSS簡要代碼：

#header, #footer, #container {
    margin: 0 auto;
    width: 85%;
}
#contentWrap {
    margin-left: -300px;
    float: left;
    width: 100%;
}
#content {
    margin-left: 300px;
}
#side {
    float: right;
    width: 300px;
}
#footer {
    clear: both;
}

2、「1-3-1」單側列寬度固定的變寬佈局： 

      對於一列固定、其它兩列按比例適應寬度的狀況，若是這個固定的列在左邊或右邊，那麼只須要在兩個變寬列的外面套一個div，而且這個div寬度是變寬的。它與旁邊的固定寬度列構成一個單列固定的「1-2-1」佈局，而後再將變寬列中的兩個變寬列按比例並排，就很容易實現了。對於上例中的contentWrap容器，若是內部只有一個div活動列，就像上面的「1-2-1」佈局那樣，這個活動列以標準流方式放置，它的寬度是天然造成的，這樣顯示效果是沒有問題的，而當contentWrap容器中有兩個浮動的活動列時，就須要分別設置寬度，好比分別爲40%和60%(爲了不四捨五入偏差，這裏設置59.9%)。須要特別注意的是，contentWrap列的寬度等於container的寬度，所以這裏的40%並非總寬度減去side的寬度之後的40%，而是總寬度的40%，這顯然不是咱們想要的。解決的方法就是在容器裏面再套一個div，即由原來的一個contentWrap變爲兩層，分別叫作outerWrap和innerWrap。 

示意圖：

原理分析：

      新增長的innerWrap是以標準流方式存在的，寬度會天然伸展，因爲設置了200px的左側margin，所以它的寬度就是總寬度減去200px了，這樣，innerWrap裏面的navi和content就會以這個新寬度爲寬度基準。

CSS簡要代碼：

#header, #footer, #container {
    margin: 0 auto;
    width: 85%;
}
#outerWrap {
    float: left;
    width: 100%;
    margin-left: -200px;
}
#innerWrap {
    margin-left: 200px;
}
#navi {
    float: left;
    width: 40%;
}
#content {
    float: right;
    width: 59.5%;
}
#side {
    float: right;
    width: 200px;
}
#footer {
    clear: both;
}

3、「1-3-1」中間列寬度固定的變寬佈局：

      這裏介紹的佈局形式是，固定列被放在中間，它的左右各有一列，並按比例適應總寬度。這是一種不多見的佈局方式，之因此給出只是爲了CSS的研究和練習。

示意圖：

原理分析：

      這裏以固定的「1-3-1」佈局爲基礎。如今須要在navi和side兩個div外面分別套一層div，把它們包裹起來。將左側的naviWrap設置爲50%寬度，向左浮動，並經過將margin-left設置爲-150px，向左平移了150px。而後在裏面的navi中，左側margin-left設置爲150px，補償回來這150px。接着，將content設置爲固定寬度，先作浮動，這就就緊貼着navi的右邊界。最後將sideWrap作與navi部分類似的處理，設置爲50%寬度，向右浮動。這時原本寬度已經超過100%，會被擠到下一行，可是將右側margin-right設置爲-150px後，就不會超過總寬度了。

CSS簡要代碼： 

#header, #footer, #container {
    margin: 0 auto;
    width: 85%;
}
#naviWrap {
    width: 50%;
    float: left;
    margin-left: -150px;
}
#navi {
    margin-left: 150px;
}
#content {
    float: left;
    width: 300px;
}
#sideWrap {
    width: 49.9%;
    float: right;
    margin-right:-150px;
}
#side {
    margin-right: 150px;
}
#footer {
    clear: both;
}

4、「1-3-1」雙側列寬度固定的變寬佈局：

      對於三列布局，一種很實用的佈局是3列中的左右兩列寬度固定，中間列寬度自適應。

示意圖： 

原理分析：

      先把左邊和中間兩列看作一組，做爲一個活動列，而右邊的一列做爲固定列。而後再把兩列各自當作獨立的列，左側爲固定列，最後保留content爲變寬列。在使用該方法時，每實現一個活動列都須要增長額外的輔助div。這裏的思路是，在內層，爲了使navi固定，content變寬，在兩者外面套了一個「innerWrap」的div；爲了在innerWrap中使content可以變寬，在content外面又套了「contentWrap」div；同理，爲了使innerWrap可以變寬，又爲它套了一個outerWrap，從而是結構變得複雜。但實際上原理仍是相同的。 

CSS簡要代碼： 

#header, #footer, #container {
    margin: 0 auto;
    width: 85%;
}
#side {
    width: 200px;
    float: right;
}
#outerWrap {
    width: 100%;
    float: left;
    margin-left: -200px;
}
#innerWrap {
    margin-left: 200px;
}
#navi {
    width: 150px;
    float: left;
}
#contentWrap {
    width: 100%;
    float: right;
    margin-right: -150px;
}
#content {
    margin-right: 150px;
}
#footer {
    clear: both;
}

5、「1-3-1」中列和側列寬度固定的變寬佈局：

      這裏介紹的佈局方式爲中間列和它一側的列是固定寬度，另外一側列寬度自適應。 

示意圖： 

原理分析：

      假設仍然但願左側的navi和content列的寬度分別固定爲150px和250px，右側的side列寬度變化。那麼side列的寬度就等於「100% - 150px - 250px」。該方法將在side列的外面再套一個sideWrap列，使sideWrap的寬度爲100%，並經過設置margin-right爲-400px，使其向右平移400px。而後再對side列設置正的margin-right，限制右邊界，這樣就能夠實現但願的效果了。

CSS簡要代碼：

#header, #footer, #container {
    margin: 0 auto;
    width: 85%;
}
#navi {
    flaot: left;
    width: 150px;
}
#content {
    float: left;
    width: 250px;
}
#sideWrap {
    float: right;
    width: 100%;
    margin-right: -400px;
}
#side {
    margin-right: 400px;
}
#footer {
    clear: both;
}

注：該篇博客源自《CSS設計完全研究》中的第十四章，書中的例子簡明扼要、通俗易懂，所以選取部分主要內容與你們分享，同時也便於從此本身的在線查閱。