主頁(yè) > 知識(shí)庫(kù) > 面試必問(wèn):圣杯布局和雙飛翼布局的區(qū)別

面試必問(wèn):圣杯布局和雙飛翼布局的區(qū)別

熱門(mén)標(biāo)簽:鶴壁手機(jī)自動(dòng)外呼系統(tǒng)怎么安裝 濟(jì)南辦理400電話 農(nóng)村住宅地圖標(biāo)注 跟電銷(xiāo)機(jī)器人做同事 中紳電銷(xiāo)智能機(jī)器人 ai電銷(xiāo)機(jī)器人連接網(wǎng)關(guān) 鄭州電銷(xiāo)外呼系統(tǒng)違法嗎 漳州人工外呼系統(tǒng)排名 威海營(yíng)銷(xiāo)外呼系統(tǒng)招商

前言

今天給大家分享一個(gè)圣杯布局和雙飛翼布局及他們之間的區(qū)別,這兩個(gè)三行布局一直是一些大廠前端面試的高頻考點(diǎn),帶你走進(jìn)大廠面試題,活不多說(shuō),沖沖沖~

布局效果

這兩個(gè)種三行布局效果是一樣的,實(shí)現(xiàn)的效果如上圖示所示,其特點(diǎn)為:

  • header和footer的高度為整個(gè)瀏覽器的寬度
  • 中間是個(gè)三行布局,left和right的寬度是固定的。
  • 而middle的內(nèi)容的寬度是自適應(yīng)占滿中間位置的,高度為三欄中的最大高度其實(shí)圣杯布局和雙飛翼布局在前的處理是一樣的,只不過(guò)是在中間處理的時(shí)候有些小差異而已啦。

前期處理

  • 為了避免出現(xiàn)問(wèn)題我們先給body設(shè)置一個(gè)min-width:600px;
  • 再將header和footer的寬度設(shè)為100%(整個(gè)瀏覽器的頁(yè)面),并添加背景色便于區(qū)分。
  • 在content中我們給left,right,midlle都添加float:left效果,設(shè)置left,right的寬高。
  • middle的寬度設(shè)置為100%,高度為與left,right的高度相同,同樣為了便于看效果我們這里也給它們一個(gè)背景色。
  • 這里有個(gè)需要注意的地方,我們還應(yīng)該給content設(shè)置一個(gè)高度,content中的div我們添加了float:left屬性,因此他們都脫離了文本流,導(dǎo)致出現(xiàn)了高度塌陷。
     

(ps:我這里是在content中添加了一個(gè)overflow: hidden,形成一個(gè)BFC區(qū)域來(lái)解決這個(gè)問(wèn)題的,感興趣的小伙伴可以自行了解,當(dāng)然你不這樣做設(shè)置content的高度就行啦)

*{
    margin: 0;
    padding: 0;
}
body{
    min-width: 600px;
}
#header,#footer{
    height: 50px;
    width: 100%;
    background: grey;
}
#middle,#left,#right{
    float: left;
}
#content{
    overflow: hidden;
}
#left,#right{
    width: 200px;
    height: 200px;
    background: pink;
}
#middle{
    width: 100%;
    height: 200px;
    background: yellowgreen; 
}

我們發(fā)現(xiàn)現(xiàn)在的頁(yè)面是這樣子的,那這怎么回事呢?

答案很簡(jiǎn)單,left,right,middle本來(lái)應(yīng)該是在一條直線上的,但是content的寬度不夠,就把left,right兩個(gè)盒子擠下來(lái)啦。

那現(xiàn)在我們分別來(lái)看看這兩種布局接下來(lái)解決這個(gè)問(wèn)的方法吧:

圣杯布局

我們先給content設(shè)置一個(gè)padding:0 200px,將左右兩邊各騰出200px寬度。
接下來(lái)我們只需要將left,right,兩個(gè)盒子放在兩個(gè)區(qū)域就行啦。
最后分別給left,left設(shè)置margin屬性調(diào)整位置。

#content{
    overflow: hidden;
    padding: 0 200px;
}
#left{
    margin-left:-100% ;

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

我們?cè)賮?lái)看一下效果

當(dāng)當(dāng)當(dāng),見(jiàn)證奇跡的時(shí)候到啦~

