聖盃佈局中對left盒子設置負內邊距-100%的一點解釋

聖盃佈局算是一個「古老」的話題了，關於其來源網上資料衆多，在此很少作表述。
但在前幾天偶然看到一篇講解聖盃佈局的博客中，有同窗對左側定寬盒子設置 margin-left: -100% 存在疑惑，大體是不清楚爲何這樣設置就會使left盒子「爬升」到middle盒子的左側，想了一下，仍是把本身的理解記錄下來，但願能幫到在此處有疑惑的同窗，文中若有謬誤，歡迎指出。
簡單回顧一下聖盃佈局的流程：令middle、left、right盒子的寬度分別爲100%、200px、300px

HTML

<div class = "container">
  <div class = "middle"></div>
  <div class = "left"></div>
  <div class = "right"></div>
</div>

1. 首先設置左右兩個div寬度以及container容器的左右內邊距分別爲left、right盒子的寬度，以便給這兩個盒子「騰地兒」

//窗口小於必定值時佈局會混亂，所以加一個最小寬度
//閾值 = 左width x 2 + 右width
body{
  min-width: 700px; 
}
.container{
  padding: 0 300px 0 200px;
}
.middle{
  width: 100%;
  height: 200px;
  background: #ccc;
}
.left{
  width: 200px;
  height: 200px;
  background: green;
}
.right{
  width: 200px;
  height: 200px;
  background: orange;
}

效果：

2. 添加左浮動

.middle,.left,.right{
  float: left
}

效果

3. 讓left與right「爬升」至第一行

如今咱們知道這三個盒子全都脫離了文檔流，那麼讓元素「爬升」至上一行，須要用到負margin，這個負margin是多少呢？這又要看他的上一行中還留下多長的「空白」，這個「空白」是用來放待上位元素減去負margin值（多說一句，固然減的是絕對值）的那一部分。所以用待上位元素的寬度（包括padding）減去這個「空白」的寬度，即爲負margin的值。下面畫兩張圖理解：

設置 margin-left： -34px後效果：（兩張圖貌似大小不對等，我標註時沒量，請腦補一下上圖空白處166px與下圖的166px大小同樣就是了）

margin-left妙用無窮，感興趣請自行百度
那麼在此佈局中，讓left盒子「爬升」：
a. 首先，咱們發現left的上一行沒有給它留一丁點「空白「，即「空白」=0，按照上面解釋的，left寬度減去「空白」寬，那麼left向左移動200px它就「上位」成功了

//此非聖盃佈局中的css，僅做解釋說明用
.left{
    margin-left: -200px
}

如今的效果：

left「上位」成功了！不過排在container的末端，咱們要讓它到最左側。若是你之前不清楚如何進行聖盃佈局，到這裏可能會有點蒙圈，這移動到左邊的距離可咋算？那麼我們進行下一步

b. 咱們先讓left盒子移動到父容器container的左側，即上圖中m與n重合。假設container寬度爲x，left還需左移（x-200）px，敲黑板！！！還記得left怎麼上的位麼？設置margin-left爲-200px！考驗小學數學功底的時間到了

問：left上位所必需的的200px佔container寬度（去padding）的百分比是多少？
答： 200/x

問：據上圖看，left上位後mn重合所移動距離佔container寬度（去padding）的百分比是多少？
答：(x-200)/x

問： left完成上位過程所移動的距離佔container寬度（去padding）的百分比是多少？
答： (200/x) + (x-200)/x = 100%

問：container是否是left的父元素？
答：是

到這裏，你的小學老師表示很欣慰=_=
這裏還牽扯到一個基礎知識，margin-left設置百分比是相對於父元素寬度的，這個寬度是不包括padding在內的。
綜上，用margin-left完成left「上位」，只需設置

.left{
    margin-left: -100%
}

到這裏，有疑惑的同窗就該明白這-100%到底怎麼回事了吧！
效果：

c. right盒子「上位」同理，不過不像左移動這麼波折了

.right{
    margin-left: -300px
}

效果

4. 此時left與right分別在container的左右兩端，咱們要讓它們最終在container給它們「騰的地兒」處安身，這兩個距離咱們但是知道的，即padding的大小，設置絕對定位

.left{
    position: relative;
    left: -200px
}
.right{
    position: relative;
    right: -300px;
}

效果

至此，整個聖盃佈局完成，想必對這些負邊距設置值有疑問的同窗能清楚點了吧--
固然了，用flex佈局更簡單，網上資料衆多，在此不作解釋。

本文首發於個人我的博客mapblog小站 ---一個vue-ssr博客