页面布局
题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为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.两栏布局
左宽度固定，右自适应
右宽度固定，左自适应
上高度固定，下自适应
下高度固定，上自适应
网友评论