圣杯布局和雙飛翼布局的理解與思考

圣杯布局和雙飛翼布局是前端工程師需要日常掌握的重要布局方式。兩者的功能相同,都是為了實(shí)現(xiàn)一個(gè)兩側(cè)寬度固定,中間寬度自適應(yīng)的三欄布局

圣杯布局與雙飛翼布局

圣杯布局來(lái)源于文章In Search of the Holy Grail,而雙飛翼布局來(lái)源于淘寶UED。雖然兩者的實(shí)現(xiàn)方法略有差異,不過(guò)都遵循了以下要點(diǎn):

  • 兩側(cè)寬度固定,中間寬度自適應(yīng)
  • 中間部分在DOM結(jié)構(gòu)上優(yōu)先,以便先行渲染
  • 允許三列中的任意一列成為最高列
  • 只需要使用一個(gè)額外的<div>標(biāo)簽

下面我將依次介紹圣杯布局和雙飛翼布局的實(shí)現(xiàn)方法,并在最后根據(jù)個(gè)人思考對(duì)原有方法做出一些修改,給出其它一些可行的方案。

圣杯布局

1. DOM結(jié)構(gòu)

<div id="header"></div>
<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
<div id="footer"></div>

首先定義出整個(gè)布局的DOM結(jié)構(gòu),主體部分是由container包裹的center,left,right三列,其中center定義在最前面。

2. CSS代碼

假設(shè)左側(cè)的固定寬度為200px,右側(cè)的固定寬度為150px,則首先在container上設(shè)置:

#container {
  padding-left: 200px; 
  padding-right: 150px;
}

為左右兩列預(yù)留出相應(yīng)的空間,得到如下示意圖:

創(chuàng)建布局框架

隨后分別為三列設(shè)置寬度與浮動(dòng),同時(shí)對(duì)footer設(shè)置清除浮動(dòng):

#container .column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px; 
}

#right {
  width: 150px; 
}

#footer {
  clear: both;
}

得到如下效果:

設(shè)置寬度和清除浮動(dòng)

根據(jù)浮動(dòng)的特性,由于center的寬度為100%,即占據(jù)了第一行的所有空間,所以leftright被“擠”到了第二行。

接下來(lái)的工作是將left放置到之前預(yù)留出的位置上,這里使用負(fù)外邊距(nagetive margin)

#left {
  width: 200px; 
  margin-left: -100%;
}

得到:

將left移動(dòng)到預(yù)留位置-1

隨后還需要使用定位(position)方法:

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}

這里使用position: relativeright: 200pxleft的位置在原有位置基礎(chǔ)上左移200px,以完成left的放置:

將left移動(dòng)到預(yù)留位置-2

接下來(lái)放置right,只需添加一條聲明即可:

#right {
  width: 150px; 
  margin-right: -150px; 
}

得到最終的效果圖:

將right移動(dòng)到預(yù)留位置

至此,布局效果完成。不過(guò)還需要考慮最后一步,那就是頁(yè)面的最小寬度:要想保證該布局效果正常顯示,由于兩側(cè)都具有固定的寬度,所以需要給定頁(yè)面一個(gè)最小的寬度,但這并不只是簡(jiǎn)單的200+150=350px。回想之前left使用了position: relative,所以就意味著在center開(kāi)始的區(qū)域,還存在著一個(gè)left的寬度。所以頁(yè)面的最小寬度應(yīng)該設(shè)置為200+150+200=550px:

body {
  min-width: 550px;
}

綜上所述,圣杯布局的CSS代碼為:

body {
  min-width: 550px;
}

#container {
  padding-left: 200px; 
  padding-right: 150px;
}

#container .column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}

#right {
  width: 150px; 
  margin-right: -150px; 
}

#footer {
  clear: both;
}

關(guān)于圣杯布局的示例,可參考:圣杯布局

最后提醒一下很多朋友可能會(huì)忽略的小細(xì)節(jié):在#center中,包含了一條聲明width: 100%,這是中間欄能夠做到自適應(yīng)的關(guān)鍵。可能會(huì)有朋友認(rèn)為不需要設(shè)置這條聲明,因?yàn)橛X(jué)得center在不設(shè)置寬度的情況下會(huì)默認(rèn)將寬度設(shè)置為父元素(container)的100%寬度。但需要注意到,center是浮動(dòng)元素,由于浮動(dòng)具有包裹性,在不顯式設(shè)置寬度的情況下會(huì)自動(dòng)“收縮”到內(nèi)容的尺寸大小。如果去掉width: 100%,則當(dāng)中間欄不包含或者包含較少內(nèi)容時(shí),整個(gè)布局會(huì)“崩掉”,而達(dá)不到這樣的效果:

中間欄僅包含較少內(nèi)容

雙飛翼布局

1. DOM結(jié)構(gòu)

<body>
  <div id="header"></div>
  <div id="container" class="column">
    <div id="center"></div>
  </div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
  <div id="footer"></div>
<body>

雙飛翼布局的DOM結(jié)構(gòu)與圣杯布局的區(qū)別是用container僅包裹住center,另外將.column類從center移至container上。

2. CSS代碼

按照與圣杯布局相同的思路,首先設(shè)置各列的寬度與浮動(dòng),并且為左右兩列預(yù)留出空間,以及為footer設(shè)置浮動(dòng)清除:

#container {
  width: 100%;
}

.column {
  float: left;
}

