負邊距與雙飛翼布局
負邊距
當設定top和left方向的負邊距時，元素本身向指定方向移動，當設定bottom和right方向的負邊距時，元素本身不移動，處于元素后方的元素向前流動，覆寫其上，
圣杯布局
圣杯布局是一個三欄布局，左右定寬，中間自適應，
HTML布局
<header>Header</header>
<div >
<div >main</div>
<div >Left</div>
<div >Right</div>
</div>
<footer>Footer</footer>
得到如圖所示的三個div，
CSS設定
下面就開始最這三個div進行操作，
- 首先要設定中間的div寬度為100%，讓其能夠自適應，左右的div設定固定寬度，并且讓他們浮動起來，不然無法跟main出現在同一行，
.main {
width: 100%;
float: left;
}
.left {
width: 100px;
float: left;
}
.right {
width: 200px;
float: left;
}
這時我們得到如下圖所示的內容，因為main占據了100%的寬度，left和right只能在main下面顯示，
- 現在我們使用上面提到的負邊距技巧，將left和right與main放在同一行，當left的
margin-left等于其本身寬度時，它將往上挪，如果設定為100%，那么就等于挪動到最開始的位置，所以我們將left的margin-left設定為-100%，right的margin-left設定為-200px，那么就可以將兩者與main放到同一行，
.main {
width: 100%;
float: left;
}
.left {
width: 100px;
float: left;
margin-left: -100%;
}
.right {
width: 200px;
float: left;
margin-left: -200px;
}
得到結果如下圖，
但是，我們發現main已經被left和right覆寫了一部分，這會對顯示內容造成影響，圣杯布局采用的解決辦法是，使用padding，將整體的顯示區域縮小，留出left和right的空間，然后，再用相對定位，把left和right分別左移和右移，
3. 使用padding將整體收縮，再將left和right移出去，
.box {
padding-left: 100px;
padding-right: 200px;
}
跟著用相對定位relative將left和right移出去，
.left {
width: 100px;
float: left;
margin-left: -100%;
position: relative;
right: 100px;
}
.right {
width: 200px;
float: left;
margin-left: -200px;
position: relative;
left: 200px;
}
得到最終結果，
雙飛翼布局
雙飛翼布局是圣杯布局的一個改進，主要不同在于上面的第三步，首先用一個div將main的內容包裹，然后設定main內容div的左右邊距為left和right的寬度，這樣，也可以達到令main的內容顯示區域避開left和right范圍的作用，
HTML代碼如下，用一個div包裹main的內容，
HTML布局
<div >
<div >
<div >Main</div>
</div>
<div >Left</div>
<div >Right</div>
</div>
CSS代碼如下，不需設定padding，也不需要使用相對布局，
CSS設定
.box {
/* padding-left: 100px;
padding-right: 200px; */
}
.main {
width: 100%;
float: left;
}
.main-content {
margin-left: 100px;
margin-right: 200px;
}
.left {
width: 100px;
float: left;
margin-left: -100%;
/* position: relative;
right: 100px; */
}
.right {
width: 200px;
float: left;
margin-left: -200px;
/* position: relative;
left: 200px; */
}
參考連接
- 圣杯布局的實作程序 - tinyphp - 博客園
- 雙飛翼布局和圣杯布局的對比 - tinyphp - 博客園
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/109848.html
標籤：Html/Css