三列布局面试题延伸

阅读 1561
收藏 118
2016-12-14
原文链接:www.jackpu.com

昨日和 @喻木大大聊面试的时候聊到了这个话题,其实这个问题挺常见的,不过自己面试到还没问过,问过自适应的等比正方形布局。不过聊到这个问题,下面就详细的说下解决思路和考察要点。希望下次不要被榆木童鞋刷掉了😂。

解决这个问题,先简单描述下具体的需求吧:

给出三列布局,左右两边宽度一定,比如120px啦,然后中间的自适应宽度,即浏览器随着窗口大小的变化而自动变化。

问题大致就是这些,其实思路很多,不过我们从css的发展说起吧。在不同的阶段给出不同的解决方法。

首先我们回到上个世纪,当css还没形成的时候,我们写页面,大家都知道依赖于table布局,所以我们可以用table去模拟这个情况,相信大家很快有思路咯。

this is center

当然这个思路肯定被淘汰啦,那我们回到CSS Level1。出现了box model以及float的使用。这个思路也是目前大多数解决方案中的一种。因为使用起来及极其方便,三个DIV少量的属性就解决了。左右浮动起来div然后中间用margin表示出间隔就好。

div{ height:100%;
}
.center-wrap{ margin:0 200px; }
.left-wrap,.right-wrap{ width:200px; background:#1ba1e2;
}
.left-wrap{ float:left;
}
.right-wrap{ float:right;
}

到了CSS Level2,我们可以巧妙的利用position 去完成这样的功能,同样就是使用绝对定位,让元素在分别两边现实。

div{ height:100%;
}
.center-wrap{ margin:0 200px; }
.left-wrap,.right-wrap{ position:absolute; top:0; width:200px; background-color:#1ba1e2;
}
.left-wrap{ left:0;
}
.right-wrap{ right:0;
}

当然我们现在步入了CSS3,如果不用考虑太多的兼容性,我们可以大胆的使用flex语法来实现这个功能.

我们让外部盒子支持flex,然后设置需要自适应的DIV flex:1;然后再通过order来实现对顺序的控制。

.container{ position:relative; display:flex;
}
div{ height:100%;
}
.center-wrap{ flex:1; order:2;
}
.left-wrap,.right-wrap{ width:200px; background:#1ba1e2;
}
.left-wrap{ order:1;
}
.right-wrap{ order:3;
}

HTML结构如下

this is center

当然我们还可以已经被纳入草案的CSS Grid

是CSS为布局新增的一个模块。网格布局特性主要是针对于Web应用程序的开发者。可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间,或者定义他们的大小、位置以及层级

CSS Grid(网格布局)算是相对目前实践较少的布局方案,来源浏览器支持的范围以及需要重新学习的新语法。由于浏览器支持问题,所以需要手动开启一些配置。

在Chrome浏览器中开启CSS Grid Layout模块功能比较简单,只需要在您的浏览器地址栏中输入:chrome://flags,回车后在列表清单中找到“启用实验性网络平台功能”(#enable-experimental-web-platform-features)

布局大致思路就是我们把 grid-template-columns 划分为

grid-template-columns: 200px auto 200px; --200 ---- auto ---- 200 |
| grid-template-rows 100%;
|
--200 ---- auto ---- 200 

然后给每个DIV指定 grid-area就好了。

.container{ position:relative; display:grid; grid-template-columns: 200px auto 200px; grid-template-rows: 100%; grid-template-areas: "lt cr rt"
}
div{ height:100%;
}
.center-wrap{ grid-area: cr;
}
.left-wrap{ grid-area: lt; background:#1ba1e2;
}
.right-wrap{ grid-area: rt; background:#1ba1e2;
}

* 确保你的浏览器开启支持了 CSS Grid *

虽然这个问题很简单,但是却十分基础,可以考验一个知识的扎实度和深度。所以希望能够帮助到大家,尤其最后一个解决思路,肯定会让你的面试官觉得你还是个好学的好孩子的。

评论