经典前端面试题

分享一个前端的经典面试题
页面布局篇
题目:假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应
我的代码如下
 
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{box-sizing: border-box;text-align: center;line-height:calc(100% * 30);}
.main{border:1px solid red;height: 500px;margin-top:100px;}
.left, .right{width:300px;border:1px solid blue;height: 100%;}
.center{border:1px solid green;height: 100%;}
/*
方法一  css3计算
.main{font-size: 0;}
.main>div{display:inline-block;font-size:12px;}
.center{width:calc(100% - 600px);}
方法二   flex-box
.main{display: flex;}
.center{flex:1;}
方法三  定位
.main{position: relative;}
.left, .right{position: absolute;top:0;z-index: 2;}
.left{left:0;}
.right{right:0;}
.center{margin:0 300px;}
方法四  浮动  需要center和right互换位置
.main{width:100%;overflow: hidden;}
.left{float:left;}
.center{margin:0 300px;}
.right{float:right;}
方法五  浮动+css3计算
.main{width:100%;overflow: hidden;}
.main>div{float:left;}
.main>div.right{float:right;}
.center{width:calc(100% - 600px);}
方法六: grid网格布局
.main{display:grid;grid-template-columns: 300px 1fr 300px;}
*/
</style>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>