三栏布局方法

1.浮动布局(float)2.绝对定位(absolute)3.伸缩布局(flex)4.表格布局(table)5.网格布局(grid) 题目：完成左中右三栏布局，高度100px，左右宽度200px，中间宽度自适应。

今天学习了关于三栏布局的五种方法，其中最常用的就是flex伸缩布局，其他的布局方法虽然也可以实现同样的效果，但是或多或少有些缺点，但是本着多学点总是没错的精神，还是都了解一下。

1.浮动布局(float)

float浮动布局的优点是兼容性比较好，但是其脱离Dom流的特性导致使用起来需要兼顾其他模块的位置变化，有时会显得比较麻烦。 重点是不设置中间盒子的宽度，由于是块级元素，所以宽度会自动撑开

* { margin: 0; padding: 0; } .box { width: 100%; height: 100px; } .box div { height: 100px; } .box>.right { float: right; width: 200px; background-color: red; } .box>.left { float: left; width: 200px; background-color: blue; } .box>.center { background-color:green; }

2.绝对定位(absolute)

absolute绝对定位的好处是方便快捷，直接写位置当然最准确，但是同样存在脱离文档流导致其他模块出现混乱的缺点 重点是中间盒子左右距离都设置成200px将其撑开

*{ margin: 0; padding: 0; } .box { width: 100%; height: 100px; } .box div { position: absolute; height: 100px; } .box>.right { right: 0px; width: 200px; background-color: red; } .box>.left { width: 200px; background-color: blue; } .box>.center { left: 200px; right: 200px; background-color:green; }

3.伸缩布局(flex)

flex伸缩布局是实际项目中最常见的布局方式了，优先考虑，唯一的瑕疵就是兼容性有些问题。 重点是中间盒子 flex：1，使其宽度撑开

*{ margin: 0; padding: 0; } .box { display: flex; width: 100%; height: 100px; } .box div { height: 100px; } .box>.left { width: 200px; background-color: blue; } .box>.center { flex: 1; background-color:green; } .box>.right { width: 200px; background-color: red; }

4.表格布局(table)

表格布局是H5不建议使用的布局方式，但是在这个应用场景下，表格布局还是可以完美完成任务的，但是其已经过时，操作繁琐的缺点导致不建议使用。 优点：兼容性很好O(∩_∩)O 重点是 父盒子display:table，子盒子 display: table-cell ，中间盒子不设宽度，将其撑开

*{ margin: 0; padding: 0; } .box { display: table; width: 100%; height: 100px; } .box div { display: table-cell; } .box>.left { width: 200px; background-color: blue; } .box>.center { background-color:green; } .box>.right { width: 200px; background-color: red; }

5.网格布局(grid)

网格布局是最新技术（也不算新了吧…） 明显代码简化了很多呀有木有 但是新技术都存在这个问题，兼容性兼容性兼容性… 重点是。。。额好像没什么重点，就几条代码-。-

*{ margin: 0; padding: 0; } .box { display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns: 200px auto 200px; } .box>.left { background-color: blue; } .box>.center { background-color:green; } .box>.right { background-color: red; }