日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
一文詳解CSS常見的五大布局

【稿件】

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了大荔免費建站歡迎大家使用！

本文概要

本文將介紹如下幾種常見的布局：

一、單列布局

常見的單列布局有兩種：

  • header,content 和 footer 等寬的單列布局

  • header 與 footer 等寬,content 略窄的單列布局

1.如何實現(xiàn)

對于***種，先通過對 header,content,footer 統(tǒng)一設(shè)置 width：1000px;或者 max-width：1000px(這兩者的區(qū)別是當屏幕小于 1000px 時，前者會出現(xiàn)滾動條，后者則不會，顯示出實際寬度);然后設(shè)置 margin:auto 實現(xiàn)居中即可得到。
 
    •  
    •  
  • .header{ 
  •   margin:0 auto; 
  •   max-width: 960px; 
  •   height:100px; 
  •   background-color: blue; 
  • } 
  • .content{ 
  •   margin: 0 auto; 
  •   max-width: 960px; 
  •   height: 400px; 
  •   background-color: aquamarine; 
  • } 
  • .footer{ 
  •   margin: 0 auto; 
  •   max-width: 960px; 
  •   height: 100px; 
  •   background-color: aqua; 
  • } 

    • 對于第二種，header、footer 的內(nèi)容寬度不設(shè)置，塊級元素充滿整個屏幕，但 header、content 和 footer 的內(nèi)容區(qū)設(shè)置同一個 width，并通過 margin:auto 實現(xiàn)居中。

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.   
     
  •  
    •  
    •   
     
 
 
 
        
  
  
  
    1. .header{ 
      2.   
  
  
  
    2.   margin:0 auto; 
      3.   
  
  
  
    3.   max-width: 960px; 
      4.   
  
  
  
    4.   height:100px; 
      5.   
  
  
  
    5.   background-color: blue; 
      6.   
  
  
  
    6. } 
      7.   
  
  
  
    7. .nav{ 
      8.   
  
  
  
    8.   margin: 0 auto; 
      9.   
  
  
  
    9.   max-width: 800px; 
      10.   
  
  
  
    10.   background-color: darkgray; 
      11.   
  
  
  
    11.   height: 50px; 
      12.   
  
  
  
    12. } 
      13.   
  
  
  
    13. .content{ 
      14.   
  
  
  
    14.   margin: 0 auto; 
      15.   
  
  
  
    15.   max-width: 800px; 
      16.   
  
  
  
    16.   height: 400px; 
      17.   
  
  
  
    17.   background-color: aquamarine; 
      18.   
  
  
  
    18. } 
      19.   
  
  
  
    19. .footer{ 
      20.   
  
  
  
    20.   margin: 0 auto; 
      21.   
  
  
  
    21.   max-width: 960px; 
      22.   
  
  
  
    22.   height: 100px; 
      23.   
  
  
  
    23.   background-color: aqua; 
      24.   
  
  
  
    24. } 
      25.

    二、兩列自適應(yīng)布局

    兩列自適應(yīng)布局是指一列由內(nèi)容撐開，另一列撐滿剩余寬度的布局方式

    1.float+overflow:hidden

    如果是普通的兩列布局，浮動+普通元素的 margin便可以實現(xiàn)，但如果是自適應(yīng)的兩列布局，利用float+overflow:hidden便可以實現(xiàn)，這種辦法主要通過 overflow 觸發(fā) BFC,而 BFC 不會重疊浮動元素。由于設(shè)置 overflow:hidden 并不會觸發(fā) IE6-瀏覽器的 haslayout 屬性，所以需要設(shè)置 zoom:1 來兼容 IE6-瀏覽器。具體代碼如下：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.       
      left
       
      4.   
  
  
  
    4.   
     
  •    
  •       

    right

     
  •       

    right

     
  •   
    •  
  •   
     
 
 
 
        
  
  
  
    1. .parent { 
      2.   
  
  
  
    2. overflow: hidden; 
      3.   
  
  
  
    3. zoom: 1; 
      4.   
  
  
  
    4. } 
      5.   
  
  
  
    5. .left { 
      6.   
  
  
  
    6. float: left; 
      7.   
  
  
  
    7. margin-right: 20px; 
      8.   
  
  
  
    8. } 
      9.   
  
  
  
    9. .right { 
      10.   
  
  
  
    10. overflow: hidden; 
      11.   
  
  
  
    11. zoom: 1; 
      12.   
  
  
  
    12. } 
      13.

    注意點:如果側(cè)邊欄在右邊時，注意渲染順序。即在 HTML 中，先寫側(cè)邊欄后寫主內(nèi)容

    2.Flexbox 布局

    Flexbox 布局，也叫彈性盒子布局，區(qū)區(qū)簡單幾行代碼就可以實現(xiàn)各種頁面的的布局。

     
 
 
 
        
  
  
  
    1. //html部分同上 
      2.   
  
  
  
    2. .parent { 
      3.   
  
  
  
    3. display:flex; 
      4.   
  
  
  
    4. } 
      5.   
  
  
  
    5. .right { 
      6.   
  
  
  
    6. margin-left:20px; 
      7.   
  
  
  
    7. flex:1; 
      8.   
  
  
  
    8. } 
      9.

    3.Grid 布局

    Grid 布局，是一個基于網(wǎng)格的二維布局系統(tǒng)，目的是用來優(yōu)化用戶界面設(shè)計。

     
 
 
 
        
  
  
  
    1. //html部分同上 
      2.   
  
  
  
    2. .parent { 
      3.   
  
  
  
    3. display:grid; 
      4.   
  
  
  
    4. grid-template-columns:auto 1fr; 
      5.   
  
  
  
    5. grid-gap:20px 
      6.   
  
  
  
    6. } 
      7.

    三、三欄布局

    特征：中間列自適應(yīng)寬度，旁邊兩側(cè)固定寬度，實現(xiàn)三欄布局有多種方式：

    1.浮動布局

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.    
      5.   
  
  
  
    5.   Layout 
      6.   
  
  
  
    6.    
      7.   
  
  
  
    7.       html * { 
      8.   
  
  
  
    8.           padding: 0; 
      9.   
  
  
  
    9.           margin: 0; 
      10.   
  
  
  
    10.       } 
      11.   
  
  
  
    11.       .layout article div { 
      12.   
  
  
  
    12.           min-height: 150px; 
      13.   
  
  
  
    13.       } 
      14.   
  
  
  
    14.    
      15.   
  
  
  
    15.  
      16.   
  
  
  
    16.  
      17.   
  
  
  
    17.    
      18.   
  
  
  
    18.    
      19.   
  
  
  
    19.        
      20.   
  
  
  
    20.           .layout.float .left { 
      21.   
  
  
  
    21.               float: left; 
      22.   
  
  
  
    22.               width: 300px; 
      23.   
  
  
  
    23.               background: red; 
      24.   
  
  
  
    24.           } 
      25.   
  
  
  
    25.           .layout.float .center { 
      26.   
  
  
  
    26.               background: yellow; 
      27.   
  
  
  
    27.           } 
      28.   
  
  
  
    28.           .layout.float .right { 
      29.   
  
  
  
    29.               float: right; 
      30.   
  
  
  
    30.               width: 300px; 
      31.   
  
  
  
    31.               background: blue; 
      32.   
  
  
  
    32.           } 
      33.   
  
  
  
    33.        
      34.   
  
  
  
    34.       
      三欄布局
       
      35.   
  
  
  
    35.        
      36.   
  
  
  
    36.           
     
  •           
    •  // 右欄部分要寫在中間內(nèi)容之前 
  •            
  •               

    浮動解決方案

     
  •               1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； 
  •            
  •        
  •    
  •  
  •  

    • 這種布局方式，dom 結(jié)構(gòu)必須是先寫浮動部分，然后再中間塊，否則右浮動塊會掉到下一行。 浮動布局的優(yōu)點就是比較簡單，兼容性也比較好。但浮動布局是有局限性的，浮動元素脫離文檔流，要做清除浮動，這個處理不好的話，會帶來很多問題，比如父容器高度塌陷等。

    2.絕對定位布局  

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.   
      3.   
  
  
  
    3.       
      4.   
  
  
  
    4.      
      三欄布局
       
      5.   
  
  
  
    5.       
      6.   
  
  
  
    6.           
      7.   
  
  
  
    7.           
      8.   
  
  
  
    8.              
      絕對定位解決方案
       
      9.   
  
  
  
    9.              1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； 
      10.   
  
  
  
    10.           
      11.   
  
  
  
    11.           
      12.   
  
  
  
    12.       
      13.   
  
  
  
    13.   
      14.

    絕對定位布局優(yōu)點就是快捷，設(shè)置很方便，而且也不容易出問題。缺點就是，容器脫離了文檔流，后代元素也脫離了文檔流，高度未知的時候，會有問題，這就導致了這種方法的有效性和可使用性是比較差的。

    3.flexbox 布局  

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.   
      3.   
  
  
  
    3.       
      4.   
  
  
  
    4.      
      三欄布局
       
      5.   
  
  
  
    5.       
      6.   
  
  
  
    6.           
      7.   
  
  
  
    7.           
      8.   
  
  
  
    8.              
      flexbox解決方案
       
      9.   
  
  
  
    9.              1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； 
      10.   
  
  
  
    10.           
      11.   
  
  
  
    11.           
      12.   
  
  
  
    12.       
      13.   
  
  
  
    13.   
      14.

    flexbox 布局是 css3 里新出的一個，它就是為了解決上述兩種方式的不足出現(xiàn)的，是比較***的一個。目前移動端的布局也都是用 flexbox。 flexbox 的缺點就是 IE10 開始支持，但是 IE10 的是-ms 形式的。

    4.表格布局

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.        
      4.   
  
  
  
    4.       
      三欄布局
       
      5.   
  
  
  
    5.        
      6.   
  
  
  
    6.            
      7.   
  
  
  
    7.            
      8.   
  
  
  
    8.               
      表格布局解決方案
       
      9.   
  
  
  
    9.               1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； 
      10.   
  
  
  
    10.            
      11.   
  
  
  
    11.            
      12.   
  
  
  
    12.        
      13.   
  
  
  
    13.    
      14.

    表格布局的兼容性很好，在 flex 布局不兼容的時候，可以嘗試表格布局。當內(nèi)容溢出時會自動撐開父元素。

    表格布局也是有缺陷:① 無法設(shè)置欄邊距；② 對 seo 不友好；③ 當其中一個單元格高度超出的時候，兩側(cè)的單元格也是會跟著一起變高的，然而有時候這并不是我們想要的效果。

    5.網(wǎng)格布局

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.      
      4.   
  
  
  
    4.     
      三欄布局
       
      5.   
  
  
  
    5.      
      6.   
  
  
  
    6.          
      7.   
  
  
  
    7.          
      8.   
  
  
  
    8.             
      網(wǎng)格布局解決方案
       
      9.   
  
  
  
    9.             1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； 
      10.   
  
  
  
    10.          
      11.   
  
  
  
    11.          
      12.   
  
  
  
    12.      
      13.   
  
  
  
    13.  
      14.

    CSS Grid 是創(chuàng)建網(wǎng)格布局***大和最簡單的工具。就像表格一樣，網(wǎng)格布局可以讓 Web 設(shè)計師根據(jù)元素按列或行對齊排列，但他和表格不同，網(wǎng)格布局沒有內(nèi)容結(jié)構(gòu)，從而使各種布局不可能與表格一樣。例如，一個網(wǎng)格布局中的子元素都可以定位自己的位置，這樣他們可以重疊和類似元素定位。

    但網(wǎng)格布局的兼容性不好。IE10+上支持，而且也僅支持部分屬性。

    6.圣杯布局

    ① 特點

    比較特殊的三欄布局，同樣也是兩邊固定寬度，中間自適應(yīng)，唯一區(qū)別是 dom 結(jié)構(gòu)必須是先寫中間列部分，這樣實現(xiàn)中間列可以優(yōu)先加載。

     
 
 
 
        
  
  
  
    1. .container { 
      2.   
  
  
  
    2.   padding-left: 220px;//為左右欄騰出空間 
      3.   
  
  
  
    3.   padding-right: 220px; 
      4.   
  
  
  
    4. } 
      5.   
  
  
  
    5. .left { 
      6.   
  
  
  
    6.   float: left; 
      7.   
  
  
  
    7.   width: 200px; 
      8.   
  
  
  
    8.   height: 400px; 
      9.   
  
  
  
    9.   background: red; 
      10.   
  
  
  
    10.   margin-left: -100%; 
      11.   
  
  
  
    11.   position: relative; 
      12.   
  
  
  
    12.   left: -220px; 
      13.   
  
  
  
    13. } 
      14.   
  
  
  
    14. .center { 
      15.   
  
  
  
    15.   float: left; 
      16.   
  
  
  
    16.   width: 100%; 
      17.   
  
  
  
    17.   height: 500px; 
      18.   
  
  
  
    18.   background: yellow; 
      19.   
  
  
  
    19. } 
      20.   
  
  
  
    20. .right { 
      21.   
  
  
  
    21.   float: left; 
      22.   
  
  
  
    22.   width: 200px; 
      23.   
  
  
  
    23.   height: 400px; 
      24.   
  
  
  
    24.   background: blue; 
      25.   
  
  
  
    25.   margin-left: -200px; 
      26.   
  
  
  
    26.   position: relative; 
      27.   
  
  
  
    27.   right: -220px; 
      28.   
  
  
  
    28. } 
      29.  
 
 

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.     
      圣杯布局
       
      4.   
  
  
  
    4.    
      5.   
  
  
  
    5.    
      6.   
  
  
  
    6.    
      7.   
  
  
  
    7.  
      8.

    ② 實現(xiàn)步驟

    ③ 缺點

    7.雙飛翼布局

    ① 特點

    同樣也是三欄布局，在圣杯布局基礎(chǔ)上進一步優(yōu)化，解決了圣杯布局錯亂問題，實現(xiàn)了內(nèi)容與布局的分離。而且任何一欄都可以是***欄，不會出問題。

     
 
 
 
        
  
  
  
    1. .container { 
      2.   
  
  
  
    2.     min-width: 600px;//確保中間內(nèi)容可以顯示出來，兩倍left寬+right寬 
      3.   
  
  
  
    3. } 
      4.   
  
  
  
    4. .left { 
      5.   
  
  
  
    5.     float: left; 
      6.   
  
  
  
    6.     width: 200px; 
      7.   
  
  
  
    7.     height: 400px; 
      8.   
  
  
  
    8.     background: red; 
      9.   
  
  
  
    9.     margin-left: -100%; 
      10.   
  
  
  
    10. } 
      11.   
  
  
  
    11. .center { 
      12.   
  
  
  
    12.     float: left; 
      13.   
  
  
  
    13.     width: 100%; 
      14.   
  
  
  
    14.     height: 500px; 
      15.   
  
  
  
    15.     background: yellow; 
      16.   
  
  
  
    16. } 
      17.   
  
  
  
    17. .center .inner { 
      18.   
  
  
  
    18.     margin: 0 200px; //新增部分 
      19.   
  
  
  
    19. } 
      20.   
  
  
  
    20. .right { 
      21.   
  
  
  
    21.     float: left; 
      22.   
  
  
  
    22.     width: 200px; 
      23.   
  
  
  
    23.     height: 400px; 
      24.   
  
  
  
    24.     background: blue; 
      25.   
  
  
  
    25.     margin-left: -200px; 
      26.   
  
  
  
    26. } 
      27.   
  
  
  
    27.  
      28.   
  
  
  
    28.      
      29.   
  
  
  
    29.         雙飛翼布局 
      30.   
  
  
  
    30.      
      31.   
  
  
  
    31.      
      32.   
  
  
  
    32.      
      33.   
  
  
  
    33.  
      34.

    ② 實現(xiàn)步驟(前兩步與圣杯布局一樣)

    ③ 缺點

    多加一層 dom 樹節(jié)點，增加渲染樹生成的計算量。

    ④ 圣杯布局和雙飛翼布局實現(xiàn)方式對比:

    四、等高列布局

    等高布局是指子元素在父元素中高度相等的布局方式。等高布局的實現(xiàn)包括偽等高和真等高,偽等高只是看上去等高而已,真等高是實實在在的等高。

    1.利用背景圖片

    這種方法是我們實現(xiàn)等高列最早使用的一種方法，就是使用背景圖片，在列的父元素上使用這個背景圖進行Y軸的鋪放，從而實現(xiàn)一種等高列的假象。實現(xiàn)方法簡單，兼容性強，不需要太多的css樣式就可以輕松實現(xiàn),但此方法不適合流體布局等高列的布局。

    在制作樣式之前需要一張類似下面的背景圖：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.    
      4.   
  
  
  
    4.    
      5.   
  
  
  
    5.  
      6.  
 
 

     
 
 
 
        
  
  
  
    1. .container { 
      2.   
  
  
  
    2. background: url("column.png") repeat-y; 
      3.   
  
  
  
    3. width: 960px; 
      4.   
  
  
  
    4. margin: 0 auto; 
      5.   
  
  
  
    5. } 
      6.   
  
  
  
    6. .left { 
      7.   
  
  
  
    7. float: left; 
      8.   
  
  
  
    8. width: 220px; 
      9.   
  
  
  
    9. } 
      10.   
  
  
  
    10. .content { 
      11.   
  
  
  
    11. float: left; 
      12.   
  
  
  
    12. width: 480px; 
      13.   
  
  
  
    13. } 
      14.   
  
  
  
    14. .right { 
      15.   
  
  
  
    15. float: left; 
      16.   
  
  
  
    16. width: 220px; 
      17.   
  
  
  
    17. } 
      18.

    2.利用正padding+負margin

    我們通過等布局便可解決圣杯布局的第二點缺點，因為背景是在 padding 區(qū)域顯示的，設(shè)置一個大數(shù)值的 padding-bottom，再設(shè)置相同數(shù)值的負的 margin-bottom，并在所有列外面加上一個容器，并設(shè)置 overflow:hidden 把溢出背景切掉。這種可能實現(xiàn)多列等高布局，并且也能實現(xiàn)列與列之間分隔線效果，結(jié)構(gòu)簡單，兼容所有瀏覽器。新增代碼如下： 

     
 
 
 
        
  
  
  
    1. .center, 
      2.   
  
  
  
    2.   .left, 
      3.   
  
  
  
    3.   .right { 
      4.   
  
  
  
    4.     padding-bottom: 10000px; 
      5.   
  
  
  
    5.     margin-bottom: -10000px; 
      6.   
  
  
  
    6.   } 
      7.   
  
  
  
    7.   .container { 
      8.   
  
  
  
    8.     padding-left: 220px; 
      9.   
  
  
  
    9.     padding-right: 220px; 
      10.   
  
  
  
    10.     overflow: hidden;//把溢出背景切掉 
      11.   
  
  
  
    11.   } 
      12.

    3.模仿表格布局

    這是一種非常簡單，易于實現(xiàn)的方法。不過兼容性不好，在ie6-7無法正常運行。

     
 
 
 
        
  
  
  
    1.   
      2.   
  
  
  
    2.      
      3.   
  
  
  
    3.        
      4.   
  
  
  
    4.          
      5.   
  
  
  
    5.           .... 
      6.   
  
  
  
    6.          
      7.   
  
  
  
    7.        
      8.   
  
  
  
    8.        
      9.   
  
  
  
    9.          
      10.   
  
  
  
    10.           ... 
      11.   
  
  
  
    11.          
      12.   
  
  
  
    12.        
      13.   
  
  
  
    13.        
      14.   
  
  
  
    14.          
      15.   
  
  
  
    15.           ... 
      16.   
  
  
  
    16.          
      17.   
  
  
  
    17.        
      18.   
  
  
  
    18.      
      19.   
  
  
  
    19.    
      20.   
  
  
  
    20. .table { 
      21.   
  
  
  
    21. width: auto; 
      22.   
  
  
  
    22. min-width: 1000px; 
      23.   
  
  
  
    23. margin: 0 auto; 
      24.   
  
  
  
    24. padding: 0; 
      25.   
  
  
  
    25. display: table; 
      26.   
  
  
  
    26. } 
      27.   
  
  
  
    27. .tableRow { 
      28.   
  
  
  
    28. display: table-row; 
      29.   
  
  
  
    29. } 
      30.   
  
  
  
    30. .tableCell { 
      31.   
  
  
  
    31. display: table-cell; 
      32.   
  
  
  
    32. width: 33%; 
      33.   
  
  
  
    33. } 
      34.   
  
  
  
    34. .cell1 { 
      35.   
  
  
  
    35. background: #f00; 
      36.   
  
  
  
    36. height: 800px; 
      37.   
  
  
  
    37. } 
      38.   
  
  
  
    38. .cell2 { 
      39.   
  
  
  
    39. background: #0f0; 
      40.   
  
  
  
    40. } 
      41.   
  
  
  
    41. .cell3 { 
      42.   
  
  
  
    42. background: #00f; 
      43.   
  
  
  
    43. } 
      44.

    4.使用邊框和定位

    這種方法是使用邊框和絕對定位來實現(xiàn)一個假的高度相等列的效果。結(jié)構(gòu)簡單，兼容各瀏覽器，容易掌握。假設(shè)你需要實現(xiàn)一個兩列等高布局，側(cè)欄高度要和主內(nèi)容高度相等。

     
 
 
 
        
  
  
  
    1. #wrapper { 
      2.   
  
  
  
    2. width: 960px; 
      3.   
  
  
  
    3. margin: 0 auto; 
      4.   
  
  
  
    4. } 
      5.   
  
  
  
    5. #mainContent { 
      6.   
  
  
  
    6. border-right: 220px solid #dfdfdf; 
      7.   
  
  
  
    7. position: absolute; 
      8.   
  
  
  
    8. width: 740px; 
      9.   
  
  
  
    9. height: 800px;   
      10.   
  
  
  
    10. background: green; 
      11.   
  
  
  
    11. } 
      12.   
  
  
  
    12. #sidebar { 
      13.   
  
  
  
    13. background: #dfdfdf; 
      14.   
  
  
  
    14. margin-left: 740px; 
      15.   
  
  
  
    15. position: absolute; 
      16.   
  
  
  
    16. height: 800px; 
      17.   
  
  
  
    17. width: 220px; 
      18.   
  
  
  
    18. } 
      19.   
  
  
  
    19.  
      20.   
  
  
  
    20.   ... 
      21.   
  
  
  
    21.   ... 
      22.   
  
  
  
    22.  
      23.

    五、粘連布局

    1.特點

    具體代碼如下：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.     
      3.   
  
  
  
    3.      main  
      4.   
  
  
  
    4.      main  
      5.   
  
  
  
    5.      main  
      6.   
  
  
  
    6.     
      7.   
  
  
  
    7.   
      8.   
  
  
  
    8.  footer 
      9.  
 
 

     
 
 
 
        
  
  
  
    1. * { 
      2.   
  
  
  
    2.     margin: 0; 
      3.   
  
  
  
    3.     padding: 0; 
      4.   
  
  
  
    4.   } 
      5.   
  
  
  
    5.   html, 
      6.   
  
  
  
    6.   body { 
      7.   
  
  
  
    7.     height: 100%;//高度一層層繼承下來 
      8.   
  
  
  
    8.   } 
      9.   
  
  
  
    9.   #wrap { 
      10.   
  
  
  
    10.     min-height: 100%; 
      11.   
  
  
  
    11.     background: pink; 
      12.   
  
  
  
    12.     text-align: center; 
      13.   
  
  
  
    13.     overflow: hidden; 
      14.   
  
  
  
    14.   } 
      15.   
  
  
  
    15.   #wrap .main { 
      16.   
  
  
  
    16.     padding-bottom: 50px; 
      17.   
  
  
  
    17.   } 
      18.   
  
  
  
    18.   #footer { 
      19.   
  
  
  
    19.     height: 50px; 
      20.   
  
  
  
    20.     line-height: 50px; 
      21.   
  
  
  
    21.     background: deeppink; 
      22.   
  
  
  
    22.     text-align: center; 
      23.   
  
  
  
    23.     margin-top: -50px; 
      24.   
  
  
  
    24.   } 
      25.

    2.實現(xiàn)步驟

    (1)footer 必須是一個獨立的結(jié)構(gòu)，與 wrap 沒有任何嵌套關(guān)系

    (2)wrap 區(qū)域的高度通過設(shè)置 min-height，變?yōu)橐暱诟叨?/h4>

    (3)footer 要使用 margin 為負來確定自己的位置

    (4)在 main 區(qū)域需要設(shè)置 padding-bottom。這也是為了防止負 margin 導致 footer 覆蓋任何實際內(nèi)容。

    參考文章

    作者：浪里行舟，慕課網(wǎng)認證作者，前端愛好者，立志往全棧工程師發(fā)展，從事前端一年多，目前技術(shù)棧有vue全家桶、ES6以及l(fā)ess等，樂于分享，最近一年寫了五六十篇原創(chuàng)技術(shù)文章，得到諸多好評！

    【原創(chuàng)稿件，合作站點轉(zhuǎn)載請注明原文作者和出處為.com】


    分享標題：一文詳解CSS常見的五大布局
    分享網(wǎng)址：http://www.dlmjj.cn/article/dpphjhg.html

    其他資訊