聖盃佈局和雙飛翼佈局的理解和區別

時間 2019-11-09

標籤佈局雙飛理解區別简体版

原文原文鏈接

做用：

聖盃佈局和雙飛翼佈局解決的問題是相同的，就是兩邊頂寬，中間自適應的三欄佈局，中間欄要在放在文檔流前面以優先渲染。html

區別：

聖盃佈局：爲了讓中間div內容不被遮擋，將中間div設置了左右padding-left和padding-right後，將左右兩個div用相對佈局position: relative並分別配合right和left屬性，以便左右兩欄div移動後不遮擋中間div。瀏覽器

雙飛翼佈局：爲了讓中間div內容不被遮擋，直接在中間div內部建立子div用於放置內容，在該div裏用margin-left和margin-right爲左右兩欄div留出位置。dom

聖盃佈局：

優勢：不須要添加dom節點ide

缺點：聖盃佈局的缺點：正常狀況下是沒有問題的，可是特殊狀況下就會暴露此方案的弊端，若是將瀏覽器無線放大時，「聖盃」將會「破碎」掉。如圖：當middle部分的寬小於left部分時就會發生布局混亂。（middle<left即會變形）佈局

當middle的寬度爲大於left寬度時：spa

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>聖盃佈局</title>
 6         <style>
 7             
 8             #bd{
 9                 padding: 0 200px 0 180px;
10                 height: 100px;
11             }
12             #middle{
13                 float: left;
14                 width: 100%;
15                 height: 500px;
16                 background:blue;
17                 
18             }
19             #left{
20                 float:left;
21                 width:180px;
22                 height:500px;
23                 margin-left:-100%;
24                 background: #0c9;
25                 position: relative;
26                 left: -180px;
27             }
28             #right{
29                 float: left;
30                 width: 200px;
31                 height: 500px;
32                 margin-left: -200px;
33                 background: #0c9;
34                 position: relative;
35                 right: -200px;
36             }
37             
38         </style>
39     </head>
40     <body>
41     
42         <div id="bd">
43             <div id="middle">middle</div>
44             <div id="left">left</div>
45             <div id="right">right</div>
46             
47             
48         </div>
49         
50     </body>
51 </html>

其中：code

左右欄經過添加負的margin放到正確的位置了，此段代碼是爲了擺正中間欄的位置

#bd{
                padding: 0 200px 0 180px;
                height: 100px;
            }


中間欄的位置擺正以後，左欄的位置也相應右移，經過相對定位的left恢復到正確位置

#left{
                
                position: relative;
                left: -180px;
            }

中間欄的位置擺正以後，右欄的位置也相應左移，經過相對定位的right恢復到正確位置

#right{
                
                position: relative;
                right: -200px;
            }

`雙飛翼佈局：`

優勢：不會像聖盃佈局那樣變形htm

缺點是：多加了一層dom節點blog

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>雙飛翼佈局</title>
 6         <style>
 7 
 8 #center{
 9     float:left;
10     width:100%;/*左欄上去到第一行*/     
11     height:100px;
12     background:blue;
13 }
14 #left{
15     float:left;
16     width:180px;
17     height:100px;
18     margin-left:-100%;
19     background:#0c9;
20 }
21 #right{
22     float:left;
23     width:200px;
24     height:100px;
25     margin-left:-200px;
26      background:#0c9;
27 }
28 
29 /*給內部div添加margin，把內容放到中間欄，其實整個背景仍是100%*/ 
30 #inside{
31     margin:0 200px 0 180px;
32     height:100px;
33 }
34 40 </style>
41     </head>
42     <body>
43         <div id="center">
44             <div id="inside">middle</div>
45         </div>
46         <div id="left">left</div>
47         <div id="right">right</div>
48     </body>
49 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。