标签：前端知识 两种 代码 页面 缺陷 解决 enter head red
终于收到了第一份面试邀请。
时间是下周一。 也是为了验证自己的修炼水平 进行一下知识整理 顺带 查漏补缺 也给后来的同学 提供一些参考
我们用实例来总结：
假设 进行三栏布局 左右300px 中间自适应 我们有几种解决方案呢？
第一种，我们用float
第二种，我们用绝对布局
以上两种过于简单 不解释了
第三种，就是flaxbox了
flexbox就是我心目中的最佳解决方案了，很多坑都是用flex来解决的
代码如下：
<head> html *{ display:flax; } .left{ width:300px; } .center{ flex:1; background:red; } .right{ width:300px; } </head> <body> <div class="left"></div> <div class="center"> <h2>flexbox解决方案</h2> </div> <div class="right"></div> </body>
给所有HTML加上flax 然后给中间的加flax=1就行了 没有特别写的呢 默认都是0
第四种：表格布局。
解决思路就是给三个块加一个总width：100% 然后左右各300px 中间就是剩下的也是自适应
第五种 网格布局 这个我也不是很熟悉
width:100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
貌似这样加上所有块的cdd就行了
总结一下：第一种第二种有各种缺憾 flax布局就是用来解决他们俩的缺陷的 但是flax比较新 我查了一下 兼容到IE10 也是一种遗憾吧
第四种 表格布局大家都在摒弃 但是我用的挺顺手的
第五种：网格布局 感觉很简便 但是不熟悉 刚刚查的
大家还有什么好方法 或我哪里说的不对的请斧正
标签：前端知识 两种 代码 页面 缺陷 解决 enter head red
原文地址：https://www.cnblogs.com/dash-soap/p/10013720.html
