在兩欄式版面，設定margin-left:-100%的用途
實作
- 建立一份index.html 以及 index.css
<!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"/><link href="index.css" rel="stylesheet"/><title>首頁</title></head><body></body></html>index.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
- 基本佈局
index.html
<div class ="container"><div class="middle">Middle</div><div class="left">Left</div><div class="right">Right</div></div>- 首先設置左右兩個div寬度以及container容器的左右那邊距分別為left、right盒子的寬度，這是兩個盒子的佈局位置。
index.css
//窗口小于一定值时布局会混乱，因此加一个最小宽度
//阈值 = 左width x 2 + 右widthbody{
min-width: 700px;
}
.container{
padding: 0300px0200px;
}
.middle{
width: 100%;
height: 200px;
background: #ccc;
}
.left{
width: 200px;
height: 200px;
background: green;
}
.right{
width: 300px;
height: 200px;
background: orange;
}
做完成果如下：
- 添加浮動
左浮動：
.middle,.left,.right{
float: left
}
可以看到黃色的部分網上移動了
- left right盒子移動
- 負margin
- 讓left與right爬升至第一行
- 負margin的眾多表現行為之中，這裡只討論脫離了文檔的浮動元素的情況。
- 設置了之後，我們可以知道這三個盒子都脫離了html的文檔，要讓綠色的left往上爬，需要使用到負margin，這個負margin是多少呢？取決於兩個條件：
- 元素的寬度
- 元素與上一個元素之間的空白空間
- 我們對當前的佈局做一下修改，將right盒子註釋，middle盒子修改為如下寬度：
.middle{
width: calc(100% - 166px)
}
- 現在middle與left之間就有了166px的空白空間。
設置 margin-left: -10px，會發現left盒子仍在當前行高移動，只不過向左侧移動了10px，接下来设置margin-left: -34px，此时left盒子已经成功上升到第一行了。
- margin-left: -10px;
- margin-left: -34px;
然而这是为什么呢？
- html元素=margin + border + padding + content，那佈局是根據每個div的屬性來決定的，對於設置了浮動的鄉林元素而言，他們脫離了正常的html，當對一個元素設置負margin時，按照第一條規則來看，元素對應的div變小了，負margin多少，就縮小多少。
- 在這個範例中我們設置了margin-left:-34px，本質上div的寬度較之前減少了34px的寬度，實踐上的佈局寬度變為200-34=166px，而166px正是他上一行相鄰元素的空白寬度，因此left的盒子就會流到這個為他量身定做的位置，即：left填補了這一塊空白空間。
經過一小部分得獎解，大家應該可以明白其中的關鍵原理，那麼我們先將上面的改動還原回去，繼續往下製作。
那麼可以思考一下，left的盒子與上一行相鄰元素有沒有空白區域，應該沒有！所以想要讓left往上流的話，可以使用margin設置為-200px，他就會上升到第一行的末端。
margin設置為-200px
margin-left: -200px;
執行結果如下：
接下來讓left盒子移動到最左側，根據上圖來直接移動，x 的像素即可，x的寬度是100%，即他們共同的父元素的寬度，left須設置margin-left:-100%。
到这里先停一下，處理一下right div，使用margin-left: -300px即可
.right{
margin-left: -300px
}
結果如下，可以看到全部的div都變成同一層了。
- 佈局
此時的left與right分別在container的左右兩端（注意，這邊是內側），因此我們要讓他們最終分布在container的為側，即左右padding，這兩個距離多少我們是知道的，就是我們的左右div，使用絕對定位即可達成。
.left{
position: relative;
left: -200px
}
.right{
position: relative;
right: -300px;
}
整格頁面就被填滿了。
實作完成！！！！
完整程式碼：
index.html：
<!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"/><link href="index.css" rel="stylesheet"/><title>首頁</title></head><body><div class="container"><div class="middle">Middle</div><div class="left">Left</div><div class="right">Right</div></div></body></html>index.css：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-width: 700px;
}
.container {
padding: 0300px0200px;
}
.middle {
width: 100%;
height: 200px;
background: #ccc;
}
.left {
width: 200px;
height: 200px;
background: green;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 300px;
height: 200px;
background: orange;
margin-left: -300px;
position: relative;
right: -300px;
}
.middle,
.left,
.right {
float: left;
}