实现三栏布局的8种方式
三栏布局：两侧宽度固定，中间宽度自适应的
公共样式
* {
padding: 0;
margin: 0;
height: 100%;
}
.left {
width: 200px;
background-color: aqua;
}
.right {
width: 200px;
background-color: burlywood;
}
.main {
background-color: chartreuse;
}
1. 浮动布局
左右模块各自向左右浮动，并设置中间模块的 margin 值使中间模块宽度自适应
- 优点：简单易懂
- 缺点：主要内容无法最先加载，当页面内容较多时会影响用户体验
Left
Right
Main
2. 定位布局
- 优点：简单易懂，并且主要内容可以优先加载
- 缺点：容器脱离了文档流，高度未知的时候，会有问题
Main
Left
Right
3. flex布局
- 优点：简单实用，未来的趋势
- 缺点：需要考虑浏览器的兼容性
Left
Main
Right
4. 表格布局
- 优点：兼容性很好，当内容溢出时会自动撑开父元素
- 缺点：seo不友好
Left
Main
Right
5. 网格布局
- 优点：CSS新标准，创建网格布局最强大和最简单的工具，可以将页面分成具有简单属性的行和列
- 缺点：有兼容性问题
Left
Main
Right
6. calc函数布局
- 优点：计算出main的宽度，简单粗暴
- 缺点：css3属性有兼容性问题
- 注意：calc() 的使用注意点： 运算符前后都需要保留一个空格
width: calc(100%-400px);这样“-”号后面没有空格是错误的
Left
Main
Right
7. 圣杯布局
利用的是浮动元素 margin 负值的应用
- 优点：主体内容可以优先加载
- 缺点：CSS理解起来难一点
Main
Left
Right
8. 双飞翼布局
与圣杯布局很像，但多了一层div嵌套
- 优点：主体内容可以优先加载
- 缺点：HTML 代码结构稍微复杂点。
Main
Left
Right