CSS布局十八般武藝都在這里了

zelongman 7年前發布 | 12K 次閱讀 CSS 前端技術

CSS布局

布局是CSS中一個重要部分，本文總結了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的盒模型布局和比較新的flex布局實現），希望能給需要的小伙伴帶來一些幫助。

目錄

  1. 常用居中方法

    • 水平居中

    • 垂直居中

  2. 單列布局

  3. 二列&三列布局

    • float+margin

    • position+margin

    • 圣杯布局（float+負margin）

    • 雙飛翼布局（float+負margin）

    • flex布局

  4. 總結

1.常用居中方法

居中在布局中很常見，我們假設DOM文檔結構如下，子元素要在父元素中居中：

<div class="parent">
    <div class="child"></div>
</div>

水平居中

子元素為行內元素還是塊狀元素，寬度一定還是寬度未定，采取的布局方案不同。下面進行分析：

行內元素 ：對父元素設置 text-align:center;

定寬塊狀元素: 設置左右 margin 值為 auto ;

不定寬塊狀元素: 設置子元素為 display:inline ,然后在父元素上設置 text-align:center ;

通用方案: flex布局，對父元素設置 display:flex;justify-content:center;

垂直居中

垂直居中對于子元素是單行內聯文本、多行內聯文本以及塊狀元素采用的方案是不同的。

父元素一定，子元素為單行內聯文本 ：設置父元素的 height 等于行高 line-height

父元素一定，子元素為多行內聯文本：設置父元素的 display:table-cell 或 inline-block ，再設置 vertical-align:middle ;

塊狀元素:設置子元素 position:fixed（absolute） ，然后設置 margin:auto ;

通用方案: flex布局，給父元素設置 {display:flex; align-items:center;} 。

2.單列布局

特征：定寬、水平居中

常見的單列布局有兩種：

  • 一種是 header 、 content 、 footer 寬度都相同，其一般不會占滿瀏覽器的最寬寬度，但當瀏覽器寬度縮小低于其最大寬度時，寬度會自適應。

  • 一種是 header 、 footer 寬度為瀏覽器寬度，但 content 以及 header 和 footer 里的內容卻不會占滿瀏覽器寬度。

對于第一種，對 header 、 content 、 footer 統一設置 width 或 max-width ，并通過 margin:auto 實現居中。

DOM文檔:

<div class="layout">
  <div id="header">頭部</div>
  <div id="content">內容</div>
  <div id="footer">尾部</div>
</div>

CSS清單:

.layout{
  /*   width: 960px; *//*設置width當瀏覽器窗口寬度小于960px時，單列布局不會自適應。*/
    max-width: 960px;
    margin: 0 auto;
  }

對于第二種， header 、 footer 的內容寬度為100%，但 header 、 footer 的內容區以及 content 統一設置 max-width ，并通過 margin:auto 實現居中。

DOM文檔:

<div id="header">
  <div class="layout">頭部</div>
</div>
<div id="content" class="layout">內容</div>
<div id="footer">
  <div class="layout">尾部</div>
</div>

CSS清單:

.layout{
  /*   width: 960px; *//*設置width當瀏覽器窗口寬度小于960px時，單列布局不會自適應。*/
    max-width: 960px;
    margin: 0 auto;
  }

3. 二列&三列布局

二列布局的特征是側欄固定寬度，主欄自適應寬度。

三列布局的特征是兩側兩列固定寬度，中間列自適應寬度。

之所以將二列布局和三列布局寫在一起，是因為二列布局可以看做去掉一個側欄的三列布局，其布局的思想有異曲同工之妙。對于傳統的實現方法，主要討論上圖中前三種布局，經典的帶有側欄的二欄布局以及帶有左右側欄的三欄布局，對于flex布局，實現了上圖的五種布局。

a. float+margin

原理說明：設置兩個側欄分別向左向右浮動，中間列通過外邊距給兩個側欄騰出空間，中間列的寬度根據瀏覽器窗口自適應。

DOM文檔:

<div id="content">
    <div class="sub">sub</div>
    <div class="extra">extra</div>
    <div class="main">main</div>
</div>

布局步驟:

  1. 對兩邊側欄分別設置寬度，并對左側欄添加左浮動，對右側欄添加有浮動。

  2. 對主面板設置左右外邊距，margin-left的值為左側欄的寬度，margin-right的值為右側欄的寬度。

CSS清單:

.sub{
    width: 100px;
    float: left;
}
.extra{
    width: 200px;
    float: right;
}
.main{
    margin-left: 100px; 
    margin-right: 200px;
}

