前端面试技巧和注意事项_前端面试必备技巧（一）页面布局

题目一、假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应，写出多种解决方法

回答：第一种方法：浮动解决方案

.layout article div{min-height:100px;}

.layout.float .left{float: left;background: red;width: 300px;}

.layout.float .right{float: right;background: blue;width: 300px;}

.layout.float.center{background: green;}

浮动解决方案

1.这是三栏布局中间部分2.这是三栏布局中间部分

第二种方法：绝对定位

.layout article div{min-height:100px;position: absolute;}

.layout.absolute .left{left:0;background: red;width: 300px;}

.layout.absolute .right{right:0;background: blue;width: 300px;}

.layout.absolute .center{left: 300px;right: 300px;background: green;}

浮动解决方案

1.这是三栏布局绝对定位部分2.这是三栏布局绝对定位部分

第三种方法：flex布局

.layout.flexbox .left-right-center{display: flex;}

.layout article div{min-height:100px;}

.layout.flexbox .left{background: red;width: 300px;}

.layout.flexbox .right{background: blue;width: 300px;}

.layout.flexbox .center{flex:1; background: green;}

浮动解决方案

1.这是三栏布局flexbox中间部分2.这是三栏布局flexbox中间部分

第四种方法：table表格布局

.layout.table .left-right-center{display:table;width: 100%;min-height:100px;}

.layout article div{display: table-cell;}

.layout.table .left{background: red;width: 300px;}

.layout.table .center{background: green;}

.layout.table .right{background: blue;width: 300px;}

table表格布局解决方案

1.这是表格布局中间部分2.这是表格布局中间部分

第五种方法：网格布局

.layout.grid .left-right-center{display:grid;width: 100%;grid-template-rows: 100px;grid-template-columns: 300px auto 300px;}

.layout.grid .left{background: red;}

.layout.grid .center{background: green;}

.layout.grid .right{background: blue;}

grid网格布局解决方案

1.这是网格布局中间部分2.这是网格布局中间部分