CSS中常見的佈局有哪些？ 5種常見的佈局介紹

本篇文章帶給大家的內容是CSS中常見的版面有哪些？ 5種常見的佈局介紹。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

本文將介紹以下5種常見的佈局：

• #單列佈局

• 兩列自適應佈局

• 聖飛佈局和雙飛翼佈局

• #偽等高佈局

##黏連佈局

一、單列佈局

#1、常見的單列佈局：

header,content和footer等寬的單列佈局

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

#2、如何實作

對於第一種，先透過對header,content,footer統一設定width：1000px;或max-width：1000px(這兩者的差異是當螢幕小於1000px時，前者會出現捲軸，後者則不會，顯示實際寬度);然後設定margin:auto實現居中即可得到。

<p></p>
<p></p>
<p></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>
    </p><p></p>

<p></p>
<p></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>
    </p><p>
        </p><p>left</p>
    
    <p>
        </p><p>right</p>
        <p>right</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>
    <p>
      </p>
<p>圣杯布局</p>
    
    <p></p>
    <p></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>
        <p>
            </p>
<p>双飞翼布局</p>
        
        <p></p>
        <p></p>
    </article>

② 实现步骤(前两步与圣杯布局一样)

• 三个部分都设定为左浮动，然后设置center的宽度为100%，此时，left和right部分会跳到下一行；

• 通过设置margin-left为负值让left和right部分回到与center部分同一行；

• center部分增加一个内层p，并设margin: 0 200px；

③ 缺点

多加一层 dom 树节点，增加渲染树生成的计算量。

3.两种布局实现方式对比:

• 两种布局方式都是把主列放在文档流最前面，使主列优先加载。

• 两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。

• 两种布局方式的不同之处在于如何处理中间主列的位置：
  圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
  双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

四、粘连布局

1.特点

• 有一块内容<main></main>，当<main></main>的高康足够长的时候，紧跟在<main></main>后面的元素<footer></footer>会跟在<main></main>元素的后面。

• 当<main></main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer></footer>元素能够“粘连”在屏幕的底部

当main足够长时

当main比较短时

具体代码如下：

    <p>
      </p><p>
        main <br>
        main <br>
        main <br>
      </p>
    
    <p>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中常見的佈局有哪些？ 5種常見的佈局介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！