终于收到了第一份面试邀请。
时间是下周一。 也是为了验证自己的修炼水平 进行一下知识整理 顺带 查漏补缺 也给后来的同学 提供一些参考
我们用实例来总结：
假设 进行三栏布局 左右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 也是一种遗憾吧
第四种 表格布局大家都在摒弃 但是我用的挺顺手的
第五种：网格布局 感觉很简便 但是不熟悉 刚刚查的
大家还有什么好方法 或我哪里说的不对的请斧正
原文地址：https://www.cnblogs.com/dash-soap/p/10013720.html
时间： 2024-10-11 17:38:52