css篇-页面布局-三栏布局

css篇-页⾯布局-三栏布局1. 页⾯布局
题⽬：假设⾼度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间⾃适应。

1)浮动
2)绝对定位
3)Flexbox
4)表格布局
5)⽹格布局(CSS3的Grid布局)
代码：
通⽤样式：
<style>
html * {
padding:0;
margin:0;
}
.layout article div {
min-height: 100px;
}
</style>
1) 浮动
layout.html：
<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: yellow;
}
</style>
<article class="left-right-center">
<div class="left">
</div>
<div class="right">
</div>
<div class="center">
<h1>浮动解决⽅案</h1>
1.这是三栏布局中间部分
</div>
</article>
</section>
2) 绝对定位
<section class="layout absolute">
<style>
.layout.absolute .left-center-right > div { position: absolute;
}
.layout.absolute .left {
left:0;
width: 300px;
background: red;
}
.layout.absolute .center {
left: 300px;
right: 300px;
background: yellow;
}
.layout.absolute .right {
right:0;
width: 300px;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>绝对定位解决⽅案</h2>
1.这是三栏布局绝对定位中间部分
2.这是三栏布局绝对定位中间部分 </div>
<div class="right"></div>
</article>
</section>
3) Flexbox
<section class="layout flexbox">
<style>
.layout.flexbox .left-center-right {
display: flex;
}
.layout.flexbox .left {
width: 300px;
background: red;
}
.layout.flexbox .center {
flex: 1;
background: yellow;
}
.layout.flexbox .right {
width: 300px;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>flexbox解决⽅案</h2>
1.这是三栏布局flexbox中间部分
2.这是三栏布局flexbox中间部分
<div class="right"></div>
</article>
</section>
4) 表格布局
<section class="layout table">
<style>
.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: yellow;
}
.layout.table .right {
width: 300px;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>表格布局</h2>
1.这是三栏布局表格布局中间部分
2.这是三栏布局表格布局中间部分 </div>
<div class="right"></div>
</article>
5) ⽹格布局
<section class="layout grid">
<style>
.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: yellow;
}
.layout.grid .right {
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>⽹格布局解决⽅案</h1>
1.这是三栏布局⽹格布局中间部分
2.这是三栏布局⽹格布局中间部分
</div>
<div class="right"></div>
</article>
</section>
延伸：
1) 这五种⽅案各⾃有什么优点，有什么缺点？
浮动：常见的问题就是清除浮动，优点是兼容性⽐较好。

只要把清除浮动做的好，那么它的兼容性是⽐较好的。

因为浮动是脱离⽂档流的。

绝对定位：优点是快捷。

缺点是已经脱离⽂档流了，那么⼦元素也必须脱离⽂档流。

导致这个⽅案的有效性是⽐较差的。

Flexbox布局：是⽐较完美的⼀个，尤其是在移动端，基本上都是使⽤flex布局。

表格布局：在很多场景中是⽐较适⽤的，表格布局的兼容性是⾮常好的。

可以兼容IE8，因为IE8是不⽀持flex的。

缺点是，当某⼀个单元格的⾼度变⾼时，其他的单元格的⾼度也会⾃⼰变⾼。

⽹格布局：⽹格布局是新出的技术。

2) 如果⾼度未知，中间的⾼度撑开了，需要左侧和右侧的⾼度也跟着撑开，那么刚才的五种⽅案，哪个还可以适⽤，哪个已经不可以⽤了？
如果去掉⾼度已知，哪个不再适⽤了呢？
3) 这五种⽅案的兼容性如何？最优的解决⽅案是哪⼀个？。