一些說明:

* 注意DOM文檔的書寫順序，先寫兩側欄，再寫主面板，更換后則側欄會被擠到下一列（圣杯布局和雙飛翼布局都會用到）。

* 這種布局方式比較簡單明了，但缺點是渲染時先渲染了側邊欄，而不是比較重要的主面板。

二列的實現方法

如果是左邊帶有側欄的二欄布局，則去掉右側欄，不要設置主面板的 margin-right 值，其他操作相同。反之亦然。

b. position+margin

原理說明：通過絕對定位將兩個側欄固定，同樣通過外邊距給兩個側欄騰出空間，中間列自適應。

DOM文檔:

<div class="sub">left</div>
<div class="main">main</div>
<div class="extra">right</div>

布局步驟:

  1. 對兩邊側欄分別設置寬度，設置定位方式為絕對定位。

  2. 設置兩側欄的top值都為0，設置左側欄的left值為0， 右側欄的right值為0。

  3. 對主面板設置左右外邊距，margin-left的值為左側欄的寬度，margin-right的值為右側欄的寬度。

CSS清單:

.sub, .extra {
    position: absolute;
    top: 0; 
    width: 200px;
}
.sub { 
    left: 0;
}
.extra { 
    right: 0; 
}
.main { 
    margin: 0 200px;
}

一些說明:

  • 與上一種方法相比，本種方法是通過定位來實現側欄的位置固定。

  • 如果中間欄含有最小寬度限制，或是含有寬度的內部元素，則瀏覽器窗口小到一定程度，主面板與側欄會發生重疊。

二列的實現方法

如果是左邊帶有側欄的二欄布局，則去掉右側欄，不要設置主面板的 margin-right 值，其他操作相同。反之亦然。

c. 圣杯布局(float + 負margin + padding + position)

原理說明：

主面板設置寬度為100%，主面板與兩個側欄都設置浮動，常見為左浮動，這時兩個側欄會被主面板擠下去。通過負邊距將浮動的側欄拉上來，左側欄的負邊距為100%，剛好是窗口的寬度，因此會從主面板下面的左邊跑到與主面板對齊的左邊，右側欄此時浮動在主面板下面的左邊，設置負邊距為負的自身寬度剛好浮動到主面板對齊的右邊。為了避免側欄遮擋主面板內容，在外層設置左右padding值為左右側欄的寬度，給側欄騰出空間，此時主面板的寬度減小。由于側欄的負margin都是相對主面板的，兩個側欄并不會像我們理想中的停靠在左右兩邊，而是跟著縮小的主面板一起向中間靠攏。此時使用相對布局，調整兩個側欄到相應的位置。

DOM文檔:

<div id="bd">         
    <div class="main"></div>        
    <div class="sub"></div>        
    <div class="extra"></div>  
</div>

布局步驟:

  1. 三者都設置向左浮動。

  2. 設置main寬度為100%，設置兩側欄的寬度。

  3. 設置 負邊距，sub設置負左邊距為100%，extra設置負左邊距為負的自身寬度。

  4. 設置main的padding值給左右兩個子面板留出空間。

  5. 設置兩個子面板為相對定位，sub的left值為負的sub寬度，extra的right值為負的extra寬度。

CSS清單:

.main {

    float: left;

    width: 100%;

 }

 .sub {

    float: left;

    width: 190px;

    margin-left: -100%;

    position: relative;

    left: -190px;

}

.extra {

    float: left;

    width: 230px;

    margin-left: -230px; 
    position: relative; 
    right: -230px;

 }


bd {



padding: 0 230px 0 190px;   



}</code></pre> 
  
一些說明
 
  
     
   
  •  
    DOM元素的書寫順序不得更改。
     
    •  
   
  •  
    當面板的 main 內容部分比兩邊的子面板寬度小的時候，布局就會亂掉。可以通過設置 main 的 min-width 屬性或使用雙飛翼布局避免問題。
     
    •  
  
 
  
二列的實現方法
 
  
如果是左邊帶有側欄的二欄布局，則去掉右側欄，不要設置主面板的 padding-right 值，其他操作相同。反之亦然。
 
  
d. 雙飛翼布局(float + 負margin + margin)
 
  
原理說明：
 
  
雙飛翼布局和圣杯布局的思想有些相似，都利用了浮動和負邊距，但雙飛翼布局在圣杯布局上做了改進，在 main 元素上加了一層div, 并設置 margin ,由于兩側欄的負邊距都是相對于main-wrap而言，main的margin值變化便不會影響兩個側欄，因此省掉了對兩側欄設置相對布局的步驟。
 
  
DOM文檔:
 
  
<div id="main-wrap" class="column">
      <div id="main">#main</div>
