样式问题

div居中

<div class="main">
     <div class="left"></div>
     <div class="center"></div>
     <div class="right"></div>
</div>

1，float属性

最普遍的方式。

2，绝对定位

 .main{
 position:absolute;
 }
 .left{
 left:0;
 width:300px;
 }
 .center{
 left:300px;
 right:300px;
 }
 .right{
 right:0;
 width:300px；}

需要脱离文档流，使用性较差，但是便捷

3,felx

 .main{
 display:flex;
 }
 .left{
 width:300px;
 }
 .center{
 flex:1;
 }
 .right{
 width:300px；}

不兼容ie8及以下

3,表格布局

 .main{
 display:table;
 width:100%;
 }
 .left{
 display:table-cell;
 width:300px;
 }
 .center{
  display:table-cell;
 }
 .right{
  display:table-cell;
 width:300px；}

兼容ie8 ，但是高度超出布局会错乱

4,网格布局

 .main{
 display:grid;
 width:100%;
 grid-template-rows:100px;
 grid-template-colums:300px auto 300px;
 }

新技术，代码更加简化