資訊專欄INFORMATION COLUMN
摘要：問題起源以前一直就聽說圣杯布局，但是沒有怎么去用過，然后這次偶然接觸到了，就學(xué)習(xí)了一下。繼續(xù)試驗我們可以嘗試改變的值，去看看位置的變化。為了方便我們計算，另外寫了一個類似的布局，內(nèi)容區(qū)的寬度是，三個的寬度也都是。
問題の起源
以前一直就聽說圣杯布局，但是沒有怎么去用過，然后這次偶然接觸到了，就學(xué)習(xí)了一下。
這是一個我從別人寫的文章中復(fù)制過來的，關(guān)于圣杯布局的比較簡單的說明
通過縮放頁面就可以發(fā)現(xiàn)，隨著頁面的寬度的變化，這三欄布局是中間盒子優(yōu)先渲染，兩邊的盒子框子固定不變，即使頁面寬度變小，也不影響我們的瀏覽
而通常是采用浮動布局和margin負(fù)值。
一般の實現(xiàn)方法HTML結(jié)構(gòu)
首先定義一個主體div，再是left和right的div
mainleftright
CSS部分
1.給container左邊和右邊賦上padding值，寬度分別就是能容納的下left和right的div。
2.main DIV的寬度為100%。
3.main，left和right三個div都設(shè)置為左浮動。
完成以上我們就會得到一個這樣的結(jié)果：
再然后我們給left一個margin-left:100%，此時會發(fā)現(xiàn)left移動到了第一行中：
然后面對這個現(xiàn)象，我展開了一系列的思考和探究~
初次の發(fā)問Q：為什么left會跑去了第一行？
A：這個其實我們大概心里是明白的。一開始，main的寬度是100%，所以第一行是無法再容納后面同樣是左浮動的div塊。但是通過賦予了margin-left為-100%，這里的100%也就是父容器的寬度，瀏覽器計算出來是一個負(fù)值，就認(rèn)為它能被容納在第一行。
我們可以嘗試改變margin-left的值，去看看div位置的變化。為了方便我們計算，另外寫了一個類似的布局，內(nèi)容區(qū)的寬度是100px，三個div的寬度也都是100px。
HTML部分
mainleftright
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負(fù)值，會發(fā)現(xiàn)：
1.當(dāng)margin-left在0px ~ -99px的時候，left會向左移動。
2.當(dāng)margin-left為-100px的時候，left上移動，與main重疊：
所以margin-left是-100px的時候，顯然是一個分界點(diǎn)。
3.當(dāng)margin-left的負(fù)值繼續(xù)增加，left又會繼續(xù)向左邊移動：
根據(jù)上面的情況，加以本寶寶的百度（笑），我們確定了想法，就是在計算元素的"寬度"的時候是會把margin-left+width得到結(jié)果，當(dāng)-100px+100px=0px的時候，就被認(rèn)為第一行是還可以容納的下，所以第二行的元素就到了第一行。
此時，我還找到了一篇文章，這篇文章比較合理的闡述了移動的原理：https://www.cnblogs.com/LiveW...
然而這里還有一個細(xì)節(jié)問題，就是left的移動其實是有一個范圍的：
畫了紅框的范圍是container的一個padding區(qū)域，在left移動切換的時候，
當(dāng)left的margin-left并沒有達(dá)到-100px的時候，為什么它會向左移動，單純從放不下的原理來說，它在原處不動也可以是一個合理的現(xiàn)象，那篇文章似乎也沒有提到合理的原因，然后我繼續(xù)試驗。
我們從當(dāng)left的margin-left為-100px開始，即main和left重疊的情況。
我們再給main一個margin-left負(fù)值為-50px，結(jié)果main和left一起向左邊移動：
再試驗一種情況，把left的寬設(shè)為150px，margin-left設(shè)為-150px，main的margin-left是0，此時left的右邊對齊了main的右邊。
所以應(yīng)該隱隱約約可以發(fā)現(xiàn)了些什么...
我の小結(jié)論合理的解釋就是，在擺放元素位置的時候，它會計算出那個右邊的值，并且會認(rèn)為這就是元素的最后的標(biāo)準(zhǔn)線。
1.解釋繼續(xù)實驗中為什么margin-left為left寬度負(fù)值，left會和main重疊：
因為它會被認(rèn)為寬度是0，所以從main的結(jié)束位置開始計算是100px+0px，所以元素要以100px為結(jié)束線，也就是它在100px的左邊。
2.解釋再次實驗中為什么更改main的margin-left，left會和它一直重疊：
根據(jù)1的推斷，left的邊界線計算結(jié)果一直都會是main的邊界線。
3.解釋為什么left能在第二行向左邊移動：
因為它會被認(rèn)為寬度在1px~99px之間，所以它的邊界線是在內(nèi)容區(qū)中寬度為1px~99px之間，所以它能移動。
其實也是我自己的猜想和推論，并不知道實際情況對不對QAQ，但是根據(jù)自己的測試情況來說，目前是都說得通的，望大神指點(diǎn)嘻嘻。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112806.html
摘要：為什么會產(chǎn)生閉包究其根本，是因為代表的函數(shù)包含的作用域。而在作用域鏈中，外部函數(shù)的活動對象始終處于第二位，外部函數(shù)的外部函數(shù)的活動對象處于第三位直到作為作用域鏈終點(diǎn)的全局執(zhí)行環(huán)境。 前言 此文的內(nèi)容主要是來自看書的總結(jié)+小小的實踐哦~會不斷更新總結(jié)。 什么是閉包 書上是這樣定義閉包的： 有權(quán)訪問另一個函數(shù)作用域中變量的函數(shù)。 舉一個例子： function test(){ va...
摘要：構(gòu)造函數(shù)構(gòu)造操作符調(diào)用的函數(shù)就是構(gòu)造函數(shù)。其和其構(gòu)造函數(shù)的指向相同。而構(gòu)造函數(shù)屬性指向的對象帶有屬性，指向函數(shù)自身。，回歸構(gòu)造函數(shù)繼承，仔細(xì)看看誕生的嘻嘻和哈哈兩位同學(xué)可以看到兩個實例都擁有了和兩個屬性，因為方法的運(yùn)行類似于執(zhí)行了和。 最近在看《JavaScript設(shè)計模式》，然后開篇復(fù)習(xí)了JavaScript中的幾種繼承方式，自己似乎也沒有怎么仔細(xì)探究過，目前自己沒怎么碰到過應(yīng)用的場...
摘要：之后仔細(xì)的百度了一下，發(fā)現(xiàn)了這么一個叫做內(nèi)外補(bǔ)丁負(fù)值法的東西。在這個解決方案中，又涉及到了傳說中的負(fù)。深入研究之后又發(fā)現(xiàn)了圣杯布局雙飛翼布局等很多示例，確實要好好研究負(fù)邊距這個東西了。相關(guān)推薦那些年，奇妙的圣杯與雙飛翼，還有負(fù)邊距 2015-04-22 時候?qū)懙睦衔?，因為希望引用所以拿了出來?那天被一個同學(xué)問了一個問題，三列的div，要求父div的高度和三個div的高度都和三個中字?jǐn)?shù)...
閱讀 2011·2019-08-29 16:27
閱讀 1381·2019-08-29 16:14
閱讀 3383·2019-08-29 14:18
閱讀 3468·2019-08-29 13:56
閱讀 1263·2019-08-29 11:13
閱讀 2135·2019-08-28 18:19
閱讀 3454·2019-08-27 10:57
閱讀 2289·2019-08-26 11:39
