博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
「面试题」如何实现一个圣杯布局?
阅读量:6206 次
发布时间:2019-06-21

本文共 2882 字,大约阅读时间需要 9 分钟。

前言

最近,有个朋友向我诉苦说,面试的时候突然被问到了如何实现布局和原理,有点懵。之前JavaScript的部分回答得挺好的,偏偏在这里翻船了,完全没有思路,后面的面试状态一落千丈。结局也如他所料,没有被录取。

我给这个朋友做了解答之后,回家整理出此文。希望其他小伙伴面试中,再被问及圣杯布局的时候,可以沉着作答。

本文将介绍经典布局——圣杯布局的原理以及两种实现方法:浮动和flex。

什么是圣杯布局?

圣杯布局是为了讨论「三栏液态布局」的实现,最早的完美实现是由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》 ,它主要讲述了网页中关于最佳圣杯的实现方法。

它有以下几点要求:

  • 上部(header)和下部(footer)各自占领屏幕所有宽度。
  • 上下部之间的部分(container)是一个三栏布局。
  • 三栏布局两侧宽度不变,中间部分自动填充整个区域。
  • 中间部分的高度是三栏中最高的区域的高度。

接下来,将会介绍两种实现的方法。它们的最终效果都一样,如下图:

1557854-20181228102227163-620007038.png

实现方法1:浮动

先上代码:

<div class="header">    <h4>header</h4></div><div class="container">    <div class="middle">        <h4>middle</h4>        <p>middle-content</p>    </div>        <div class="left">        <h4>left</h4>        <p>left-content</p>    </div>        <div class="right">        <h4>right</h4>        <p>right-content</p>    </div></div><div class="footer">    <h4>footer</h4></div>
.header, .footer {    border: 1px solid #333;    background: #ccc;    text-align: center;}.footer {    clear: both;}.container {    padding:0 220px 0 200px;    overflow: hidden;}.left, .middle, .right {    position: relative;    float: left;    min-height: 130px;}.middle {   width: 100%;    background: blue;}.left {    margin-left: -100%;    left: -200px;    width: 200px;    background: red;}.right {    margin-left: -220px;    right: -220px;    width: 220px;    background: green;}

解析一下思路:

  • 在html中,先定义好header和footer的样式,使之横向撑满。
  • 在container中的三列设为浮动和相对定位(后面会用到),middle要放在最前面,footer清除浮动。
  • 三列的左右两列分别定宽200px和220px,中间部分middle设置100%撑满
  • 这样因为浮动的关系,middle会占据整个container,左右两块区域被挤下去了
  • 接下来设置left的 margin-left:-100%;,让left回到上一行最左侧
  • 但这会把middle给遮住了,所以这时给外层的container设置 padding:0 220px 0 200px;,给left空出位置
  • 这时left并没有在最左侧,因为之前已经设置过相对定位,所以通过 left:-200px; 把left拉回最左侧
  • 同样的,对于right区域,设置 margin-right:-220px; 把right拉回第一行
  • 这时右侧空出了220px的空间,所以最后设置 `right:-220px;##把right区域拉到最右侧就行了。

实现方法2:flex弹性盒子

用弹性盒子来实现圣杯布局特别简单,只需要把中间的部分用flex布局即可。

<div class="header">    <h4>header</h4></div><div class="container">    <div class="left">        <h4>left</h4>        <p>left-content</p>    </div>        <div class="middle">        <h4>middle</h4>        <p>middle-content</p>    </div>        <div class="right">        <h4>right</h4>        <p>right-content</p>    </div></div><div class="footer">    <h4>footer</h4></div>
.header, .footer {    border: 1px solid #333;    background: #ccc;    text-align: center;}.container {    display: flex;}.left {    width: 200px;    background: red;}.middle {    flex: 1;    background: blue;}.right {    width: 220px;    background: green;}

解析一下思路:

  • header和footer同上面一样,横向撑满。footer不用再清浮动了
  • container中的left、middle、right依次排布即可,不用特意将middle放置到最前面
  • 给container设置弹性布局 display:flex;
  • left和right区域定宽,middle设置 flex:1; 即可

总结

总的来说,弹性布局是最适合实现圣杯布局的方法了,相较浮动,弹性布局的结构更清楚,更好理解,也不用担心移动端的适配问题。

而浮动的方法,在面试中可能会遇到,主要考察对布局的理解能力。所以,建议大家可以把浮动的例子拷贝下来,自行模拟一把,以便加深理解。

参考文献

PS:欢迎关注我的公众号 “超哥前端小栈”,交流更多的想法与技术。

1557854-20181228102240565-1718728335.jpg

来源:

转载于:https://www.cnblogs.com/lovellll/p/10188989.html

你可能感兴趣的文章
JavaScript 数据类型
查看>>
量子通信和大数据最有市场突破前景
查看>>
StringBuilder用法小结
查看>>
UVa 10252-Common Permutation
查看>>
CSS - 修改input - placeholder 和 readonly 的样式
查看>>
android studio :cannot resolve symbol R
查看>>
paper 20 :color moments
查看>>
代码大全
查看>>
博客园作业4--数组
查看>>
DataTable.ImportRow()与DataTable.Rows.Add()的区别
查看>>
程序集、应用程序配置及App.config和YourSoft.exe.config .
查看>>
二叉树的基本操作及应用(三)
查看>>
A SimpleDataStore
查看>>
朱晔和你聊Spring系列S1E3:Spring咖啡罐里的豆子
查看>>
IOS CALayer的属性和使用
查看>>
温故而知新:柯里化 与 bind() 的认知
查看>>
查看修改swap空间大小
查看>>
Django REST framework
查看>>
CSS 如何让Table的里面TD全有边框 而Table的右左边框没有
查看>>
如何让帝国CMS7.2搜索模板支持动态标签调用
查看>>