​

 明天逛知乎日常搜寻了几个对于前端面试的问题，本认为学了 react 之类的框架就能够放弃 css，当初想想本人真是太天真了。老前辈们说过：“Css 你能够不把每一个属性全都记住，然而你肯定要在你须要的时候晓得去哪里找。”不过这句话有迷惑性，我再来改一下，常见的属性你肯定要记住，不常见，不常常应用的你须要记住有这个属性，在你看到这个属性的时候，你要晓得你见过，不要一头雾水一脸懵逼。

圣杯布局有好几种办法实现，它并不是只有一种固定格局.

最常见的圣杯布局 MDN 官网文档，基本上就是圣杯布局的大略思路.

页面 nav 占据最大的宽度，而后两边固定宽度，两头内容能够依据用户应用主动缩放。

​

1.flex 实现

​

如果要用 flex 实现的话 须要把 <nav > 和 footer 拿进去，给两头三个内容一个独自的父容器，给父容器一个 display:flex (或者有更好的办法不必拆散，然而目前我只想到了分离出来 nav 和 footer)​

 ​

 咱们要求的大略思路就是，nav 和 footer 占据用户屏幕的百分百宽度，两头内容分为三列，脑子里肯定要有一个清晰的网页轮廓。

​​ 

给左右两边定宽，而后给两头内容一个 flex：1, 这里左右两边的宽度也能够用 flex-basis 示意, 这里须要了解的点上 flex:1 这个中央，flex：number（代表着这个元素能够如何调配剩下的空间，因为左右默认值为 0, 我独自给 center 设置了 1，那么代表着 center 将单独享有剩下的所有空间，那么就实现了咱们想要的成果。）要留神的是 flex：1 是 flex 的简写模式，它的简写值能够有三个，在这里就不过多赘述. 自行查阅 mdn。

​

2. 负 margin 加浮动 (这个太经典了，倡议熟读百遍)

 ​

同样是这样的布局模式;

​

​ 通过下面简略的款式布局，呈现出页面成果如下（ 左右两边的空白是 content 的 padding，筹备放入 left 和 right 的 div 的，通常状况 padding 的值就是左右两边 sider 的宽度，个别是固定宽度, 你也能够设置 margin 来等效替换 padding，失去的布局成果是一样的）

 这时候咱们须要用到浮动来将咱们的左右元素挪动到相应的地位，​

这里为什么要 margin-100% 呢？你能够设想原本这三个元素应该是在同一行的，然而因为 center 盒子宽度满了，强行把 left 和 right 挤到下一行了，然而其实他们应该排在 center 盒子的最左边，因为 div 盒子是 center left right 这个上下文程序在 html 文档里写，\
咱们给右边盒子一个 -margin，留神 margin 是绝对于父亲元素来说的，我的 -100%，也就是紧挨着父亲元素的最右边，此时 left 盒子和 center 盒子的右边重合。这时候我须要右边盒子再往左挪动 300px，也就是父亲盒子为它空进来的宽度。​

!!!! 留神 float 是沿容器，容器，容器，并没有脱离父元素的限度!!!

（到这你应该也就晓得下一步要干什么了，对，咱们要让他脱离父亲元素的限度）

ok，第一工夫就应该想到应用 position 这个办法，那么 positon 的 relative 是最合适的，（如果你想达成用户滑动屏幕，左右栏固定的成果也能够用 absolute。absolute 的定位形式会去找上一层非 static 模式的盒子，始终找到浏览器窗口为止。）那么该左边盒子紧挨着 center 了 (肯定要留神这里的意思，原本左边盒子也是和 center 盒子紧挨着在同一行的）这时候给了一个负的本身的宽度，那么他就会向右边挪动，覆盖住 center200px 也就是本身宽度的值，然而这时候它还是没有解脱父元素的限度，所以也要用定位，让他向右偏移本身宽度的长度

​

​

最终全副 css 代码和后果如下

​

​

3. 双飞翼布局 (广购平台页面经典布局)

​

圣杯布局和双飞翼布局实现的款式是大抵基本相同的，只不过双飞翼布局的内容区用独自的 div 包裹，让这个 div 来承当浮动的角色。

​

​