成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

布局

wangtdgoodluck / 2067人閱讀

摘要：雙飛翼布局是對(duì)圣杯布局的優(yōu)化，先實(shí)現(xiàn)中間最重要的身體部分，再實(shí)現(xiàn)翅膀，所以叫雙飛翼布局。參考資料跟這些特性相互疊加后會(huì)怎么樣經(jīng)典布局之雙飛翼布局

‘display’、’position’ 和 ‘float’ 的相互關(guān)系

圣杯布局和雙飛翼 什么是圣杯布局和雙飛翼布局？

圣杯布局和雙飛翼布局可實(shí)現(xiàn)兩邊寬度固定，中間寬度自適應(yīng)，外部高度為三者中的最高高度的三列布局，當(dāng)然，由擴(kuò)展性這樣的布局不僅僅只是三列，

圣杯布局

因?yàn)楝F(xiàn)有的技術(shù)全部都有缺點(diǎn)，要找到一種好的實(shí)現(xiàn)方法就像找到圣杯一樣難。

雙飛翼布局

是對(duì)圣杯布局的優(yōu)化，先實(shí)現(xiàn)中間最重要的身體部分，再實(shí)現(xiàn)翅膀，所以叫雙飛翼布局。

早期用table實(shí)現(xiàn)，現(xiàn)在不用了，因?yàn)閠able要等到頁面加載完之后才渲染。table有一些略根性，這個(gè)我并不是很清楚，總之table并不推薦。

布局實(shí)現(xiàn)思路

1.因?yàn)橹虚g的主體內(nèi)容最重要，所以先加載它，所以html中middle放在最前面
2.他們?nèi)齻€(gè)要對(duì)其，先將middle設(shè)為全寬，讓left和right浮動(dòng)上去,并且一個(gè)在左一個(gè)在右。
3.讓middle自適應(yīng)寬度
4.外部高度為三者最高的高度

實(shí)現(xiàn)圣杯布局

先給出html的結(jié)構(gòu),為了方便觀察，這里也給出了頭部和腳部:




    我是頭部




    

        我是中間
        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

    

    

        我是左
    

    

        我是右
    





    我是底部，版權(quán)所有
實(shí)現(xiàn)過程

首先給出相應(yīng)的寬度和背景值，便于觀察

header{
    height: 150px;
    background-color: #0099FF;
}
article{
    /*height值只是為了方便看效果*/
    height: 300px;
    background-color: #924652;
}
footer{
    height: 150px;
    background-color: #CCCC33;
}
article .middle{
    background-color: darksalmon;
}
article .left{
    background-color: #65cca1;
    width: 150px;
}
article .right{
    background-color: #f786ff;
    width: 200px;
}

先把中middle浮動(dòng)上去,給他一個(gè)全寬，原有基礎(chǔ)上添加

.middle{
    float:left;
    width:100%;
}

把left放到middle左邊，原有基礎(chǔ)上添加

.left{
    float:left;
    margin-left:-100%；
}

把right放到middle右邊，原有基礎(chǔ)上添加

.right{
    float:left;
    /*這里的150px為right的寬度*/
    margin-left:-150px； 
}

middle自適應(yīng)，原有基礎(chǔ)上添加

article{
    padding-left: 150px;
    padding-right: 100px;
}
article .left{
    position: relative;
    left: -150px;
}
article .right{
    position: relative;
    left: 100px;
}

外部高度為三者中最高，原有基礎(chǔ)上添加為(不想全部為最大的高度，middle，right，left誰最高設(shè)誰的樣式即可)

