（轉轉轉）使用CSS實現三欄自適應佈局（兩邊寬度固定，中間自適應）

時間  2019-11-16
標籤 轉轉 使用 css 實現 自適應 佈局 兩邊 寬度 固定 中間 欄目 CSS 简体版
原文   原文鏈接

所謂三列自適應佈局指的是兩邊定寬，中間block寬度自適應。這道題在今年網易內推前端工程師面試的時候也被問到。 我這裏主要分爲兩大類，一類是基於position傳統的實現，一類是基於CSS3新特性彈性盒模型佈局實現。css

 1. 基於傳統的position和margin等屬性進行佈局

   這裏也分爲三種方法，分別爲絕對定位法，聖盃佈局，自身浮動法。

  1).絕對定位法

    絕對定位法原理是將左右兩邊使用absolute定位，由於絕對定位使其脫離文檔流，後面的center會天然流動到他們上面，而後使用margin屬性，留出左右元素的寬度，既可使中間元素自適應屏幕寬度。
   代碼以下：
文檔代碼：
[html] view plain copy 在CODE上查看代碼片派生到個人代碼片
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>layout_box</title>  
  6.         <link rel="stylesheet" type="text/css" href="../css/layout_box.css">  
  7.     </head>  
  8.     <body>  
  9.         <h3>實現三列寬度自適應佈局</h3>  
  10.         <div id = "left">我是左邊</div>  
  11.         <div id = "right">我是右邊</div>  
  12.         <div id = "center">我是中間</div>  
  13.     </body>  
  14. </html>  
css代碼：
[css] view plain copy 在CODE上查看代碼片派生到個人代碼片
  1. html,body{ margin: 0px;width: 100%; }  
  2. h3{height: 100px;margin:20px 0 0;}  
  3. #left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}  
  4. #left{left:0px;}  
  5. #right{right: 0px;}  
  6. #center{margin:2px 210px ;background-color: #eee;height: 200px; }  
   該法佈局的好處，三個div順序能夠任意改變。不足是 由於絕對定位，因此若是頁面上還有其餘內容，top的值須要當心處理，最好可以對css樣式進行一個初始化，就像在上面例子中加了一個標題，若是不對樣式進行初始化，則兩邊和中間的值會對不齊。 另外，隨着瀏覽器窗口縮小，小於200px的時候，會發生壓縮。
結果如圖，能夠看到中間欄寬度隨着屏幕大小伸縮。

 2).使用自身浮動法

    自身浮動法的原理就是使用對左右使用分別使用float:left和float:right，float使左右兩個元素脫離文檔流，中間元素正常在正常文檔流中，使用margin指定左右外邊距對其進行一個定位。
   HTML代碼：
[html] view plain copy 在CODE上查看代碼片派生到個人代碼片
  1. <h3>使用自身浮動法定位</h3>  
  2. <div id = "left_self">我是左邊</div>  
  3. <div id = "right_self">我是右邊</div>  
  4. <div id = "center_self">我是中間</div>  
css代碼：
[css] view plain copy 在CODE上查看代碼片派生到個人代碼片
  1. #left_self,#right_self{ width: 200px;height: 200px; background-color: #ffe6b8 }  
  2. #left_self {float: left;}  
  3. #right_self{float: right;}  
  4. #center_self{margin: 0 210px;height: 200px; background-color: #a0b3d6}  
   該佈局法的好處是受外界影響小，可是不足是 三個元素的順序，center必定要放在最後，這是和絕對定位不同的地方，center佔據文檔流位置，因此必定要放在最後，左右兩個元素位置沒有關係。當瀏覽器窗口很小的時候，右邊元素會被擊倒下一行。

 3). 聖盃佈局

   聖盃佈局的原理是margin負值法。使用聖盃佈局首先須要在center元素外部包含一個div，包含div須要設置float屬性使其造成一個BFC，並設置寬度，而且這個寬度要和left塊的margin負值進行配合，具體原理參考這裏。這裏對聖盃佈局解釋特別詳細。
實現代碼：HTML文檔：
   
[html] view plain copy 在CODE上查看代碼片派生到個人代碼片
  1. <h3>使用margin負值法進行佈局</h3>  
  2.         <div id = "wrap">  
  3.             <div id = "center"></div>  
  4.         </div>  
  5.         <div id = "left_margin"></div>  
  6.         <div id = "right_margin"></div>  
CSS代碼：
[css] view plain copy 在CODE上查看代碼片派生到個人代碼片
  1. #wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}  
  2. #wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }  
  3. #left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }  
  4. #left_margin {margin-left: -100%; background-color: lightpink}  
  5. #right_margin{margin-left: -200px;}  
   該方法在網站佈局中很是常見，也是面試常考點，優勢是三欄相互關聯，有必定的抗性。須要注意的是，佈局中間部分必定要放在前面，左右順序不限制。對於left快的margin負值必定要等於wrap的寬度。
三種方法實現三欄網頁寬度自適應佈局方法見下圖。

2 ， css3新特性html

   在外圍包裹一層div，設置爲display：flex；中間設置flex：1；可是盒模型默認牢牢挨着，可使用margin控制外邊距。前端

代碼：css3

[html] view plain copy 在CODE上查看代碼片派生到個人代碼片
  1. <div id = "box">  
  2.          <div id = "left_box"></div>  
  3.          <div id = "center_box"></div>  
  4.          <div id = "right_box"></div>  
  5.         </div>  

css樣式：面試

[css] view plain copy 在CODE上查看代碼片派生到個人代碼片
  1. #box{width:100%;display: flex; height: 100px;margin: 10px;}  
  2. #left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}  
  3. #center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}  

注意： center必定要放到中間。瀏覽器

效果圖以下：前端工程師


  css佈局還有不少其餘特性，下一步準備研究清楚浮動，再研究position、和display屬性。佈局

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程