一,关于三栏布局的面试:

三栏布局,顾名思义就是两边固定,中间自适应,三栏布局在页面中很常见,比如下面某厂的首页:

上图就是一个三栏布局,左边右边固定,中间随浏览器的宽度自适应,他们所有的效果都如下:(下面暂时给出8 种实现的方法,以后看到其他的再补充,各种的优缺点,大概面试的时候会让你说出两三种)

  1. 流体布局:

.left{
    float: left;
    height: 200px;
    width: 100px;
    background: orange;
}
.right{
     float: right;
     width: 200px;
     height: 200px;
     background: blue;
}
.center{
      margin-left: 120px;
      margin-right: 220px;
      height: 200px;
      background-color: red;
}
<div class="container">
   <div class="left"></div>
   <div class="right"></div>
   <div class="center"></div>
</div>

左右两块向左右浮动,中间设置左右的margin值,达到自适应。

缺点:中间内容无法达到最先加载,当页面较多的时候会影响用户体验。

2. BFC三栏布局

根据BFC规则,非浮动元素不会覆盖浮动元素的位置(由非浮动元素触发BFC),因此可以利用这一点实现三栏布局。


.left{
    float: left;
    height: 200px;
    width: 100px;
    margin-right: 20px;
    background-color: orange;
}
.right{
     float: right;
     height: 200px;
     width: 200px;
     background-color: blue;
     margin-left: 20px;
}
.center{
      height: 200px;
      background-color: red;
      overflow: hidden; //非浮动元素触发BFC
}
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

缺点也是主模块无法得到最先加载,当页面较多的时候会影响用户体验。

3. 圣杯布局


.container{
    margin-left: 120px;
    margin-right: 220px;
}
.center{
    height: 200px;
    width: 100%;
    float: left;
    background-color: red;
}
.left{
    float: left;
    height: 200px;
    width: 100px;
    background-color: orange;
    margin-left: -100%;
    position: relative;
    left: -120px;
}
.right{
    float: left;
    height: 200px;
    width: 200px;
    background-color: blue;
    position: relative;
    margin-left: -200px;
    right: -220px;
}
<div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

上述的圣杯布局利用margin的负边距解决了之前带来的问题,但是css的样式定义稍微复杂了点。

4. 双飞翼布局


.content{
    float: left;
    width: 100%;
}
.center{
    height: 200px;
    background-color: red;
    margin-left: 120px;
    margin-right: 220px;
}
.left{
    float: left;
    height: 200px;
    width: 100px;
    margin-left: -100%;
    background-color: orange;
}
.right{
    float: left;
    height: 200px;
    width: 200px;
    margin-left: -200px;
    background-color: blue;
}
<div class="content">
    <div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>

上述的双飞翼布局也是利用负边距解决三栏布局,但是HTML结构稍微复杂了点。

5. Flex布局


.container{
    display: flex;
}
.main{
    flex-grow: 1;//中间设置自适应
    height: 200px;
    background-color: red;
}
.left{
    order: -1;
    height: 200px;
    flex: 0 1 100px;
    margin-right: 20px;
    background-color: orange;
}
.right{
    flex: 0 1 200px;
    height: 200px;
    margin-left: 20px;
    background-color: blue;
}
<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

简单实用,但是可能需要考虑浏览器的兼容问题。

6. Table 布局


.container{
    display: table;
    width: 100%;
}
.left,.center,.right{
    display: table-cell;
}
.left{
    height: 200px;
    width: 100px;
    background-color: orange;
}
.center{
    background-color: red;
}
.right{
    width: 200px;
    height: 200px;
    background-color: blue;
}
<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

缺点无法设置栏间距

7. 绝对定位布局


.container{
    position: relative;
}
.center{
    height: 200px;
    background-color: red;
    margin: 0 220px 0 120px;
}
.left{
    position: absolute;
    left: 0;
    top: 0;
    height: 200px;
    width: 100px;
    background-color: orange;
}
.right{
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 200px;
    background-color: blue;
}
<div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

简单实用,主要内容可以做到优先加载。

8. 网格布局(Grid布局)


.container{
    display: grid;
    grid-template-rows: 200px;
    grid-template-columns: 100px auto 200px;
}
.left{
    background-color: orange;
    margin-right: 20px;
}
.center{
    background-color: red;
}
.right{
    background-color: blue;
    margin-left: 20px;
}
<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

Grid布局是一种新的布局方式,通过创建网格的方式实现布局,缺点就是需要适配其他浏览器。

总结:上述八种三栏布局,都各有特点,对于掌握这八种布局最好的方式是理解,然后自己上手敲一遍,对于面试的时候,说出常见的两三种,假如你能说出最新的布局,应该会给面试官留下好的印象👍👍👍。

注:本文章属于原创作品,可以转载,但是请你备注转载出处和作者。

--本文章已同步到微信公众平台,扫描下方二维码关注可快速阅读:--
打赏
X

感谢大佬的打赏😘