</div>
<div class="sub"></div>        
<div class="extra"></div>
 
  
布局步驟:
 
  
     
   
  1.  
    三者都設置向左浮動。
     
    2.  
   
  2.  
    設置main-wrap寬度為100%，設置兩個側欄的寬度。
     
    3.  
   
  3.  
    設置 負邊距，sub設置負左邊距為100%，extra設置負左邊距為負的自身寬度。
     
    4.  
   
  4.  
    設置main的margin值給左右兩個子面板留出空間。
     
    5.  
  
 
  
CSS清單:
 
  
.main {        
    float: left;       
    width: 100%;   
 }  
 .sub {       
    float: left;        
    width: 190px;        
    margin-left: -100%;   
}   
.extra {        
    float: left;        
    width: 230px;        
    margin-left: -230px; 
 }
.main-wrap {    
    margin: 0 230px 0 190px;
}
 
  
一些說明
 
  
     
   
  •  
    圣杯采用的是padding，而雙飛翼采用的margin，解決了圣杯布局main的最小寬度不能小于左側欄的缺點。
     
    •  
   
  •  
    雙飛翼布局不用設置相對布局，以及對應的left和right值。
     
    •  
   
  •  
    通過引入相對布局，可以實現三欄布局的各種組合，例如對右側欄設置 position: relative; left: 190px; ,可以實現sub+extra+main的布局。
     
    •  
  
 
  
二列的實現方法
 
  
如果是左邊帶有側欄的二欄布局，則去掉右側欄，不要設置 main-wrap 的 margin-right 值，其他操作相同。反之亦然。
 
  
e. flex布局
 
  
以下是五種布局的flex布局代碼：
 
  
DOM文檔：
 
  
<div class="layout">
    <aside class="layout__aside">側邊欄寬度固定</aside>
    <div class="layout__main">主內容欄寬度自適應</div>
</div>
<div class="layout">
    <div class="layout__main">主內容欄寬度自適應</div>
    <aside class="layout__aside">側邊欄寬度固定</aside>
</div>
<div class="layout">
    <aside class="layout__aside">左側邊欄寬度固定</aside>
    <div class="layout__main">主內容欄寬度自適應</div>
    <aside class="layout__aside">右側邊欄寬度固定</aside>
</div>
<div class="layout">
    <aside class="layout__aside">第1個側邊欄寬度固定</aside>
    <aside class="layout__aside">第2個側邊欄寬度固定</aside>
    <div class="layout__main">主內容欄寬度自適應</div>
</div>
<div class="layout">
    <div class="layout__main">主內容欄寬度自適應</div>
    <aside class="layout__aside">第1個側邊欄寬度固定</aside>
    <aside class="layout__aside">第2個側邊欄寬度固定</aside>
</div>
 
  
CSS清單
 
  
.layout {
    display: flex;
}
.layout__main {
    flex: 1;
}
.layout__aside {
    width: 200px;
}
 
  
與之前所講的幾種傳統布局方案相比，flex布局的代碼可謂異常簡潔，而且非常通用，利用簡單的三行CSS即實現了常見的五種布局。
 
  
總結
 
  
傳統的布局方法基于盒狀模型，依賴 display 屬性 + position 屬性 + float 屬性，邏輯相對復雜，對于實現一些特殊效果，例如垂直居中，尤其復雜繁瑣。而flex布局中的flex容器可以根據實際可用空間動態調整子元素的寬高比和順序，使元素能夠盡可能地利用可用空間，同時也能通過縮小來避免超出。flex布局提供了一套簡便、完整、響應式的布局方案。
 
  
flex布局將是CSS布局的趨勢，還未正式成為標準的gird布局也異常吸睛，于是知乎上很多剛入門的小伙伴
 
  
 
 
  
參考鏈接
 
  
CSS垂直居中和水平居中
 
  
圣杯布局小結
 
  
雙飛翼布局介紹-始于淘寶UED_慕課猿問
 
  
我熟知的三種三欄網頁寬度自適應布局方法 " 張鑫旭-鑫空間-鑫生活
 
  
常見的幾種布局總結
 
  
 
 
  
 
 
  
來自：https://segmentfault.com/a/1190000008789039
 
  
 
 本文由用戶 zelongman 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！