假设高度已知，写出三栏布局，其中左右栏宽度各为300px;中间自适应
1.使用float实现三栏布局：
<div class='outer'>
<div class='l-float'></div>
<div class='r-float'><div>
<div class='center'></div>
</div>
<style>
.outer{min-width:600px; height:100px;} .outer>div{height:100%;}
.l-float,.r-float{width:300px;}
.l-float{float:left; background-color: antiquewhite;}
.r-float{float:right; background-color:cadetblue;}
.center{background-color:deepskyblue;}
</style>2. absolute position实现三栏布局:
<div class='container'>
<div class='left'></div>
<div class='center'><div>
<div class='right'></div>
</div>
<style>
.outer{min-width:600px; position:relative;}
.outer>div{height:100px;}
div.left{background-color:cyan;width:300px;}
div.right{background-color:darkmagenta;width:300px;}
.left{position:absolute;top:0;left:0;}
.right{position:right;top:0;right:0;}
.center{position:absolute; top:0;left:300px;right:300px; background-color:gold;}
</style>3. flex-box实现三栏布局
<div class='container'>
<div class='left'></div>
<div class='center'><div>
<div class='right'></div>
</div>
<style>
div{height:100px;}
.left,.right{background-color:red;width:300px;}
.center{background-color:royablue;flex:1;}
.container{display:flex;}
</style>4. table layout实现三栏布局
<div class='table-container'>
<div class='left'></div>
<div class='middle'><div>
<div class='right'></div>
</div>
<style>
.table-container{width:100%;display:table;height:100px;}
.table-container>div{display:table-cell;}
.left,.right{width:300px;background-color:red;}
.middle{background-color:gold;}
</style>5. Grid layout实现三栏布局
<div class='grid-container'>
<div class='left'></div>
<div class='middle'><div>
<div class='right'></div>
</div>
<style>
.grid-container{width:100%;display:grid;grid-template-rows:100px;grid-template-columns:300px auto 300px;}
.table-container>div{display:table-cell;}
.left,.right{background-color:red;}
.middle{background-color:green;}
</style>面试官可能会就布局问题继续延申，比如每个方案的优缺点是什么这样的问题：
浮动方案：
|
缺点(局限性)： |
脱离文档流，需要清除浮动 如果处理不好，会带来挺多问题，比如高度塌陷等 |
|
优点： |
兼容性好， 只要清除浮动做的好，是没有什么问题的 |
绝对定位方案：
|
优点： |
快捷， 不同意出问题 |
|
缺点： |
可使用性比较差（因为布局还有子元素都脱离了文档流） |
flex-box方案：
|
优点： |
比较完美 |
|
缺点： |
不能兼容IE8及以下浏览器 |
table布局：
|
缺点： |
对搜索引擎不友好，灵活度不高 |
|
优点： |
兼容性好 |
grid布局：
|
优点： |
简易 |
|
缺点： |
|
两栏布局：左宽度固定，右自适应
1. flex-box实现两栏布局：
<section class='container'>
<article class='left'></article>
<article class='right'></article>
</section>
<style>
.container{display:flex;}
.left,.right{height:100vh;}
.left{background-color:green;width:200px;}
.right{background-color:red;width:100%}
</style>2. Absoulte position实现两栏布局
<section class='container'>
<article class='left'></article>
<article class='right'></article>
</section>
<style>
.container{position:relative;}
.left,.right{height:100vh;}
.left{background-color:green;width:200px;}
.right{background-color:red;position:absolute;top:0px;left:200px;width:100%}
</style>3. Grid实现两栏布局
<section class='container'>
<article class='left'></article>
<article class='right'></article>
</section>
<style>
.container{
display:grid;
grid-template-columns:200px auto;
grid-template-rows:100vh;
}
.left{background-color:green;}
.right{background-color:red;}
</style>4. table实现两栏布局
<section class='container'>
<article class='left'></article>
<article class='right'></article>
</section>
<style>
.container{
display:table;
width:100%;
table-layout:fixed;
}
.left,.right{display:table-cell;}
.left{background-color:green; width:200px;}
.right{background-color:red;}
</style>5. float+BFC 实现两栏布局
<section>
<article class='left'></article>
<article class='right'></article>
</section>
<style>
.left,.right{height:100vh;}
.left{background-color:green; width:200px;float:left;}
.right{background-color:red;overflow:hidden;}
</style>6. 左边使用float:left固定宽度，右边使用margin-left隔开自适应：
<section>
<article class='left'></article>
<article class='right'></article>
</section>
<style>
.left,.right{height:100vh;}
.left{background-color:green; width:200px;float:left;}
.right{background-color:red;margin-left:200px;}
</style>两栏布局：上高度固定，下自适应
1. flex-box实现两栏布局：
<section class='container'>
<article class='item1'>fixed height top</article>
<article class='item2'>自适应</article>
</section>
<style>
.container{display:flex;height:100vh;flex-direction:column;text-align:center;}
.item1{background-color:green;height:50px;}
.item2{background-color:red;height:100%}
</style>2. Grid实现两栏布局：
<section class='container'>
<article class='item1'>fixed height top</article>
<article class='item2'>自适应</article>
</section>
<style>
.container{display:grid;height:100vh;grid-template-rows:50px auto;text-align:center;}
.item1{background-color:green;width:100%;}
.item2{background-color:red;width:100%}
</style>水平居中
- 水平居中inline element/inline-block
element使用
text-align:center
<div style="width:250px;height:100px;background-color:#ccc;text-align:center">
<span> 行内元素水平居中 </span>
</div> 
2. 水平居中block element使用margin: 0 auto; ------>比如居中div
<div style="width:250px;height:100px;border:1px solid #ccc;text-align:center">
<div style="width:100px;height:50px;border:1px solid red; margin:0 auto"> 块级元素水平居中 </div>
</div> 
3. 绝对元素的水平居中：absoulte+transform:
<div class='outer'>
<div class='inner'>
I'm A absoluted
</div>
</div>
<style>
.outer{
height:100px;
width:200px;
position:relative;
background-color:#ccc;
}
.inner{
height:40%;
width:50%;
background-color:lightcoral;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%); /*这也是水平+垂直居中*/
}
</style>
4. 通用方法：flex+justify-content:center
5. 宽度不固定的浮动元素的水平居中：
<section>
<div class='outter'>
<div class='inner'>
这是一个宽度不确定的浮动元素
</div>
</div>
</section>
<style>
section{
height:100px;
width:500px;
background-color:lightcyan;
}
.outter{
border:2px solid #ccc;
float:left;
position:relative;
left:50%;/*相对于section的宽度计算的*/
}
.inner{
border:1px solid green;
float:left;
position:relative;
left:-50%;/*相对于.outter的宽度计算的*/
}
</style> 
6. 宽度固定的浮动元素的水平居中：
<body>
<div class='floatbox'>
这是一个宽度确定的浮动元素
</div>
</body>
<style>
body{
background-color:pink;
}
.floatbox{
width:200px;
background-color:lightblue;
text-align:center;
position:relative;
left:50%;
margin-left:-100px; /*浮动元素宽度的一半*/
}
</style> 
