【呆萌の研究】圣杯布局引發對margin負值的研究

zhangke3016 發布于2019-08-29 13:56 / 3465人閱讀

摘要：問題起源以前一直就聽說圣杯布局，但是沒有怎么去用過，然后這次偶然接觸到了，就學習了一下。繼續試驗我們可以嘗試改變的值，去看看位置的變化。為了方便我們計算，另外寫了一個類似的布局，內容區的寬度是，三個的寬度也都是。

問題の起源

以前一直就聽說圣杯布局，但是沒有怎么去用過，然后這次偶然接觸到了，就學習了一下。
這是一個我從別人寫的文章中復制過來的，關于圣杯布局的比較簡單的說明

通過縮放頁面就可以發現，隨著頁面的寬度的變化，這三欄布局是中間盒子優先渲染，兩邊的盒子框子固定不變，即使頁面寬度變小，也不影響我們的瀏覽

而通常是采用浮動布局和margin負值。

一般の實現方法

HTML結構
首先定義一個主體div，再是left和right的div


    main
    left
    right

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

完成以上我們就會得到一個這樣的結果：

再然后我們給left一個margin-left:100%，此時會發現left移動到了第一行中：

然后面對這個現象，我展開了一系列的思考和探究~

初次の發問

Q：為什么left會跑去了第一行？
A：這個其實我們大概心里是明白的。一開始，main的寬度是100%，所以第一行是無法再容納后面同樣是左浮動的div塊。但是通過賦予了margin-left為-100%，這里的100%也就是父容器的寬度，瀏覽器計算出來是一個負值，就認為它能被容納在第一行。

繼續試驗

我們可以嘗試改變margin-left的值，去看看div位置的變化。為了方便我們計算，另外寫了一個類似的布局，內容區的寬度是100px，三個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);
}

效果是這樣的

然后我們試著給left賦予不同的margin-left負值，會發現：
1.當margin-left在0px ~ -99px的時候，left會向左移動。

2.當margin-left為-100px的時候，left上移動，與main重疊：

所以margin-left是-100px的時候，顯然是一個分界點。

3.當margin-left的負值繼續增加，left又會繼續向左邊移動：

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

二次の提問

然而這里還有一個細節問題，就是left的移動其實是有一個范圍的：

畫了紅框的范圍是container的一個padding區域，在left移動切換的時候，
當left的margin-left并沒有達到-100px的時候，為什么它會向左移動，單純從放不下的原理來說，它在原處不動也可以是一個合理的現象，那篇文章似乎也沒有提到合理的原因，然后我繼續試驗。

再次實驗

我們從當left的margin-left為-100px開始，即main和left重疊的情況。
我們再給main一個margin-left負值為-50px，結果main和left一起向左邊移動：

再試驗一種情況，把left的寬設為150px，margin-left設為-150px，main的margin-left是0，此時left的右邊對齊了main的右邊。

所以應該隱隱約約可以發現了些什么...

我の小結論

合理的解釋就是，在擺放元素位置的時候，它會計算出那個右邊的值，并且會認為這就是元素的最后的標準線。

1.解釋繼續實驗中為什么margin-left為left寬度負值，left會和main重疊：
因為它會被認為寬度是0，所以從main的結束位置開始計算是100px+0px，所以元素要以100px為結束線，也就是它在100px的左邊。

2.解釋再次實驗中為什么更改main的margin-left，left會和它一直重疊：
根據1的推斷，left的邊界線計算結果一直都會是main的邊界線。

3.解釋為什么left能在第二行向左邊移動：
因為它會被認為寬度在1px~99px之間，所以它的邊界線是在內容區中寬度為1px~99px之間，所以它能移動。

其實也是我自己的猜想和推論，并不知道實際情況對不對QAQ，但是根據自己的測試情況來說，目前是都說得通的，望大神指點嘻嘻。

GPU云服務器云服務器圣杯布局物聯網的研究金融云服務的研究云計算的研究意義

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112806.html

【呆萌の研究】JavaScriptの閉包

摘要：為什么會產生閉包究其根本，是因為代表的函數包含的作用域。而在作用域鏈中，外部函數的活動對象始終處于第二位，外部函數的外部函數的活動對象處于第三位直到作為作用域鏈終點的全局執行環境。前言此文的內容主要是來自看書的總結+小小的實踐哦~會不斷更新總結。什么是閉包書上是這樣定義閉包的：有權訪問另一個函數作用域中變量的函數。舉一個例子： function test(){ va...

CHENGKANG 2019-08-26 11:47 評論0 收藏0
【呆萌の研究】JavaScript常見的繼承方式

摘要：構造函數構造操作符調用的函數就是構造函數。其和其構造函數的指向相同。而構造函數屬性指向的對象帶有屬性，指向函數自身。，回歸構造函數繼承，仔細看看誕生的嘻嘻和哈哈兩位同學可以看到兩個實例都擁有了和兩個屬性，因為方法的運行類似于執行了和。最近在看《JavaScript設計模式》，然后開篇復習了JavaScript中的幾種繼承方式，自己似乎也沒有怎么仔細探究過，目前自己沒怎么碰到過應用的場...

馬永翠 2019-08-22 15:03 評論0 收藏0
CSS中的負邊距

摘要：之后仔細的百度了一下，發現了這么一個叫做內外補丁負值法的東西。在這個解決方案中，又涉及到了傳說中的負。深入研究之后又發現了圣杯布局雙飛翼布局等很多示例，確實要好好研究負邊距這個東西了。相關推薦那些年，奇妙的圣杯與雙飛翼，還有負邊距 2015-04-22 時候寫的老文，因為希望引用所以拿了出來。那天被一個同學問了一個問題，三列的div，要求父div的高度和三個div的高度都和三個中字數...

cocopeak 2019-08-29 10:57 評論0 收藏0