圣杯布局中对left盒子设置负内边距-100%的一点解释

LdhAndroid 发布于2019-08-02 10:15 / 1458人阅读

摘要：但在前几天偶然看到一篇讲解圣杯布局的博客中，有同学对左侧定宽盒子设置存在疑惑，大致是不清楚为什么这样设置就会使盒子爬升到盒子的左侧，想了一下，还是把自己的理解记录下来，希望能帮到在此处有疑惑的同学，文中如有谬误，欢迎指出。

圣杯布局算是一个“古老”的话题了，关于其来源网上资料众多，在此不多做表述。
但在前几天偶然看到一篇讲解圣杯布局的博客中，有同学对左侧定宽盒子设置 margin-left: -100% 存在疑惑，大致是不清楚为什么这样设置就会使left盒子“爬升”到middle盒子的左侧，想了一下，还是把自己的理解记录下来，希望能帮到在此处有疑惑的同学，文中如有谬误，欢迎指出。
简单回顾一下圣杯布局的流程：令middle、left、right盒子的宽度分别为100%、200px、300px

HTML

1. 首先设置左右两个div宽度以及container容器的左右内边距分别为left、right盒子的宽度，以便给这两个盒子“腾地儿”

//窗口小于一定值时布局会混乱，因此加一个最小宽度
//阈值 = 左width x 2 + 右width
body{
  min-width: 700px; 
}
.container{
  padding: 0 300px 0 200px;
}
.middle{
  width: 100%;
  height: 200px;
  background: #ccc;
}
.left{
  width: 200px;
  height: 200px;
  background: green;
}
.right{
  width: 200px;
  height: 200px;
  background: orange;
}

效果：

2. 添加左浮动

.middle,.left,.right{
  float: left
}

效果

3. 让left与right“爬升”至第一行

现在我们知道这三个盒子全都脱离了文档流，那么让元素“爬升”至上一行，需要用到负margin，这个负margin是多少呢？这又要看他的上一行中还留下多长的“空白”，这个“空白”是用来放待上位元素减去负margin值（多说一句，当然减的是绝对值）的那一部分。因此用待上位元素的宽度（包括padding）减去这个“空白”的宽度，即为负margin的值。下面画两张图理解：

设置 margin-left： -34px后效果：（两张图貌似大小不对等，我标注时没量，请脑补一下上图空白处166px与下图的166px大小一样就是了）

margin-left妙用无穷，感兴趣请自行百度
那么在此布局中，让left盒子“爬升”：
a. 首先，我们发现left的上一行没有给它留一丁点“空白“，即“空白”=0，按照上面解释的，left宽度减去“空白”宽，那么left向左移动200px它就“上位”成功了

//此非圣杯布局中的css，仅作解释说明用
.left{
    margin-left: -200px
}

现在的效果：

left“上位”成功了！不过排在container的末端，我们要让它到最左侧。如果你以前不清楚如何进行圣杯布局，到这里可能会有点蒙圈，这移动到左边的距离可咋算？那么咱们进行下一步

b. 我们先让left盒子移动到父容器container的左侧，即上图中m与n重合。假设container宽度为x，left还需左移（x-200）px，敲黑板！！！还记得left怎么上的位么？设置margin-left为-200px！考验小学数学功底的时间到了

问：left上位所必需的的200px占container宽度（去padding）的百分比是多少？
答： 200/x

问：据上图看，left上位后mn重合所移动距离占container宽度（去padding）的百分比是多少？
答：(x-200)/x

问： left完成上位过程所移动的距离占container宽度（去padding）的百分比是多少？
答： (200/x) + (x-200)/x = 100%

问：container是不是left的父元素？
答：是

到这里，你的小学老师表示很欣慰=_=
这里还牵扯到一个基础知识，margin-left设置百分比是相对于父元素宽度的，这个宽度是不包括padding在内的。
综上，用margin-left完成left“上位”，只需设置

.left{
    margin-left: -100%
}

到这里，有疑惑的同学就该明白这-100%到底怎么回事了吧！
效果：

c. right盒子“上位”同理，不过不像左移动这么波折了

.right{
    margin-left: -300px
}

效果

4. 此时left与right分别在container的左右两端，我们要让它们最终在container给它们“腾的地儿”处安身，这两个距离我们可是知道的，即padding的大小，设置绝对定位

.left{
    position: relative;
    left: -200px
}
.right{
    position: relative;
    right: -300px;
}

效果

至此，整个圣杯布局完成，想必对这些负边距设置值有疑问的同学能清楚点了吧--
当然了，用flex布局更简单，网上资料众多，在此不做解释。

本文首发于我的个人博客mapblog小站 ---一个vue-ssr博客

云服务器专线服务负内边距内边距 html文字内边距 html 左右内边距

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52222.html

圣杯布局中对left盒子设置负内边距-100%的一点解释

摘要：但在前几天偶然看到一篇讲解圣杯布局的博客中，有同学对左侧定宽盒子设置存在疑惑，大致是不清楚为什么这样设置就会使盒子爬升到盒子的左侧，想了一下，还是把自己的理解记录下来，希望能帮到在此处有疑惑的同学，文中如有谬误，欢迎指出。圣杯布局算是一个古老的话题了，关于其来源网上资料众多，在此不多做表述。但在前几天偶然看到一篇讲解圣杯布局的博客中，有同学对左侧定宽盒子设置 margin-left:...

JellyBool 2019-08-29 15:08 评论0 收藏0
圣杯布局和双飞翼布局

摘要：比起双飞翼布局，它的起源不是源于对页面的形象表达。一起来看看这两种布局的区别在哪一双飞翼布局可以看到，我们在里面又加了一个内容层。稍微了解前端的人都知道，圣杯布局和双飞翼布局是前端面试时必问的问题，因为它既能体现你懂HTML结构又能体现出你对ＤIV+CSS布局的掌握，毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ 事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都...

Clect 2019-08-02 16:17 评论0 收藏0
圣杯布局和双飞翼布局

摘要：比起双飞翼布局，它的起源不是源于对页面的形象表达。一起来看看这两种布局的区别在哪一双飞翼布局可以看到，我们在里面又加了一个内容层。稍微了解前端的人都知道，圣杯布局和双飞翼布局是前端面试时必问的问题，因为它既能体现你懂HTML结构又能体现出你对ＤIV+CSS布局的掌握，毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ 事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都...

468122151 2019-08-30 10:49 评论0 收藏0
圣杯布局和双飞翼布局

摘要：比起双飞翼布局，它的起源不是源于对页面的形象表达。一起来看看这两种布局的区别在哪一双飞翼布局可以看到，我们在里面又加了一个内容层。稍微了解前端的人都知道，圣杯布局和双飞翼布局是前端面试时必问的问题，因为它既能体现你懂HTML结构又能体现出你对ＤIV+CSS布局的掌握，毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ 事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都...

xioqua 2019-08-05 16:58 评论0 收藏0
CSS 布局方式

摘要：中间左栏右栏清除浮动如下图缺点结构不正确多了一层标签布局左栏中间右栏如下图缺点兼容性问题参考文章 W3C标准由万维网联盟制定的一系列标准，包括：结构化标准语言（HTML和XML）表现标准语言（CSS）行为标准语言（DOM和ECMAScript） CSS中的定位机制在CSS中存在三种定位机制：标准文档流（Normal flow）浮动（Floats）绝对定位（Abs...

LancerComet 2019-08-29 15:27 评论0 收藏0