前端面试准备--1.页面布局类

页面布局

题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应

1、float 绝对定位 flex-box 表格布局 网格布局
2、怎么去延伸拔高这些点

    初始化样式
    html *{
        padding:0;
        margin:0;
    }

一、float方法

    设置min-height:100px;
    左width:300px; float：left
    右width:300px; float：right
    中间background：red

二、position

    左中右都是position:absolute;
    左 left:0;  width:300px;
    中间 left:300px; right:300px;
    右  right:0; width:300px;

三、flex-box

    .left-center-right{display:flex} ---把容器设为flex布局
    左 width:300px;
    中 flex:1;--中间自适应的原理，中间等于1（剩下所有的宽度都给它）
    右 width:300px;

四、表格布局

    .left-center-right{display:table;height:100px}
    .left-center-right div{display:table-cell;}
    左width:300px; background:blue;
    中bacground:red;
    右width:300px; background:yellow;

五、网格布局

    .left-center-right{
    display:grid; //容器为网格
    width:100%; 
    grid-template-rows:100px; //行高100px
    grid-template-columns:300px  auto  300px; //3栏就是3列
    }

*怎么延伸：

1.这5种方案各自有什么优点和缺点？

float：
缺点：清除浮动，浮动以后脱离文档流，处理不好会带来很多问题，本身的局限性；
优点：兼容性比较好；把清除浮动和周边元素的关系处理好的话

position绝对定位：
好处：快捷，配合js使用不容易出问题；
缺点：布局已经脱离文档流了，就意味下面所有子元素也必须脱离文档流
，导致了这个方案的可使用性比较差。

flex布局：
为了解决上面两个方案的不足，比较完美（IE8不支持flex）

表格布局：
优点：轻易的做到，表格兼容性非常好，flex解决不了的（IE8不支持flex），
想实现同样效果可以用表格。
缺点：历史的诟病以外，其中某一个单元格的高度超出了的时候，
两侧的单元格也是要调整高度的；有时候的场景是不需要同时增高的；

网格布局：
可以做很多复杂的事情，代码量简化很多；（做为一个新的技术）

2.如果把假设高度已知去掉，考虑纵向，左右内容撑高了，中间也需要撑高； 哪个可以适用，哪个不可以用了？

    flex 和表格布局是可以通用的；
    
    float：为什么中间左右内容都超出来了？
    float的基本原理，它的内容向左浮动的时候，被左侧的块挡住了，
    所以它的文案在左边块的右边排的，当内容超出以后，它发现左侧没有遮挡物，
    也就是没有了float元素，就会向左排；
    （解决让文字在中间超出部分不转到左边，创建bfc）

3.这5中方案的兼容性如何，业务中选出最优的方案？

-------------页面布局小结：----------------

1.语义化要到位
2.页面布局理解深刻
3.css基础知识扎实
4.思维零花且积极上进
5.代码书写规范

--------------页面布局的变通---------------------

1.三栏布局
左右宽度固定，中间自适应
上下高度固定，中间自适应
2.两栏布局
左宽度固定，右自适应
右宽度固定，左自适应
上高度固定，下自适应
下高度固定，上自适应