三栏布局：
如果不考虑高度，即用内容填充高度的话，是可以用inline-block和calc（）实现布局的。但适用性差。
float和position的兼容性好，但float会用到calc属性影响兼容性。
calc和flex的兼容性都有一定问题。
grid是未来的发展趋势所以兼容性拉跨也很合理吧，哈哈
body
<body>
<div class="out">
<div class="item left"></div>
<div class="item mid"></div>
<div class="item right"></div>
</div>
</body>
float实现
点我查看代码
.item{
float: left;
height: 400px;
}
.left,.right{
width: 200px;
background-color: antiquewhite;
}
.mid{
width: calc(100% - 400px);
background-color: aqua;
}
重点：使用了calc计算了中间宽度
absolute实现
点击查看代码
.out{
position: relative;
}
.item{
top:0;
position: absolute;
height: 400px;
}
.left{
background-color:antiquewhite;
width: 200px;
left: 0;
}
.right{
background-color: antiquewhite;
width: 200px;
right: 0;
}
.mid{
width: calc(100% - 400px);
left: 200px;
background-color: aqua;
}
重点：同样可使用calc计算宽度，但也可以通过ps的方法达到更好的兼容性
ps. mid也可以通过left：200px；right：200px实现
flex实现
点击查看代码
.out{
display: flex;
height: 400px;
}
.left,.right{
width: 200px;
background-color: antiquewhite;
}
.mid{
flex:auto;
background-color: aqua;
}
用flex:auto实现自适应
table实现
点击查看代码
.out{
display: table;
height: 400px;
width: 100%;
}
.item{
display:table-cell;
}
.left,.right{
width: 200px;
background-color: antiquewhite;
}
.mid{
width: calc(100% - 400px);
background-color: aqua;
}
用calc实现自适应
grid布局
点击查看代码
.out{
display: grid;
grid-template-rows: 400px;
grid-template-columns: 200px auto 200px;
}
.left,.right{
background-color: antiquewhite;
}
.mid{
background-color: aqua;
}
用grid-template-rows的auto属性实现自适应
本随笔参考b站前端小夏老师有关布局视频进行实践，仅做个人记录，十分感谢前辈们的分享
标签：常用,color,width,五种,background,left,calc,css,200px From： https://www.cnblogs.com/badpear/p/16821949.html