左右固定中间自适应

一.浮动

左右浮动且w=300px，然后中间啥都不设置即可。

【注意：中间啥都不设置，实际上中间这个div是会伸到两边两个浮动的div下面的，只是说，两边的两个div浮动起来，挡住了中间那个div，所以才会显示在最上面。】

【大div高度为300px，所以中间div高度默认为300px，然后大div宽度默认继承浏览器宽度，所以中间div的宽度也跟大div宽度一样】

 

 

二.定位

定位的话，有2种方法，

1.两边绝对定位，中间设置高度即可。【中间div不然为绝对定位、不然right和left写在一起】

2.两边绝对定位，中间设置margin-left和margin-right均为300px。【中间div不然为绝对定位、不然right和left写在一起】

【为什么要写在一起？因为浮动或者绝对定位的div，是无法漂浮在一个在它前面的block上面的】

 

三.flex

最外围div设置为display:flex

中间div设置为flex:1

 

四.table

最外层div设置为display:table，里面三个子div设置为display:table-cell

中间那个设置一下高度啥都不设置，左右两边设置一下宽高。

【原理，最外层是table，然后是三个table-cell，就是三列，那么浏览器会默认给我们加上一行】

 

五.grid

grid其实就是一个简化版的flex，布局也类似于table，只不过它的css样式要比table少很多

 

 

 

优缺点总结：

五种方案的优点和缺点

绝、浮、felx、table、grid

兼容性:

绝、浮、【兼容性非常好】

felx、table、grid【旧版浏览器不支持】

维护性：

felx、table、grid【写法简单，而且布局格式友好】

绝、浮【浮动和绝对定位会脱离文档流，对于一些消除浮动，或者其他的排版，需要调整样式】

 

 

高度未知

由div的内容而定，也就是说当div内容变大，对应的这一行的所有div都需要被撑开。

那么之前哪些方案不行了？

处理：最外层的div的高度去掉，添加很多的p标签来撑开最外层的div.

 

1.浮动和定位：

浮动和定位，因为左右两边是不占据文档流的，所以中间变长，那么两边不会随着变长。