先从一个题目出发：
假设高度已知，请写出三栏布局，其中左栏、右栏 宽度各为300px，中间自适应。
三栏布局——左右宽度固定，中间自适应
思考：一共有多少种实现方式？
不废话，直接上代码：
<style>
* {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
</style>
<body>
<!-- 三栏布局：左右宽度固定，中间自适应 start -->
<section class="layout float">
<style>
.layout.float .left {
float: left;
width: 300px;
background: red;
}
.layout.float .right {
float: right;
width: 300px;
background: blue;
}
.layout.float .center {
background: pink;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
1.中间部分
2.中间部分
</div>
</article>
</section>
<section class="layout absolute">
<style>
.layout.absolute {
margin-top: 20px;
}
.layout.absolute .left-right-center>div {
position: absolute;
}
.layout.absolute .left {
left: 0;
width: 300px;
background: red;
}
.layout.absolute .center {
left: 300px;
right: 300px;
background: pink;
}
.layout.absolute .right {
right: 0;
width: 300px;
background: blue;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="center">
<h1>绝对定位解决方案</h1>
1.中间部分
2.中间部分
</div>
<div class="right"></div>
</article>
</section>
<section class="layout flex">
<style>
.layout.flex {
margin-top: 140px;
}
.layout.flex .left-right-center {
display: flex;
}
.layout.flex .left {
width: 300px;
background: red;
}
.layout.flex .center {
flex-grow: 1;
background: pink;
}
.layout.flex .right {
width: 300px;
background: blue;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="center">
<h1>flex定位解决方案</h1>
1.中间部分
2.中间部分
</div>
<div class="right"></div>
</article>
</section>
<section class="layout table">
<article class="left-center-right">
<style>
.layout.table {
margin-top: 20px;
}
.layout.table .left-center-right {
width: 100%;
display: table;
height: 100px;
}
.layout.table .left-center-right>div {
display: table-cell;
}
.layout.table .left {
width: 300px;
background: red;
}
.layout.table .center {
background: pink;
}
.layout.table .right {
width: 300px;
background: blue;
}
</style>
<div class="left"></div>
<div class="center">
<h1>表格布局解决方案</h1>
1.中间部分
2.中间部分
</div>
<div class="right"></div>
</article>
</section>
<section class="layout grid">
<article class="left-center-right">
<style>
.layout.grid {
margin-top: 20px;
}
.layout.grid .left-center-right {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left {
background: red;
}
.layout.grid .center {
background: pink;
}
.layout.grid .right {
background: blue;
}
</style>
<div class="left"></div>
<div class="center">
<h1>grid解决方案</h1>
1.中间部分
2.中间部分
</div>
<div class="right"></div>
</article>
</section>
<!-- 三栏布局：左右宽度固定，中间自适应 end -->
</body>
页面展示效果如图：
image.png
思考：这五中解决方案的优缺点各是什么，如果高度不已知，哪个方案不适用了，兼容性如何？
1.浮动:清除浮动处理的好的话，兼容性好。
2.绝对定位：快捷，但布局脱离文档流，下面所有子元素也都脱离文档流。
3.flex：比较完美的解决方案。
4.table：兼容性较好，但场景应用受限。
5.grid：简单的代码可实现复杂的场景，但兼容性不好。
超出高度的情况下，flex布局和table布局仍可使用，其他的不可。
由此问题引出：
三栏布局——上下高度固定，中间自适应如何实现？
<!-- 三栏布局：上下高度固定，中间自适应 start -->
<section class="container absolute">
<style>
.container.absolute .top-center-bottom>div {
position: absolute;
width: 100%;
}
.container.absolute .top {
top: 0;
height: 100px;
background: blue;
}
.container.absolute .center {
top: 100px;
}
.container.absolute .bottom {
bottom: 0;
height: 100px;
background: gray;
}
</style>
<article class="top-center-bottom">
<div class="top">头部</div>
<div class="center">
<h1>内容</h1>
<p>很多很多</p>
</div>
<div class="bottom">底部</div>
</article>
</section>
<section class="container flex">
<style>
.container.flex .top-center-bottom {
display: flex;
flex-direction: column;
height: 100vh;
}
.container.flex .top {
height: 100px;
background: blue;
}
.container.flex .center {
flex-grow: 1;
}
.container.flex .bottom {
height: 100px;
background: gray;
}
</style>
<article class="top-center-bottom">
<div class="top">头部</div>
<div class="center">
<h1>内容</h1>
<p>很多很多</p>
</div>
<div class="bottom">底部</div>
</article>
</section>
<!-- 三栏布局：上下高度固定，中间自适应 end -->
两栏布局——左宽度固定，右自适应
<!-- 两栏布局：左宽度固定，右自适应 start -->
<section class="layout float">
<style>
.layout.float .left {
width: 300px;
float: left;
background: red;
}
.layout.float .right {
margin-left:300px;
background: blue;
}
</style>
<article class="left-right">
<div class="left">左侧</div>
<div class="right">右侧</div>
</article>
</section>
<section class="layout absolute">
<style>
.layout.absolute .left {
position: absolute;
width: 300px;
left: 0;
top: 0;
background: red;
}
.layout.absolute .right {
margin-left: 300px;
background: blue;
}
</style>
<article class="left-right">
<div class="left">左侧</div>
<div class="right">右侧</div>
</article>
</section>
<!-- 两栏布局：左宽度固定，右自适应 end -->
