摘要：?jiǎn)栴}起源以前一直就聽(tīng)說(shuō)圣杯布局，但是沒(méi)有怎么去用過(guò)，然后這次偶然接觸到了，就學(xué)習(xí)了一下。繼續(xù)試驗(yàn)我們可以嘗試改變的值，去看看位置的變化。為了方便我們計(jì)算，另外寫(xiě)了一個(gè)類似的布局，內(nèi)容區(qū)的寬度是，三個(gè)的寬度也都是。

以前一直就聽(tīng)說(shuō)圣杯布局，但是沒(méi)有怎么去用過(guò)，然后這次偶然接觸到了，就學(xué)習(xí)了一下。
這是一個(gè)我從別人寫(xiě)的文章中復(fù)制過(guò)來(lái)的，關(guān)于圣杯布局的比較簡(jiǎn)單的說(shuō)明

通過(guò)縮放頁(yè)面就可以發(fā)現(xiàn)，隨著頁(yè)面的寬度的變化，這三欄布局是中間盒子優(yōu)先渲染，兩邊的盒子框子固定不變，即使頁(yè)面寬度變小，也不影響我們的瀏覽

而通常是采用浮動(dòng)布局和margin負(fù)值。

HTML結(jié)構(gòu)
首先定義一個(gè)主體div，再是left和right的div

    
main
    
left
    
right

CSS部分
1.給container左邊和右邊賦上padding值，寬度分別就是能容納的下left和right的div。
2.main DIV的寬度為100%。
3.main，left和right三個(gè)div都設(shè)置為左浮動(dòng)。

完成以上我們就會(huì)得到一個(gè)這樣的結(jié)果：

再然后我們給left一個(gè)margin-left:100%，此時(shí)會(huì)發(fā)現(xiàn)left移動(dòng)到了第一行中：

然后面對(duì)這個(gè)現(xiàn)象，我展開(kāi)了一系列的思考和探究~

Q：為什么left會(huì)跑去了第一行？
A：這個(gè)其實(shí)我們大概心里是明白的。一開(kāi)始，main的寬度是100%，所以第一行是無(wú)法再容納后面同樣是左浮動(dòng)的div塊。但是通過(guò)賦予了margin-left為-100%，這里的100%也就是父容器的寬度，瀏覽器計(jì)算出來(lái)是一個(gè)負(fù)值，就認(rèn)為它能被容納在第一行。

我們可以嘗試改變margin-left的值，去看看div位置的變化。為了方便我們計(jì)算，另外寫(xiě)了一個(gè)類似的布局，內(nèi)容區(qū)的寬度是100px，三個(gè)div的寬度也都是100px。
HTML部分

    
main
    
left
    
right
 

CSS部分

.container{
  width:100px;
  margin:0;
  padding:0 100px;
  background:rgba(0,0,0,.3);
}

div{
  float:left;
  width:100px;
  height:100px;
}
.main{
  background:rgba(0,0,255,.4);
}
.left{
  background:rgba(233,0,0,.4);
}
.right{
  background:rgba(0,233,0,.4);
}

效果是這樣的

然后我們?cè)囍oleft賦予不同的margin-left負(fù)值，會(huì)發(fā)現(xiàn)：
1.當(dāng)margin-left在0px ~ -99px的時(shí)候，left會(huì)向左移動(dòng)。

2.當(dāng)margin-left為-100px的時(shí)候，left上移動(dòng)，與main重疊：

所以margin-left是-100px的時(shí)候，顯然是一個(gè)分界點(diǎn)。

3.當(dāng)margin-left的負(fù)值繼續(xù)增加，left又會(huì)繼續(xù)向左邊移動(dòng)：

根據(jù)上面的情況，加以本寶寶的百度（笑），我們確定了想法，就是在計(jì)算元素的"寬度"的時(shí)候是會(huì)把margin-left+width得到結(jié)果，當(dāng)-100px+100px=0px的時(shí)候，就被認(rèn)為第一行是還可以容納的下，所以第二行的元素就到了第一行。
此時(shí)，我還找到了一篇文章，這篇文章比較合理的闡述了移動(dòng)的原理：https://www.cnblogs.com/LiveW...

然而這里還有一個(gè)細(xì)節(jié)問(wèn)題，就是left的移動(dòng)其實(shí)是有一個(gè)范圍的：

畫(huà)了紅框的范圍是container的一個(gè)padding區(qū)域，在left移動(dòng)切換的時(shí)候，
當(dāng)left的margin-left并沒(méi)有達(dá)到-100px的時(shí)候，為什么它會(huì)向左移動(dòng)，單純從放不下的原理來(lái)說(shuō)，它在原處不動(dòng)也可以是一個(gè)合理的現(xiàn)象，那篇文章似乎也沒(méi)有提到合理的原因，然后我繼續(xù)試驗(yàn)。

我們從當(dāng)left的margin-left為-100px開(kāi)始，即main和left重疊的情況。
我們?cè)俳omain一個(gè)margin-left負(fù)值為-50px，結(jié)果main和left一起向左邊移動(dòng)：

再試驗(yàn)一種情況，把left的寬設(shè)為150px，margin-left設(shè)為-150px，main的margin-left是0，此時(shí)left的右邊對(duì)齊了main的右邊。

所以應(yīng)該隱隱約約可以發(fā)現(xiàn)了些什么...

合理的解釋就是，在擺放元素位置的時(shí)候，它會(huì)計(jì)算出那個(gè)右邊的值，并且會(huì)認(rèn)為這就是元素的最后的標(biāo)準(zhǔn)線。

1.解釋繼續(xù)實(shí)驗(yàn)中為什么margin-left為left寬度負(fù)值，left會(huì)和main重疊：
因?yàn)樗鼤?huì)被認(rèn)為寬度是0，所以從main的結(jié)束位置開(kāi)始計(jì)算是100px+0px，所以元素要以100px為結(jié)束線，也就是它在100px的左邊。

2.解釋再次實(shí)驗(yàn)中為什么更改main的margin-left，left會(huì)和它一直重疊：
根據(jù)1的推斷，left的邊界線計(jì)算結(jié)果一直都會(huì)是main的邊界線。

3.解釋為什么left能在第二行向左邊移動(dòng)：
因?yàn)樗鼤?huì)被認(rèn)為寬度在1px~99px之間，所以它的邊界線是在內(nèi)容區(qū)中寬度為1px~99px之間，所以它能移動(dòng)。

其實(shí)也是我自己的猜想和推論，并不知道實(shí)際情況對(duì)不對(duì)QAQ，但是根據(jù)自己的測(cè)試情況來(lái)說(shuō)，目前是都說(shuō)得通的，望大神指點(diǎn)嘻嘻。