国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

立即前往

首頁/文章專欄/布局

布局

wangtdgoodluck 發布于2019-08-29 11:29 / 2057人閱讀

摘要：雙飛翼布局是對圣杯布局的優化，先實現中間最重要的身體部分，再實現翅膀，所以叫雙飛翼布局。參考資料跟這些特性相互疊加后會怎么樣經典布局之雙飛翼布局

‘display’、’position’ 和 ‘float’ 的相互關系

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

圣杯布局和雙飛翼布局可實現兩邊寬度固定，中間寬度自適應，外部高度為三者中的最高高度的三列布局，當然，由擴展性這樣的布局不僅僅只是三列，

圣杯布局

因為現有的技術全部都有缺點，要找到一種好的實現方法就像找到圣杯一樣難。

雙飛翼布局

是對圣杯布局的優化，先實現中間最重要的身體部分，再實現翅膀，所以叫雙飛翼布局。

早期用table實現，現在不用了，因為table要等到頁面加載完之后才渲染。table有一些略根性，這個我并不是很清楚，總之table并不推薦。

布局實現思路

1.因為中間的主體內容最重要，所以先加載它，所以html中middle放在最前面
2.他們三個要對其，先將middle設為全寬，讓left和right浮動上去,并且一個在左一個在右。
3.讓middle自適應寬度
4.外部高度為三者最高的高度

實現圣杯布局

先給出html的結構,為了方便觀察，這里也給出了頭部和腳部:



    我是頭部


    
        我是中間
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
    
    
        我是左
    
    
        我是右
    


    我是底部，版權所有

實現過程

首先給出相應的寬度和背景值，便于觀察

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浮動上去,給他一個全寬，原有基礎上添加

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

把left放到middle左邊，原有基礎上添加

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

把right放到middle右邊，原有基礎上添加

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

middle自適應，原有基礎上添加

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

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

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;
}

實現雙飛翼布局 有了圣杯布局為什么還要有雙飛翼布局

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

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

關鍵是給middle內部添加一層，作為安全層。

修改html。為middle加個內部層，原有基礎上添加


    
        我是中間
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊
        元素多多看對齊

實現過程

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

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

外部高度為三者最高的步驟類似圣杯布局，將middle出的設置改為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;
}

不僅僅是三列 怎樣實現兩列布局？

float:left便可輕松實現，其中left作為主體部分

怎樣實現三列布局？

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

怎樣實現多列布局？

在三列布局的基礎上，將最后一列不斷擴張成兩列布局或者三列布局即可實現

思考：

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

參考資料

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111676.html

實現三欄布局的幾種方法

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

golden_hamster 2019-08-02 11:55 評論0 收藏0
實現三欄布局的幾種方法

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

IamDLY 2019-08-29 17:12 評論0 收藏0
實現三欄布局的幾種方法

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

Hegel_Gu 2019-08-23 12:52 評論0 收藏0
圣杯布局和雙飛翼布局

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

yankeys 2019-08-29 13:54 評論0 收藏0
CSS三欄布局——多種方法詳解，比較兼容性

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

馬忠志 2019-08-30 10:57 評論0 收藏0