雙飛翼布局

那我們看看雙飛翼布局是怎么解決這個(gè)問(wèn)題的呢。來(lái)往下看

雙飛翼布局是在middle下添加了一個(gè)middle-inner盒子,將middle的內(nèi)容放在這個(gè)盒子里面(這有什么用呢?不著急咱先往下看)。
我們和圣杯布局中一樣也給float,left設(shè)置margin值調(diào)整位置。
但是此布局就不需要給left,right設(shè)置定位啦。

#left{
    float: left;
    margin-left: -100%;
}
#right{
    float: left;
    margin-left: -200px;
}
.middle-inner{
    padding: 0 200px;
}

這時(shí)我們發(fā)現(xiàn)middle中的內(nèi)容不見(jiàn)了,此時(shí)我們之前在midlle里面添加的midlle-inner盒子就派上用場(chǎng)啦,此時(shí)只需要給這個(gè)盒子設(shè)置一個(gè)margin:0 200px,那么我們的內(nèi)容是不是來(lái)到中間展示了呢。

.middle-inner{
    margin: 0 200px;
}

看效果

和我們預(yù)期的一樣,大廠面試題不過(guò)如此嘛,收工收工?。。?!

總結(jié)一下

最后我們來(lái)總結(jié)一下,雙飛翼布局其實(shí)和圣杯布局的精髓是一樣的,都是通過(guò)設(shè)置負(fù)margin來(lái)實(shí)現(xiàn)元素的排布。

  • 不同的就是html結(jié)構(gòu),雙飛翼是在middle元素內(nèi)部又設(shè)置了一個(gè)milddle-inner并設(shè)置它的左右margin,而非圣杯布局的padding,來(lái)排除兩邊元素的覆蓋。
  • 雙飛翼布局可以多了一個(gè)html結(jié)構(gòu),但是可以不用設(shè)置left,right元素的定位。

下面給一下完整代碼:

圣杯布局

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrap">
        <div id="header">header</div>
        <div id="content">
            <div id="middle">
                middle
            </div>
            <div id="left">left</div>         
            <div id="right">right</div>
        </div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
body{
    min-width: 600px;
}
#header,#footer{
    height: 50px;
    width: 100%;
    background: grey;
}
#middle,#left,#right{
    float: left;
}
#content{
    overflow: hidden;
    padding: 0 200px;
}
#left,#right{
    width: 200px;
    height: 200px;
    background: pink;
}
#middle{
    width: 100%;
    height: 200px;
    background: yellowgreen; 
}
 #left{
    margin-left:-100% ;
    position: relative;
    left:-200px;
} 
#right{
    margin-left: -200px;
    position: relative;
    left:200px; 
}


雙飛翼布局

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrap">
        <div id="header">header</div>
        <div id="content">
            <div id="middle">
                <div class="middle-inner">
                    middle
                </div>
            </div>
            <div id="left">left</div>         
            <div id="right">right</div>
        </div>
        <div id="footer">footer</div>
    </div>
</body>
</html>
*{
    margin: 0;
    padding: 0;
}
.wrap{
    min-width: 600px;
}
#header,#footer{
    height: 50px;
    width: 100%;
    background:grey;
}
#left,#right{
    width: 200px;
    height: 200px;
    background: green;
}

#middle{
    background: pink;
    width: 100%;
    float: left;
    height:200px;
}
#content{
    overflow: hidden;
}
#left{
    float: left;
    margin-left: -100%;
}
#right{
    float: left;
    margin-left: -200px;
}
.middle-inner{
    margin: 0 200px;
}

到此這篇關(guān)于面試必問(wèn):圣杯布局和雙飛翼布局的區(qū)別的文章就介紹到這了,更多相關(guān)圣杯布局和雙飛翼布局區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

標(biāo)簽:蘇州 紅河 咸陽(yáng) 萍鄉(xiāng) 甘南 文山 惠州 營(yíng)口

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《面試必問(wèn):圣杯布局和雙飛翼布局的區(qū)別》,本文關(guān)鍵詞  面試,必問(wèn),圣杯,布局,和,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《面試必問(wèn):圣杯布局和雙飛翼布局的區(qū)別》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于面試必問(wèn):圣杯布局和雙飛翼布局的區(qū)別的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章