题目:完成左中右三栏布局,高度100px,左右宽度200px,中间宽度自适应。
今天学习了关于三栏布局的五种方法,其中最常用的就是flex伸缩布局,其他的布局方法虽然也可以实现同样的效果,但是或多或少有些缺点,但是本着多学点总是没错的精神,还是都了解一下。
1.浮动布局(float)
float浮动布局的优点是兼容性比较好,但是其脱离Dom流的特性导致使用起来需要兼顾其他模块的位置变化,有时会显得比较麻烦。
重点是不设置中间盒子的宽度,由于是块级元素,所以宽度会自动撑开
* {
margin: 0;
padding: 0;
}
.box {
width: 100%;
height: 100px;
}
.box div {
height: 100px;
}
.box>.right {
float: right;
width: 200px;
background-color: red;
}
.box>.left {
float: left;
width: 200px;
background-color: blue;
}
.box>.center {
background-color:green;
}
2.绝对定位(absolute)
absolute绝对定位的好处是方便快捷,直接写位置当然最准确,但是同样存在脱离文档流导致其他模块出现混乱的缺点
重点是中间盒子左右距离都设置成200px将其撑开
*{
margin: 0;
padding: 0;
}
.box {
width: 100%;
height: 100px;
}
.box div {
position: absolute;
height: 100px;
}
.box>.right {
right: 0px;
width: 200px;
background-color: red;
}
.box>.left {
width: 200px;
background-color: blue;
}
.box>.center {
left: 200px;
right: 200px;
background-color:green;
}
3.伸缩布局(flex)
flex伸缩布局是实际项目中最常见的布局方式了,优先考虑,唯一的瑕疵就是兼容性有些问题。
重点是中间盒子 flex:1,使其宽度撑开
*{
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 100%;
height: 100px;
}
.box div {
height: 100px;
}
.box>.left {
width: 200px;
background-color: blue;
}
.box>.center {
flex: 1;
background-color:green;
}
.box>.right {
width: 200px;
background-color: red;
}
4.表格布局(table)
表格布局是H5不建议使用的布局方式,但是在这个应用场景下,表格布局还是可以完美完成任务的,但是其已经过时,操作繁琐的缺点导致不建议使用。
优点:兼容性很好O(∩_∩)O
重点是 父盒子display:table,子盒子 display: table-cell ,中间盒子不设宽度,将其撑开
*{
margin: 0;
padding: 0;
}
.box {
display: table;
width: 100%;
height: 100px;
}
.box div {
display: table-cell;
}
.box>.left {
width: 200px;
background-color: blue;
}
.box>.center {
background-color:green;
}
.box>.right {
width: 200px;
background-color: red;
}
5.网格布局(grid)
网格布局是最新技术(也不算新了吧…)
明显代码简化了很多呀有木有
但是新技术都存在这个问题,兼容性兼容性兼容性…
重点是。。。额好像没什么重点,就几条代码-。-
*{
margin: 0;
padding: 0;
}
.box {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 200px auto 200px;
}
.box>.left {
background-color: blue;
}
.box>.center {
background-color:green;
}
.box>.right {
background-color: red;
}