佈局

時間 2019-11-09

標籤佈局简体版

原文原文鏈接

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

聖盃佈局和雙飛翼

什麼是聖盃佈局和雙飛翼佈局？

聖盃佈局和雙飛翼佈局可實現兩邊寬度固定，中間寬度自適應，外部高度爲三者中的最高高度的三列布局，固然，由擴展性這樣的佈局不單單只是三列，html

聖盃佈局

由於現有的技術所有都有缺點，要找到一種好的實現方法就像找到聖盃同樣難。安全

雙飛翼佈局

是對聖盃佈局的優化，先實現中間最重要的身體部分，再實現翅膀，因此叫雙飛翼佈局。佈局

早期用table實現，如今不用了，由於table要等到頁面加載完以後才渲染。table有一些略根性，這個我並非很清楚，總之table並不推薦。優化

佈局實現思路

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

實現聖盃佈局

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

<body>
<header>
    我是頭部
</header>
<article>
    <div class="middle">
        我是中間
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
    </div>
    <div class="left">
        我是左
    </div>
    <div class="right">
        我是右
    </div>
</article>
<footer>
    我是底部，版權全部
</footer>
</body>

實現過程

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

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

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

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

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

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

.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加個內部層，原有基礎上添加

<div class="middle">
    <div class="inner">
        我是中間
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
        <p>元素多多看對齊</p>
    </div>
</div>

實現過程

前面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 經典佈局之雙飛翼佈局

相關標籤/搜索

每日一句

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