摘要：问题起源以前一直就听说圣杯布局，但是没有怎么去用过，然后这次偶然接触到了，就学习了一下。继续试验我们可以尝试改变的值，去看看位置的变化。为了方便我们计算，另外写了一个类似的布局，内容区的宽度是，三个的宽度也都是。
问题の起源
以前一直就听说圣杯布局，但是没有怎么去用过，然后这次偶然接触到了，就学习了一下。
这是一个我从别人写的文章中复制过来的，关于圣杯布局的比较简单的说明
通过缩放页面就可以发现，随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子固定不变，即使页面宽度变小，也不影响我们的浏览
而通常是采用浮动布局和margin负值。
一般の实现方法HTML结构
首先定义一个主体div，再是left和right的div
mainleftright
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部分
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负值，会发现：
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，但是根据自己的测试情况来说，目前是都说得通的，望大神指点嘻嘻。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112806.html
摘要：为什么会产生闭包究其根本，是因为代表的函数包含的作用域。而在作用域链中，外部函数的活动对象始终处于第二位，外部函数的外部函数的活动对象处于第三位直到作为作用域链终点的全局执行环境。 前言 此文的内容主要是来自看书的总结+小小的实践哦~会不断更新总结。 什么是闭包 书上是这样定义闭包的： 有权访问另一个函数作用域中变量的函数。 举一个例子： function test(){ va...
摘要：构造函数构造操作符调用的函数就是构造函数。其和其构造函数的指向相同。而构造函数属性指向的对象带有属性，指向函数自身。，回归构造函数继承，仔细看看诞生的嘻嘻和哈哈两位同学可以看到两个实例都拥有了和两个属性，因为方法的运行类似于执行了和。 最近在看《JavaScript设计模式》，然后开篇复习了JavaScript中的几种继承方式，自己似乎也没有怎么仔细探究过，目前自己没怎么碰到过应用的场...
阅读 1984·2019-08-29 16:27
阅读 1343·2019-08-29 16:14
阅读 3350·2019-08-29 14:18
阅读 3417·2019-08-29 13:56
阅读 1232·2019-08-29 11:13
阅读 2098·2019-08-28 18:19
阅读 3417·2019-08-27 10:57
阅读 2240·2019-08-26 11:39
