前端面试题练习-圣杯布局float+position

（一共有三种方法，此处我只讨论一种方法）

在页面上的显示效果就是左右两边是个固定的宽度，中间的容器自适应；即根据页面大小的变化而变化。
在开发中常用来做功能区域的划分。左边是一个导航菜单，右边是广告或者文章的列表，中间是主要的内容显示区域。

有很多文章分析圣杯布局，我只按照我不理解的地方对该布局代码进行解释。

我的理解基于以下几篇文章：

https://www.jianshu.com/p/3fb493c32a45

https://segmentfault.com/a/1190000014546205?utm_source=tag-newest

https://www.jianshu.com/p/81ef7e7094e8

图片描述

我们想要实现这种布局，要分为两个部分的代码，一是html大哥，二是css代码。

css样式默认加载顺序：样式表的元素选择器选择越精确，则其中的样式优先级越高；
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高。

所以我们在写html代码时，要将中间块写在前面。

<div id="header"></div>
<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
<div id="footer"></div>

先对container进行设置，留出左右宽度

#container {
  padding-left: 200px; 
  padding-right: 150px;
}

然后设置三个块皆为float，脱离文档流。同时设置每个块的宽度。float按顺序进行排列。

#container .column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px; 
}

#right {
  width: 150px; 
}

#footer {
  clear: both;
}

以上的代码很好理解，但是接下来的两行代码就变得难以理解起来。

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}

margin-left元素为负值时，可以实现左边块元素移动。往左移的时候如果数值为百分比，那它的左移是根据父容器的宽度定的。因为我们前面定义了padding左右的大小。所以，当margin-left为100%时，

图片描述

left就会移动到中间块组的最左边。

这时候，我们要让绿色块再往左移动200个px，所以它的位置应该为relative，relative相对于前面的位置再左移200px。

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

right也是这样实现。

来源：CSDN

作者：艾米栗写代码

链接：https://blog.csdn.net/qq_34539486/article/details/104202339

标签

前端