CSS經典佈局——聖盃佈局與雙飛翼佈局

by十行發表於2021-07-12
CSS

一、聖盃佈局和雙飛翼佈局的目的

  • 實現三欄佈局，中間一欄最先載入和渲染
  • 兩側內容固定，中間內容隨著寬度自適應
  • 一般用於PC網

二、聖盃佈局的實現

技術要點：

  1. 設定最小寬度min-width
  2. 使用float佈局，注意清除浮動
  3. 使用margin負值
  4. 對三欄整體區域設定左右內邊距，寬度為left和right的寬度，避免內容重疊
  5. 使用定位
CSS經典佈局——聖盃佈局與雙飛翼佈局 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8     <title>聖盃佈局</title>
 9 </head>
10 <style>
11     body {
12     //設定螢幕最小寬度
13         min-width: 500px;
14         text-align: center;
15     }
16 
17     header,
18     footer {
19         width: 100%;
20         background-color: grey;
21     }
22 
23     section {
24         /*清除浮動*/
25         overflow: hidden;
26         /*左右設定內邊距*/
27         padding-left: 150px;
28         padding-right: 200px;
29     }
30 
31     #center {
32         width: 100%;
33         background-color: red;
34     }
35 
36     #left {
37         /* 相對自身的定位 */
38         position: relative;
39         width: 150px;
40         /*向左平移一個父元素的寬度 */
41         margin-left: -100%;
42         /* 向左平移150px */
43         right: 150px;
44         background-color: pink;
45     }
46 
47     #right {
48         width: 200px;
49         /* 可以當做right右側元素向左平移200px，將right元素擠到上面一排顯示。注：這裡由於浮動，中間的元素都是連線在一起的，也就是說center與right是首尾相連的 */
50         margin-right: -200px;
51         background-color: yellow;
52     }
53 
54     .culomn {
55         float: left;
56     }
57 </style>
58 
59 <body>
60     <header>this is header</header>
61     <section>
62         <div id="center" class="culomn">this is center</div>
63         <div id="left" class="culomn">this is left</div>
64         <div id="right" class="culomn">this is right</div>
65     </section>
66     <footer>this is footer</footer>
67 </body>
68 </html>
View Code

 三、雙飛翼佈局的實現

技術要點：

  1. 設定最小寬度min-width
  2. 使用float佈局，注意清除浮動
  3. 使用margin負值（雙飛翼佈局不需要使用margin-right負值）
  4. 對center設定左右外邊距，避免與側邊欄內容重疊

程式碼如下：

CSS經典佈局——聖盃佈局與雙飛翼佈局 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雙飛翼佈局</title>
</head>
<style>
    body {
        min-width: 500px;
    }

    header,
    footer {
        text-align: center;
        width: 100%;
        background-color: grey;
    }

    #contain {
        width: 100%;
    }

    #center {
        /* 對center元素設定左右外邊距，分別是left和right元素的寬度，避免內容重疊 */
        margin-left: 150px;
        margin-right: 200px;
        background-color: red;
    }

    #left {
        width: 150px;
        /* left元素向左平移一個父元素的寬度 */
        margin-left: -100%;
        background-color: pink;

    }

    #right {
        width: 200px;
        /* right元素向左平移自身的寬度 */
        margin-left: -200px;
        background-color: yellow;
    }

    .culomn {
        float: left;
        text-align: center;
    }

    /* 清除浮動 */
    footer {
        clear: both;
    }
</style>

<body>
    <header>this is header</header>
    <section>
        <div id="contain" class="culomn">
            <div id="center">this is center</div>
        </div>
        <div id="left" class="culomn">this is left</div>
        <div id="right" class="culomn">this is right</div>
    </section>
    <footer>this is footer</footer>
</body>

</html>
View Code

聖盃佈局與雙飛翼佈局效果圖如下：

 

 四、聖盃佈局與雙飛翼佈局的區別

  1. 聖盃佈局使用了margin-right負值，相對來說比較難理解
  2. 聖盃佈局設定的是內邊距padding，避免內容重疊。而雙飛翼佈局是給center元素新增了一個父盒子，只需要設定center的外邊距即可避免與左右側邊欄重疊

五、總結

聖盃佈局和雙飛翼佈局的技術總結：

  1. 使用了float佈局
  2. 兩側使用margin負值，以便和中間內容橫向重疊
  3. 防止中間內容被兩側覆蓋，一個用padding，一個用margin

相關文章