#center {
  margin-left: 200px;
  margin-right: 150px;
}

#left {
  width: 200px; 
}

#right {
  width: 150px; 
}

#footer {
  clear: both;
}

得到如下效果示意圖:

雙飛翼布局初始設(shè)置

以上代碼將container,left,right設(shè)置為float: left,而在container內(nèi)部,center由于沒(méi)有設(shè)置浮動(dòng),所以其寬度默認(rèn)為container的100%寬度,通過(guò)對(duì)其設(shè)置margin-leftmargin-right為左右兩列預(yù)留出了空間。

left放置到預(yù)留位置:

#left {
  width: 200px; 
  margin-left: -100%;
}

得到:

放置left到預(yù)留位置

right放置到預(yù)留位置:

#right {
  width: 150px; 
  margin-left: -150px;
}

得到最終效果:

雙飛翼布局最終效果

最后計(jì)算最小頁(yè)面寬度:由于雙飛翼布局沒(méi)有用到position:relative進(jìn)行定位,所以最小頁(yè)面寬度應(yīng)該為200+150=350px。但是當(dāng)頁(yè)面寬度縮小到350px附近時(shí),會(huì)擠占中間欄的寬度,使得其內(nèi)容被右側(cè)欄覆蓋,如下所示:

中間欄內(nèi)容被覆蓋

因此在設(shè)置最小頁(yè)面寬度時(shí),應(yīng)該適當(dāng)增加一些寬度以供中間欄使用(假設(shè)為150px),則有:

body {
  min-width: 500px;
}

至此雙飛翼布局大功告成!其布局整體代碼為:

body {
  min-width: 500px;
}

#container {
  width: 100%;
}

.column {
  float: left;
}
        
#center {
  margin-left: 200px;
  margin-right: 150px;
}
        
#left {
  width: 200px; 
  margin-left: -100%;
}
        
#right {
  width: 150px; 
  margin-left: -150px;
}
        
#footer {
  clear: both;
}

關(guān)于雙飛翼布局的示例,可參考:雙飛翼布局

總結(jié)與思考

通過(guò)對(duì)圣杯布局和雙飛翼布局的介紹可以看出,圣杯布局在DOM結(jié)構(gòu)上顯得更加直觀和自然,且在日常開(kāi)發(fā)過(guò)程中,更容易形成這樣的DOM結(jié)構(gòu)(通常<aside><article>/<section>一起被嵌套在<main>中);而雙飛翼布局在實(shí)現(xiàn)上由于不需要使用定位,所以更加簡(jiǎn)潔,且允許的頁(yè)面最小寬度通常比圣杯布局更小。

其實(shí)通過(guò)思考不難發(fā)現(xiàn),兩者在代碼實(shí)現(xiàn)上都額外引入了一個(gè)<div>標(biāo)簽,其目的都是為了既能保證中間欄產(chǎn)生浮動(dòng)(浮動(dòng)后還必須顯式設(shè)置寬度),又能限制自身寬度為兩側(cè)欄留出空間。

從這個(gè)角度出發(fā),如果去掉額外添加的<div>標(biāo)簽,能否完成相同的布局呢?答案是肯定的,不過(guò)這需要在兼容性上做出犧牲

DOM結(jié)構(gòu)

<div id="header"></div>
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>

去掉額外的<div>標(biāo)簽后,得到的DOM結(jié)構(gòu)如上所示,基于雙飛翼布局的實(shí)現(xiàn)思路,只需要在center上做出修改:

1. 使用calc()

.column {
  float: left;
}
    
#center {
  margin-left: 200px;
  margin-right: 150px;
  width: calc(100% - 350px);
}

通過(guò)calc()可以十分方便地計(jì)算出center應(yīng)該占據(jù)的自適應(yīng)寬度,目前calc()支持到IE9

2. 使用border-box

.column {
  float: left;
}
    
#center {
  padding-left: 200px;
  padding-right: 150px;
  box-sizing: border-box;
  width: 100%;
}

使用border-box可以將center的整個(gè)盒模型寬度設(shè)置為父元素的100%寬度,此時(shí)再利用padding-leftpadding-right可以自動(dòng)得到中間欄的自適應(yīng)寬度。不過(guò)需要注意的是,由于padding是盒子的一部分,所以padding部分會(huì)具有中間欄的背景色,當(dāng)中間欄高于側(cè)欄時(shí),會(huì)出現(xiàn)這樣的情況:

padding背景色影響左側(cè)空間

目前box-sizing支持到IE8

3. 使用flex

這里使用flex還是需要與圣杯布局相同的DOM結(jié)構(gòu),不過(guò)在實(shí)現(xiàn)上將更加簡(jiǎn)單:

<!-- DOM結(jié)構(gòu) -->
<div id="container">
  <div id="center"></div>
  <div id="left"></div>
  <div id="right"></div>
</div>

CSS代碼如下:

#container {
    display: flex;
}

#center {
    flex: 1;
}

#left {
    flex: 0 0 200px;
    order: -1;
}

#right {
    flex: 0 0 150px;
}

結(jié)語(yǔ)

以上就是本人在學(xué)習(xí)圣杯布局和雙飛翼布局過(guò)程中的一些總結(jié)和認(rèn)識(shí),作為初學(xué)前端的小白難免會(huì)有理解不到位的地方。文章如有錯(cuò)誤,歡迎大家多多指教~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容