css篇-页面布局-三栏布局
- 页面布局
题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为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>
<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>
</section>
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) 这五种方案的兼容性如何？最优的解决方案是哪一个？
