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