背景
在前端面试中,面试官出于对css基础的考察,通常会问一个三栏布局的问题,即:页面上有三个区域,如何实现左右宽500px,中间宽度自适应,通常我们会答出来一两种方法,但是其实有五种方法,如果都答出来,肯定是加分的,接下来我会一一介绍这五种方法
基础布局
我们先新建html
,建立三个div,用不同的背景颜色表示,左右div宽度设置成500px,为了方便展示,高度设为600px
<div class="container">
<div class="left" style="background-color: #ff0000;"></div>
<div class="middle" style="background-color: #fff000;"></div>
<div class="right" style="background-color: #00ff00;"></div>
</div>
<style>
div {
height: 600px;
}
.left, .right {
width: 500px;
}
</style
float 浮动 + calc
不同于两栏布局可以左侧浮动,右侧空值,三栏需要中间实现自适应的话使用 css3
的 calc
.left {
float: left;
}
.middle {
width: calc(100% - 1000px);
float: left;
}
.right {
float: right;
}
绝对定位
使用绝对定位 position: absolute
达到效果
.container {
position: relative;
}
.left {
position: absolute;
left: 0;
}
.middle {
margin: 0 500px;
}
.right {
position: absolute;
right: 0;
top: 0;
}
flex 布局
弹性布局则要简单的多,中间设置flex:1,自动延伸就可以了,这也是目前我们在实际业务中最常用的方法
.container {
display: flex;
}
.middle {
flex: 1;
}
表格自动铺满布局
.container {
display: table;
table-layout: fixed;
width: 100%;
}
.left {
display: table-cell;
}
.middle {
display: table-cell;
width: auto;
}
.right {
display: table-cell;
}
css3 grid 布局
.container {
display: grid;
grid-template-columns: 500px auto 500px
}
grid 布局是最简单的,根本不用进行额外的宽度设置,grid 意思是网格布局,是css3 推出的一种强大的栅格布局方案,之后我们会专门出一期来讲解grid的使用,敬请期待吧。