由一个经典布局问题引发的思考

相信每个前端玩家在初学CSS的时候都遇到过这么一个问题:如何实现一个三栏布局。

假设高度已知,左栏右栏宽度各300px;中间自适应。

看似很简单的一个问题,但这么简单的一个问题,可以体现出一个前端玩家的段位水平。

初级玩家的回答:1.浮动;2.绝对定位。

中级玩家的回答:1.浮动;2.绝对定位;3.flexbox弹性盒子;4.表格布局;5.grid网格系统;6.栅格系统;

高级玩家的回答:你是不是很闲?(狗头)

好吧开个玩笑……但是现在正在看这段文字的你,是否思考过:

1.这么多方案,它们各自有什么优点和缺点?

2.如果把假设高度已知的条件去掉,哪些方案不适用了?

3.每一种-方案的兼容性如何,哪一种是最优的解决方案?

这些才是作为一个合格前端玩家应该去认真思考的问题。

原文地址:https://www.cnblogs.com/lemonmonster/p/9402762.html