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>

<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)       这五种方案的兼容性如何？最优的解决方案是哪一个？