三栏布局
- 问：那什么叫做三栏布局呢？
- 答：一般将左右两栏固定，中间宽度自适应称为三栏布局
前言：一直说抽时间把三栏布局的代码总结一下，总一直没时间没时间，感觉自己犯了拖延症了，不能再拖了，再拖下去，都不知道啥时候才写这个呀！！！（怕不是真有拖延症了吧，快快行动起来）
本文规范：为了叙述方便，故以类名代表相应的元素
上课中：
第一种情况（定位：position）
- 利用绝对定位,左右两栏设置为绝对定位,中间设置对象方向的margin值
CSS代码
.outer{
position: relative;
height: 100px;
color: white;
}
.left,
.right{
position: absolute;
}
.left{
width: 100px;
height: inherit;
background: rgb(177, 177, 226);
}
.center{
margin-left: 100px;
margin-right: 200px;
height: inherit;
background: black;
}
.right{
top: 0;
right: 0;
width: 200px;
height: inherit;
background: tomato;
}
HTML代码
- 结果
- 补充：定位为absolute的元素脱离文档流，不保留之前在文档流中的空间，他是浮在页面上，当与元素重叠时，默认在元素上边。
第二种情况（flex布局）
利用flex布局，中间使用（flex:1,其实使用的是flex-grow：占据剩余空间）
CSS代码
.outer{
height: 100px;
display: flex;
color: white;
}
.left{
width: 100px;
background: rgb(177, 177, 226);
}
.right{
width: 200px;
background: tomato;
}
.center{
flex-grow: 1;
background: black;
}
HTML代码
- 结果
第三种情况（浮动：float）
- 浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值。这种方式需要把中间一栏放到最后
CSS代码
height: 100px;
color: white;
font-size: 20px;
}
.left{
width: 100px;
height: inherit;
float: left;
background: rgb(177, 177, 226);
}
.right{
float: right;
width: 200px;
height: inherit;
background: tomato;
}
.center{
height: inherit;
margin-left: 100px;
margin-right: 200px;
background: black;
}
HTML代码
- 结果
第四种情况（圣杯布局）
- 补充：
- （margin：-100%直通车）http://www.qiutianaimeili.com/html/page/2017/07/ggz1hvn43qi.html
- （margin负值详解直通车）https://www.jianshu.com/p/6e4f5de683ae
CSS代码
.outer{
height: 100px;
padding-left: 100px;
padding-right: 200px;
color: red;
font-size: 20px;
}
/* 相对自己在页面一开始位置定位(有待考证) /
/ 上边因为已经被占满，所以自己被挤下来了 /
.left{
position: relative;
left: -100px;
/ 浮动没上去我认为是宽度不够 */
float: left;
margin-left: -100%;
width: 100px;
height: 100px;
background: tomato;
}
.right{
position: relative;
left: 200px;
float: right;
margin-left: -200px;
width: 200px;
height: 100px;
background: rgb(185, 156, 212);
}
.center{
float: left;
width: 100%;
height: 100px;
background: black;
}
HTML代码
- 结果
第五种情况（双飞翼布局）
CSS代码
.outer{
height: 100px;
color: white;
font-size: 20px;
}
.left{
float: left;
margin-left: -100%;width: 100px;
height: 100px;
background: tomato;
}
.right {
float: left;
margin-left: -200px;width: 200px;
height: 100px;
background: gold; }
.content{
margin-left: 100px;
margin-right: 200px;
height: inherit;
}
.center {
float: left;
width: 100%;
height: 100px;
background: lightgreen;
}
HTML代码
- 结果
