CSS中常見的布局是什么

這篇文章給大家分享的是有關CSS中常見的布局是什么的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

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

• 單列布局

• 兩列自適應布局

• 圣飛布局和雙飛翼布局

• 偽等高布局

• 粘連布局

一、單列布局

1、常見的單列布局：

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

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

2、如何實現

對于第一種，先通過對header,content,footer統一設置width：1000px;或者max-width：1000px(這兩者的區別是當屏幕小于1000px時，前者會出現滾動條，后者則不會，顯示出實際寬度);然后設置margin:auto實現居中即可得到。

<p class="header"></p>
<p class="content"></p>
<p class="footer"></p>

.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的內容寬度不設置，塊級元素充滿整個屏幕，但header、content和footer的內容區設置同一個width，并通過margin:auto實現居中。

<p class="header">
    <p class="nav"></p>
</p>
<p class="content"></p>
<p class="footer"></p>

.header{
    margin:0 auto;
    max-width: 960px;
    height:100px;
    background-color: blue;
}
.nav{
    margin: 0 auto;
    max-width: 800px;
    background-color: darkgray;
    height: 50px;
}
.content{
    margin: 0 auto;
    max-width: 800px;
    height: 400px;
    background-color: aquamarine;
}
.footer{
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: aqua;
}

二、兩列自適應布局

兩列自適應布局是指一列由內容撐開，另一列撐滿剩余寬度的布局方式

1.float+overflow:hidden

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

<p class="parent" style="background-color: lightgrey;">
    <p class="left" style="background-color: lightblue;">
        <p>left</p>
    </p>
    <p class="right"  style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </p>        
</p>

.parent {
  overflow: hidden;
  zoom: 1;
}
.left {
  float: left;
  margin-right: 20px;
}
.right {
  overflow: hidden;
  zoom: 1;
}

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

2.Flex布局

Flex布局，也叫彈性盒子布局，區區簡單幾行代碼就可以實現各種頁面的的布局。

//html部分同上
.parent {
  display:flex;
}  
.right {
  margin-left:20px; 
  flex:1;
}

3.grid布局

Grid布局，是一個基于網格的二維布局系統，目的是用來優化用戶界面設計。

//html部分同上
.parent {
  display:grid;
  grid-template-columns:auto 1fr;
  grid-gap:20px
}

三、三欄布局

特征：中間列自適應寬度，旁邊兩側固定寬度，實現三欄布局有多種方式（可以猛戳實現三欄布局的幾種方法),本文著重介紹圣杯布局和雙飛翼布局。

1.圣杯布局

① 特點

比較特殊的三欄布局，同樣也是兩邊固定寬度，中間自適應，唯一區別是dom結構必須是先寫中間列部分，這樣實現中間列可以優先加載。

  .container {
    padding-left: 220px;//為左右欄騰出空間
    padding-right: 220px;
  }
  .left {
    float: left;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -100%;
    position: relative;
    left: -220px;
  }
  .center {
    float: left;
    width: 100%;
    height: 500px;
    background: yellow;
  }
  .right {
    float: left;
    width: 200px;
    height: 400px;
    background: blue;
    margin-left: -200px;
    position: relative;
    right: -220px;
  }

  <article class="container">
    <p class="center">
      <p>圣杯布局</p>
    </p>
    <p class="left"></p>
    <p class="right"></p>
  </article>

② 實現步驟

• 三個部分都設定為左浮動，否則左右兩邊內容上不去，就不可能與中間列同一行。然后設置center的寬度為100%(實現中間列內容自適應)，此時，left和right部分會跳到下一行

• 通過設置margin-left為負值讓left和right部分回到與center部分同一行

• 通過設置父容器的padding-left和padding-right，讓左右兩邊留出間隙。

• 通過設置相對定位，讓left和right部分移動到兩邊。

③ 缺點

• center部分的最小寬度不能小于left部分的寬度，否則會left部分掉到下一行

• 如果其中一列內容高度拉長(如下圖)，其他兩列的背景并不會自動填充。(借助偽等高布局可解決)

④ 偽等高布局

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

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

      .center,
      .left,
      .right {
        padding-bottom: 10000px;
        margin-bottom: -10000px;
      }
      .container {
        padding-left: 220px;
        padding-right: 220px;
        overflow: hidden;//把溢出背景切掉
      }

2.雙飛翼布局

① 特點

同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。而且任何一欄都可以是最高欄，不會出問題。

    .container {
        min-width: 600px;//確保中間內容可以顯示出來，兩倍left寬+right寬
    }
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: red;
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: yellow;
    }
    .center .inner {
        margin: 0 200px; //新增部分
    }
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: blue;
        margin-left: -200px;
    }

    <article class="container">
        <p class="center">
            <p class="inner">雙飛翼布局</p>
        </p>
        <p class="left"></p>
        <p class="right"></p>
    </article>

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

• 三個部分都設定為左浮動，然后設置center的寬度為100%，此時，left和right部分會跳到下一行；

• 通過設置margin-left為負值讓left和right部分回到與center部分同一行；

• center部分增加一個內層p，并設margin: 0 200px；

③ 缺點

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

3.兩種布局實現方式對比:

• 兩種布局方式都是把主列放在文檔流最前面，使主列優先加載。

• 兩種布局方式在實現上也有相同之處，都是讓三列浮動，然后通過負外邊距形成三列布局。

• 兩種布局方式的不同之處在于如何處理中間主列的位置：
  圣杯布局是利用父容器的左、右內邊距+兩個從列相對定位；
  雙飛翼布局是把主列嵌套在一個新的父級塊中利用主列的左、右外邊距進行布局調整

四、粘連布局

1.特點

• 有一塊內容<main>，當<main>的高康足夠長的時候，緊跟在<main>后面的元素<footer>會跟在<main>元素的后面。

• 當<main>元素比較短的時候(比如小于屏幕的高度),我們期望這個<footer>元素能夠“粘連”在屏幕的底部

當main足夠長時

當main比較短時

具體代碼如下：

    <p id="wrap">
      <p class="main">
        main <br />
        main <br />
        main <br />
      </p>
    </p>
    <p id="footer">footer</p>

   * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;//高度一層層繼承下來
      }
      #wrap {
        min-height: 100%;
        background: pink;
        text-align: center;
        overflow: hidden;
      }
      #wrap .main {
        padding-bottom: 50px;
      }
      #footer {
        height: 50px;
        line-height: 50px;
        background: deeppink;
        text-align: center;
        margin-top: -50px;
      }

2.實現步驟

(1)footer必須是一個獨立的結構，與wrap沒有任何嵌套關系

(2)wrap區域的高度通過設置min-height，變為視口高度

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

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

感謝各位的閱讀！關于CSS中常見的布局是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！