【留可爱研究】圣杯布局触发margin负值的研究

时间：2023-03-30 16:12:37 CSS

问题の由来之前听说过圣杯布局，但是没怎么用过，这次偶然遇到，所以学到了。这是我从别人写的一篇文章中复制过来的一篇文章。通过放大页面可以找到对HolyGrail布局的相对简单的描述。随着页面宽度的变化，三栏式布局会先渲染中间的框，两侧的框是固定的，即使页面宽度变小也不会影响我们的浏览，通常采用浮动布局和负边距。一般の实现方法HTML结构首先定义一个主div，然后是左右divmain

left

right

CSS部分1.给容器的左右赋padding值，宽度为能容纳左下的div和正确的分别。2.主DIV的宽度为100%。3、main、left、right三个div都设置为向左浮动。完成上面的操作后，我们会得到这样的结果：然后我们给left一个margin-left:100%，然后我们会发现left已经移到了第一行：那么面对这个现象，我展开了一系列的思考andExploration~第一个问题Q：为什么left跑到第一行？答：我们心里大概明白这一点。一开始main的宽度是100%，所以第一行已经放不下同样漂浮在后面的div块。但是通过将margin-left赋值给-100%，这里的100%是父容器的宽度，浏览器计算出一个负值，认为可以容纳在第一行。继续实验，我们可以尝试改变margin-left的值，看看div位置的变化。为了方便我们计算，我们写了一个类似的布局，内容区域的宽度是100px，三个div的宽度也是100px。HTML部分mainleftrightCSSpart.container{width:100px;保证金：0；填充：0100px；背景:rgba(0,0,0,.3);}div{浮动:左;宽度：100px；高度：100px；}.main{背景：rgba(0,0,255,.4);}.left{背景：rgba(233,0,0,.4);}.right{背景：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会继续向左移动：根据上面的情况，加上我家宝宝的百度（笑），我们确定了思路，即当计算元素的“width”是margin-left+width就会得到结果。当-100px+100px=0px时，认为第一行还能容纳，所以第二行的元素会到达第一行。这个时候我也找到了一篇文章，对movement的原理进行了合理的解释：https://www.cnblogs.com/LiveW...二次の问题不过这里还有一个详细的问题，就是movementofleft其实是有一个范围的：用红框画出来的区域就是容器的一个padding区域。左移切换时，当left的margin-left没有达到-100px时，为什么会向左移动？，纯粹从不放手的原则来说，不动到位也可以是一个合理的现象，那篇文章好像也没有提到合理的理由，然后我就继续实验了。当left的margin-left为-100px，也就是main和left重叠的时候，我们再来实验一下。让我们给main一个-50px的margin-left负值。结果，main和left一起向左移动：尝试另一种情况，设置left的宽度为150px，margin-left为-150px，main的margin-left为0。此时，右侧的left与main的右侧对齐。所以你应该能隐隐约约的找到一些东西。。。我这个小结论的合理解释是，在放置元素位置的时候，会计算右边的值，会认为这是元素最终的标准线.1.解释为什么margin-left在后续实验中是leftwidth的负值，left会和main重叠：因为会被认为宽度为0，所以从main的结束位置开始计算是100px+0px，所以元素应该是100px结束线，也就是向左100px。2、解释为什么实验中又改了main的margin-left，left会一直和它重叠：根据1的推论，left的边界线的计算结果会一直是main的边界线.3、第二行解释为什么left可以向左移动：因为会认为它的宽度在1px到99px之间，所以它的边界线在内容区的1px到99px之间，所以可以移动。其实是我自己的猜想和推论。不知道实际情况对不对，但根据我自己的测试情况，目前是有道理的。希望大神指教。

上一篇：前端面试题-CSS选择器性能优化

下一篇：常用的思维导图软件有哪些

【留可爱研究】圣杯布局触发margin负值的研究相关文章