css经典布局——圣杯布局

         圣杯布局和双飞翼布局一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》。 比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，能够说是灵感来自于页面渲染。

效果图

本来录制了一个小视频，奈何不能上传到博客中，视频中经过缩放页面能够发现随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子宽度固定不变，即便页面宽度变小，也不影响咱们的浏览。注意：为了安全起见，最好仍是给body加一个最小宽度!

​

圣杯布局要求

• header和footer各自占领屏幕全部宽度，高度固定。
• 中间的container是一个三栏布局。
• 三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
• 中间部分的高度是三栏中最高的区域的高度。

圣杯布局的三种实现

【1】浮动

• 先定义好header和footer的样式，使之横向撑满。

• 在container中的三列设为浮动和相对定位(后面会用到)，center要放在最前面，footer清除浮动。

• 三列的左右两列分别定宽200px和150px，中间部分center设置100%撑满

• 这样由于浮动的关系，center会占据整个container，左右两块区域被挤下去了

• 接下来设置left的 margin-left: -100%;，让left回到上一行最左侧

• 但这会把center给遮住了，因此这时给外层的container设置 padding-left: 200px;padding-right: 150px;，给left和right空出位置

• 这时left并无在最左侧，由于以前已经设置过相对定位，因此经过 left: -200px; 把left拉回最左侧

• 一样的，对于right区域，设置 margin-left: -150px; 把right拉回第一行

• 这时右侧空出了150px的空间，因此最后设置 right: -150px;把right区域拉到最右侧就好了。

  body { min-width: 550px; font-weight: bold; font-size: 20px; } #header, #footer { background: rgba(29, 27, 27, 0.726); text-align: center; height: 60px; line-height: 60px; } #footer { clear: both; }

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

  #container .column { position: relative; float: left; text-align: center; height: 300px; line-height: 300px; }

  #center { width: 100%; background: rgb(206, 201, 201); }

  #left { width: 200px;
  right: 200px;
  margin-left: -100%; background: rgba(95, 179, 235, 0.972); }

  #right { width: 150px;
  margin-left: -150px;
  right: -150px; background: rgb(231, 105, 2); }

  #header
  #center

  #left

  #right
  #footer

【2】flex弹性布局

• header和footer设置样式，横向撑满。

• container中的left、center、right依次排布便可

• 给container设置弹性布局 display: flex;

• left和right区域定宽，center设置 flex: 1; 便可

  body { min-width: 550px; font-weight: bold; font-size: 20px; } #header, #footer { background: rgba(29, 27, 27, 0.726); text-align: center; height: 60px; line-height: 60px; } #container { display: flex; } #container .column { text-align: center; height: 300px; line-height: 300px; } #center { flex: 1; background: rgb(206, 201, 201); } #left { width: 200px; background: rgba(95, 179, 235, 0.972); } #right { width: 150px; background: rgb(231, 105, 2); }
  #header
  #left

  #center

  #right
  #footer

【3】grid布局

如上图所示，咱们把body划分红三行四列的网格，其中有5条列网格线

• 给body元素添加display: grid;属性变成一个grid(网格)

• 给header元素设置grid-row: 1; 和 grid-column: 1/5; 意思是占据第一行网格的从第一条列网格线开始到第五条列网格线结束

• 给footer元素设置grid-row: 3; 和 grid-column: 1/5; 意思是占据第三行网格的从第一条列网格线开始到第五条列网格线结束

• 给left元素设置grid-row: 2; 和 grid-column: 1/2; 意思是占据第二行网格的从第一条列网格线开始到第二条列网格线结束

• 给center元素设置grid-row: 2; 和 grid-column: 2/4; 意思是占据第二行网格的从第二条列网格线开始到第四条列网格线结束

• 给right元素设置grid-row: 2; 和 grid-column: 4/5; 意思是占据第二行网格的从第四条列网格线开始到第五条列网格线结束

  body { min-width: 550px; font-weight: bold; font-size: 20px; display: grid; } #header, #footer { background: rgba(29, 27, 27, 0.726); text-align: center; height: 60px; line-height: 60px; } #header { grid-row: 1; grid-column: 1/5; } #footer { grid-row: 3; grid-column: 1/5; } .column { text-align: center; height: 300px; line-height: 300px; } #left { grid-row: 2; grid-column: 1/2; background: rgba(95, 179, 235, 0.972); } #center { grid-row: 2; grid-column: 2/4; background: rgb(206, 201, 201); } #right { grid-row: 2; grid-column: 4/5; background: rgb(231, 105, 2); }
  #header
  #left
  #center
  #right
  #footer

文章每周持续更新，能够微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料