难度级别:初级及以上 提问概率:65%
前端面试中,布局类题目被问道的频次会非常高,这道题,我们通过以下四种方式来实现。
目录
1 使用flex布局
使用flex的弹性布局,将左右两边设置为justify-content: space-between,可以很轻松的实现效果,代码如下
HTML代码:
<div class="box">
<div class="left">居左</div>
<div class="center">中间</div>
<div class="right">居右</div>
</div>
CSS代码:
<style>
.box {
display: flex;
justify-content: space-between;
}
.left, .right {
width: 100px;
height: 100px;
border: 1px solid red;
}
.center {
width: 100%;
border: 1px solid blue;
}
</style>
2 使用绝对定位和margin配合的方式
左右使用绝对定位的方式,可以固定在两侧,同时这两个元素也已经脱离文档流,中间元素则可以占满一行,只要预留出左右margin值即可,margin值需要大于等于左右元素的宽度,代码如下
HTML代码:
<div class="box">
<div class="left">居左</div>
<div class="center">中间</div>
<div class="right">居右</div>
</div>
CSS代码:
<style>
.box {
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 98px;
height: 98px;
border: 1px solid red;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 98px;
height: 98px;
border: 1px solid red;
}
.center {
margin: 0 100px;
height: 98px;
border: 1px solid blue;
}
</style>
3 使用float和margin配合的方式
左右使用固定且浮动的方式,中间元素与上一种实现方式类似,采用margin控制距离左右两边的距离即可。但使用float的方式,存在一个很大的问题,就是整体宽度如果超出父元素的话,最后的浮动元素会被挤到下一行去。所以要变动一下HTML元素的位置,把中间元素放到最后去。代码如下
HTML代码:
<div class="box">
<div class="left">居左</div>
<div class="right">居右</div>
<div class="center">中间</div>
</div>
CSS代码:
<style>
.box {
overflow: hidden;
}
.left {
float: left;
width: 98px;
height: 98px;
border: 1px solid red;
}
.right {
float: right;
width: 98px;
height: 98px;
border: 1px solid red;
}
.center {
margin: 0 100px;
height: 98px;
border: 1px solid blue;
}
</style>
4 使用display:table的方式
为父元素设置display:table,子元素设置display:table-cell,这样每个元素就可以做为块级表格来布局了。左右两侧元素固定宽度,中间元素设置宽度100%,即可达到自适应的效果,代码如下
HTML代码:
<div class="box">
<div class="left">居左</div>
<div class="center">中间</div>
<div class="right">居右</div>
</div>
CSS代码:
<style>
.box {
display: table;
table-layout: fixed;
width: 100%;
}
.left, .right {
display: table-cell;
width: 98px;
height: 98px;
border: 1px solid red;
}
.center {
display: table-cell;
width: 100%;
height: 98px;
border: 1px solid blue;
}
</style>
刷题思考
想要回答好这类题目,position定位、float浮动以及flex弹性布局,是必须要掌握好的几个知识点,而且还要将他们灵活的组合运用起来,尽量多的给出面试官答案,这样的回答才是完美的。
类似考点
这道题相关的考点主要是围绕CSS布局相关的,面试官可能还会问这些问题,例如管理员平台业务模块区域自适应布局是如何实现的?例如你实现过圣杯布局吗?例如请你说一下如何实现一个双飞翼布局?例如请你说一说瀑布流布局如何实现?