基础//页面布局总结

在这里插入图片描述

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 布局

猜你喜欢

转载自blog.csdn.net/weixin_37877794/article/details/114167204