article .middle{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
article .left{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
article .right{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
article{
    overflow: hidden;
}
圣杯布局全部代碼： 
*{
    margin: 0;
    padding: 0;
}
header{
    height: 150px;
    background-color: #0099FF;
}
article{
    /*height: 300px;*/
    background-color: #924652;
    padding-left: 150px;
    padding-right: 100px;
    overflow: hidden;
}
footer{
    height: 150px;
    background-color: #CCCC33;
}
article .middle{
    background-color: darksalmon;
    float: left;
    width: 100%;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
article .left{
    background-color: #65cca1;
    float: left;
    width: 150px;
    margin-left: -100%;
    position: relative;
    left: -150px;
}
article .right{
    background-color: #f786ff;
    float: left;
    width: 200px;
    margin-left: -200px;
    position: relative;
    left: 100px;
}
實(shí)現(xiàn)雙飛翼布局 有了圣杯布局為什么還要有雙飛翼布局

圣杯布局是有一定局限性的，在middle居中時(shí)，限定了left和right必為position：relative才合適，如果它們不為relative，整個(gè)布局就費(fèi)了。

怎樣解決圣杯布局的局限性？

關(guān)鍵是給middle內(nèi)部添加一層，作為安全層。

修改html。為middle加個(gè)內(nèi)部層，原有基礎(chǔ)上添加


    

        我是中間
        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊

        
元素多多看對(duì)齊
實(shí)現(xiàn)過程

前面left和right浮動(dòng)上來的過程與圣杯一致，不同的是middle自適應(yīng)，將圣杯布局的middle自適應(yīng)步驟改為：

.inner{
    margin-left: 150px;
    margin-right: 150px;
}

外部高度為三者最高的步驟類似圣杯布局，將middle出的設(shè)置改為inner的即可

雙飛翼布局全部代碼 
*{
    margin: 0;
    padding: 0;
}
header{
    height: 150px;
    background-color: #0099FF;
}
article{
    /*height: 300px;*/
    background-color: #924652;
    overflow: hidden;
}
footer{
    height: 150px;
    background-color: #CCCC33;
}
article .middle{
    background-color: darksalmon;
    float: left;
    width: 100%;
}
article .left{
background-color: #65cca1;
    float: left;
    width: 150px;
    height: 16px;
    margin-left: -100%;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
article .right{
background-color: #f786ff;
    float: left;
    width: 200px;
    height: 16px;
    margin-left: -200px;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.inner{
    margin-left: 150px;
    margin-right: 150px;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
不僅僅是三列 怎樣實(shí)現(xiàn)兩列布局？

float:left便可輕松實(shí)現(xiàn)，其中l(wèi)eft作為主體部分

怎樣實(shí)現(xiàn)三列布局？

圣杯布局和雙飛翼布局便是三列布局

怎樣實(shí)現(xiàn)多列布局？

在三列布局的基礎(chǔ)上，將最后一列不斷擴(kuò)張成兩列布局或者三列布局即可實(shí)現(xiàn)

思考：

1.圣杯布局和雙飛翼布局一步步實(shí)現(xiàn)的思路
2.float的實(shí)質(zhì)
以float：left為例，假設(shè)a在b前面，將b浮動(dòng)到左邊，看起來像是把a(bǔ)擠到了它后面，其實(shí)它更像是在a中插入了文字，它是堆疊在了a上，給b設(shè)一定的透明度，給a加個(gè)顏色，會(huì)發(fā)現(xiàn)b的下面是a。
3.float使用時(shí)的一個(gè)注意事項(xiàng)
只有寬沒有高的float并不能達(dá)到占位的目的，它并不能擠壓到后面的元素
4.float最多能在垂直方向上浮動(dòng)多遠(yuǎn)
元素float之后，占據(jù)文檔流中能占的位置，能占的位置便是，最接近的前一行非浮動(dòng)元素的后面
5.使用margin-left超視口進(jìn)行折行控制時(shí)，向左的折動(dòng)距離越大，當(dāng)前行一點(diǎn)點(diǎn)向視口外部縮進(jìn)，當(dāng)縮進(jìn)為自己寬度并漸漸增大時(shí)，會(huì)一下子全部出現(xiàn)在上一行中并漸漸移動(dòng)。

參考資料

position跟display、margin collapse、overflow、float這些特性相互疊加后會(huì)怎么樣？
CSS 經(jīng)典布局之雙飛翼布局

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111676.html

相關(guān)文章

  • 實(shí)現(xiàn)三欄布局的幾種方法

    摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個(gè)典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個(gè)典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...

    golden_hamster 評(píng)論0 收藏0

  • 實(shí)現(xiàn)三欄布局的幾種方法

    摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個(gè)典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個(gè)典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...

    IamDLY 評(píng)論0 收藏0

  • 實(shí)現(xiàn)三欄布局的幾種方法

    摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個(gè)典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個(gè)典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...

    Hegel_Gu 評(píng)論0 收藏0

  • 圣杯布局和雙飛翼布局

    摘要：解決的問題圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染。 解決的問題 圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染。 圣杯布局 圣杯布局dom結(jié)構(gòu)： 圣杯布局 ...

    yankeys 評(píng)論0 收藏0

  • CSS三欄布局——多種方法詳解，比較兼容性

    摘要：題目假設(shè)高度已知，請(qǐng)寫出三欄布局，其中左欄右欄寬度各為，中間自適應(yīng)三欄布局的種方案這是一道經(jīng)典的面試題，下面記錄了布局的種方法。 題目:假設(shè)高度已知，請(qǐng)寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應(yīng). 三欄布局的5種方案 這是一道經(jīng)典的面試題，下面記錄了css布局的5種方法。 三欄布局 * { margin: 0; ...

    馬忠志 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<