趁有时间,整理一下,做个笔记!
前端面试的时候关于布局方面通常会问这样一个问题:假设已知高度,完成三栏布局,两边栏定宽,中间栏自适应宽度。
当然还有同样类型的题,如上中下三栏,上下固定高,中间栏自适应,这种也是很常见的布局类型。还有两栏的布局,左边固定宽,右边自适应,反过来的情况等等,此处不讨论。
文章目录
左中右三栏布局
1 浮动方式
css代码
.parent{width: 100%;height: 200px;text-align: center;}
.left {float: left;width: 300px;height: inherit;background: yellow;}
.right{float: right;width: 300px;height: inherit;background: pink;}
.center{height: inherit;background: #ff362a;}
html代码
<div class="parent">
<div class="left">左边固定宽度盒子(左浮动)</div>
<div class="right">右边固定宽度盒子(右浮动)</div>
<div class="center">中间宽度自适应盒子(宽度不写且不浮动)</div>
</div>
外面套一个大盒子(width: 100%,高度固定),里面是三个小盒子。注意三个盒子的顺序,前两个是放左右两个盒子,一个左浮动一个右浮动,他们都脱标不占位置,所以第三个盒子(中间盒子,在标准流中)就能跑到它们两个下面,没有写宽则宽默认为100%,事实上左右两个盒子此时是有压住部分的中间盒子的(可以通过给第三个盒子加相对定位看到第三个盒子的全貌,此时左右盒子被压在下面,这里不写,感兴趣的可以试一下)。
效果展示:
2 定位方式
css代码
.parent {
position: relative;
width: 100%;
height: 200px;
text-align: center;
}
.left {
width: 300px;
height: 200px;
position: absolute;
background: yellow;
}
.right {
width: 300px;
height: 200px;
position: absolute;
right: 0;
background: pink;
}
.center {
height: 200px;
position: absolute;
left: 300px;
right: 300px;
background: red;
}
html代码
<div class="parent">
<div class="left">左边固定宽度盒子(absolute)</div>
<div class="right">右边固定宽度盒子(absolute)</div>
<div class="center">中间宽度自适应盒子(宽度不写且absolute)</div>
</div>
外面套一个相对定位的大盒子(width: 100%,高度固定),里面是三个绝对定位的小盒子,其中左(默认left:0
)、右(right: 0;
)两边的绝对定位的盒子设置宽度固定,中间盒子也绝对定位,并设置left: 300px; right: 300px;
,此时三个盒子都不占位置且并排站,谁都不压谁。
效果展示:
3 flex弹性布局方式
.parent {
width: 100%;
height: 200px;
display: flex;
text-align: center;
}
.left {
width: 300px;
background: yellow;
}
.center {
flex: 1;
background:red;
}
.right {
width: 300px;
background:pink;
}
<div class="parent">
<div class="left">左边盒子宽度固定</div>
<div class="center">中间盒子 flex: 1; 实现自适应</div>
<div class="right">右边盒子宽度固定</div>
</div>
外面套一个伸缩的大盒子(width: 100%,高度固定),左右盒子宽度固定、中间盒子设置flex: 1;
,此方法最简单。注意此时的三个盒子顺序是 左 中 右 ,和上面两种的 左 右 中 顺序不同
4 table表格布局方式
.parent {
display: table;
width: 100%;
height: 200px;
text-align: center;
}
.parent > *{
/*height: 200px;*//*高会继承,其实不用写*/
display: table-cell;
}
.left {
width: 300px;
background: yellow;
}
.center {
background: red;
}
.right {
width: 300px;
background: pink;
}
<div class="parent">
<div class="left">左边盒子宽度固定(table-cell)</div>
<div class="center">中间盒子什么都不写实现自适应(table-cell)</div>
<div class="right">右边盒子宽度固定(table-cell)</div>
</div>
外面大盒子设为display: table;
(其中width: 100%,高度固定),然后下面三个盒子设置为display: table-cell;
,接下来设置左、右盒子的宽度即可,中间盒子不用设置。
5 grid网格布局方式
.parent {
width: 100%;
/*height: 200px;*/
display: grid;
grid-template-rows: 200px; /*行的高度 也可以直接如上写高度*/
grid-template-columns: 300px auto 300px; /*列的宽度*/
text-align: center;
}
.left {
background: yellow;
}
.center {
background: red;
}
.right {
background: pink;
}
<div class="parent">
<div class="left">左边盒子</div>
<div class="center">中间实现自适应</div>
<div class="right">右边盒子</div>
</div>
三个盒子共同的父元素宽100%、高固定,然后对其设置display: grid; grid-template-columns: 300px auto 300px;
,则下面的三个盒子直接自己就实现了左右定宽、中间自适应的形式
上中下三栏布局
上中下三栏,上下高固定、中间的高自适应:
1 中间盒子高100%、上下定位方式
设置中间盒子高100%,并设置其padding-top、padding-bottom分别为上下两个盒子固定的高,接下来写上下两个盒子,使他们绝对定位,定位到最上和最下即可;
2 定位方式
*{
margin: 0;
padding: 0;
}
.parent {
/*width: 100%;*/
/*height: 100%;*/
width: 100vw;
height: 100vh;
position: relative;
text-align: center;
}
.top {
width: 100%;
height: 50px;
position: absolute;
top: 0;
background: yellow;
}
.center {
width: 100%;
position: absolute;
top: 50px;
bottom: 50px;
background: red;
}
.bottom {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
background: pink;
}
<div class="parent">
<div class="top">上面盒子</div>
<div class="center">中间盒子高度实现自适应</div>
<div class="bottom">下面盒子</div>
</div>
外面套一个相对定位的大盒子(width: 100vw; height: 100vh;
),里面是三个绝对定位的小盒子,其中上(默认top: 0;
)、右(bottom: 0;
)两边的绝对定位的盒子设置宽度固定为50,中间盒子也绝对定位,并设置top: 50px; bottom: 50px;
3 flex弹性布局方式
css代码如下,html及图片和2中的一样
*{margin: 0;padding: 0;}
html,body{
/*很重要,这步不设置高度,下面box高度100%不会起作用*/
height: 100%;
}
.parent {
width: 100%;
height: 100%;/*若想起作用记得设置上面body的高为100%*/
/*width: 100vw;*/
/*height: 100vh;*/
display: flex;
flex-direction: column;
text-align: center;
}
.top {
height: 50px;
background: yellow;
}
.center {
flex: 1;
background: red;
}
.bottom {
height: 50px;
background: pink;
}
4 table表格布局方式
css代码如下,html及图片和2中的一样
*{margin: 0;padding: 0;}
html,body{
/*很重要,这步不设置高度,下面box高度100%不会起作用*/
height: 100%;
}
.parent {
width: 100%;
height: 100%;/*若想起作用记得设置上面body的高为100%*/
display: table;
text-align: center;
}
.parent > *{
display: table-row;/*不是table-cell*/
}
.top {
height: 50px;
background: yellow;
}
.center {
background: red;
}
.bottom {
height: 50px;
background: pink;
}
5 grid网格布局方式
css代码如下,html及图片和2中的一样
*{margin: 0;padding: 0;}
html,body{
/*很重要,这步不设置高度,下面box高度100%不会起作用*/
height: 100%;
}
.parent {
width: 100%;
height: 100%;/*若想起作用记得设置上面body的高为100%*/
display: grid;
grid-template-rows: 100px auto 100px;
text-align: center;
}
.top {
background: yellow;
}
.center {
background: red;
}
.bottom {
background: pink;
}
时间是一个好东西,记录的是爱你的证据