1 方案
不管三栏布局、还是两栏布局,
只要左右布局的方式,多 float,(float、absolute、flex、table、grid);
上下布局的方式,没有 float,(absolute、flex、table、grid)。
2 各方案有什么优缺点?
1)浮动 float
优:简单
缺:脱离文档流,需结合BFC应用
注意:需把浮动的块级写在前面!!!float在左右布局中才有用
diaplay: left/right
2)绝对定位 absolute
优:简单
缺:脱离文档流,需结合BFC应用,代码较多
父 position: relative;
子 position: absolute;
3)flex 布局
优:简单快捷,兼容性好,解决浮动和绝对定位的缺点
父 diaplay: flex;
子 flex: 1; //=flex: 1 1 0;
4)table 布局
优:兼容性较好
缺:每一列高度会同时变化;表格需先渲染,延迟页面生成速度
注意:设置为“display:table”的块级需要设置width:100%
父 display: talble;
子 display: table-cell;
5)grid 布局
优:可实现多行多列的二维复杂操作,兼容性较好,简化代码
父
display: grid;
grid-template-rows: 100px;
grid-template-columns: 10px 20px auto;
3 题中某些条件去掉后,哪些方案还能用?哪些不能了?
以 ‘三栏布局:已知高度为100px,左右宽度固定,中间自适应’ 为例,
若去掉“高度固定”的条件,增加中间栏输入的内容,哪些还能用而哪些不能用?
-float不能用,中间的内容太多会往左栏挤
-absolute不能用,中间内容会往下往外挤
-flex可以用,左右两栏会跟着中间栏适应撑开
-table布局可以用,左右中间都会自动撑开
-grid布局不能用,高度没有撑开
4 哪个方案的兼容性最好?
flex 布局、grid 布局