面试官：三栏布局你会几种？

站长

2023年09月28日 14:35 · 阅读数 55

三栏布局的六种实现方法

点滴虽小，重在积累

当每天离不开js的时候，不放回过头来看看最基础的css，所以决定从头开始，由浅入深，来回顾从最初开始的东西，回顾之前的知识，加深影像，也为自己定下一个写笔记的习惯。如有错误，欢迎指正。

前端工程师在日常开发的过程中，第一步便是布局了，不论是一个网站，还是一个后台的管理系统，我们大多离不开两栏布局，三栏布局，双飞翼布局，单列布局，一栏布局，等等，每种布局都有不同的实现方法，今天先来看看三栏布局，三栏布局是一个很简答的话题，当时常常作为面试中最开始问的问题，可以称之为基础问题，要说实现起来，不难，但是扩宽来看，有多少种方法可以实现呢，各自的好处呢，先看题，

面试官：三栏布局你会几种？

实现一个三栏布局(已知高度)左右宽度300px 中间自适应你有几种方法

float浮动布局

浮动布局是在最开始用的最多的一种布局，实现起来也最为简单，左右中三个盒子，左右宽度各位300px并且各自左右浮动即可。

<section class="layout">
    <article class="float">
        <div class="float_left"></div>
        <div class="float_right"></div>
        <div class="float_center">
            <h1>使用浮动实现解决三栏布局</h1>
        </div>
    </article>
</section>

/* float */
.layout article div {
    min-height: 100px;
}
  
.float_left {
    float: left;
    width: 300px;
    background-color: yellowgreen;
}
  
.float_right {
    float: right;
    width: 300px;
    background-color: yellowgreen;
}
  
.float_center {
    background-color: tomato;
}

position定位布局

使用绝对定位布局也是一种简单的布局给定左右宽度并且各自定位到左右为0的位置，再给中间的盒子定位左右各300px即可

<article class="position">
    <div class="position_left"></div>
    <div class="position_right"></div>
    <div class="position_center">
        <h1>使用绝对定位实现解决三栏布局</h1>
    </div>
</article>

/* position 定位布局 */
.layout .position div {
    position: absolute;
    min-height: 100px;
}
  
.layout .position .position_left {
    left: 0;
    width: 300px;
    background-color: violet;
}
  
.layout .position .position_right {
    right: 0;
    width: 300px;
    background-color: violet;
}
  
.layout .position .position_center {
    right: 300px;
    left: 300px;
    background-color: yellow
}

Flex-box布局

这也是目前最为流行的布局，也是大部分人工作中用的最多的布局了，flex布局实现三栏布局的方法很简单，给外层盒子使用display:flex 里面的盒子左右300px，中间flex为1即可

<section class="layout">
        <article class="flex">
            <div class="flex_left"></div>
            <div class="flex_center">
                <h1>使用flexBox实现解决三栏布局</h1>
            </div>
            <div class="flex_right"></div>
        </article>
    </section>

/* flex 定位布局 */
.layout .flex {
    display: flex;
    min-height: 100px;
}
  
.flex_left {
    width: 300px;
    background-color: tomato;
}
  
.flex_right {
    width: 300px;
    background-color: tomato;
}
  
.flex_center {
    flex: 1;
    background-color: violet;
}

table布局

table布局是一种已经淘汰的布局，使用table布局，需要给外层盒子定义display:table，内层盒子定义diplay:table-cell，再分别给左右宽度即可，中间就可以自适应，我们在后面再来总结他为什么淘汰，他的优缺点，现在先看看如何实现的吧

<section class="layout">
    <article class="table">
        <div class="table_left"></div>
        <div class="table_center">
            <h1>使用table实现解决三栏布局</h1>
        </div>
        <div class="table_right"></div>
    </article>
</section>

/* table布局 */
.layout .table {
    display: table;
    width: 100%;
    height: 100px;
}
  
.layout .table div {
    display: table-cell;
}
  
.table_left {
    width: 300px;
    background-color: violet;
}
  
.table_right {
    width: 300px;
    background: blue;
}
  
.table_center {
    background: turquoise;
}

grid布局

针对于grid布局，之前也写过一篇文章专门写过，grid作为一个二维布局，之所以目前还不够流行的原因是因为其兼容性没有暂时的flex布局好，并且目前flex已经可以胜任绝大多数布局了。就个人而言，觉得当下目前部分项目中可以尝试引入试试，grid布局作为下一代css3的布局标准，很多地方都很神奇且前瞻，如果抛开支持性不谈，完全可以投入使用，特别是Electron项目完全可以使用css的Grid的特性（个人建议没事可以先看看了解，很神奇，也很有意思），废话不说，上代码

<section class="layout">
    <article class="grid">
        <div class="grid_left"></div>
        <div class="grid_center">
            <h1>使用grid实现解决三栏布局</h1>
        </div>
        <div class="grid_right"></div>
    </article>
</section>

/* grid布局 */
.layout .grid {
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
}
  
.grid_left {
    background-color: #cf54cf;
}
  
.grid_right {
    background: #0202bb;
}
  
.grid_center {
    background: #0fdf43;
}

实际效果

面试官：三栏布局你会几种？

分析

float的优缺点

优点简单，作为一个很早的布局方式之一，其兼容性毋庸置疑，并且布局简单。

缺点也很明显，float布局需要清除浮动，因为float会脱离文档流，会造成高度塌陷的问题，所以，使用float就需要考虑到这个问题。
position 定位布局

优点很快捷，设置很方便，而且也不容易出问题，你可以很快的就能想出这种布局方式。

缺点绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。
flex布局

优点 felxbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。也是个人最喜欢的布局

缺点不能兼容IE8及以下浏览器。
table表格布局

优点表格布局被称之为已经淘汰的布局，包括现在应该也很少有人使用，包括flex布局不兼容的情况下table还可以尝试，类似这种三栏布局，table的实现也很简单，这个东西自我觉得看个人喜爱了，能满足日常使用的话用用也未尝不可

缺点表格布局的缺点还是很明显的，相当于其他布局，使用相对繁琐，代码量大，同时也存在缺陷，当单元格的一个格子超出高度之后，两侧就会一起触发跟着一起变高，这显然不是我们想要看到的情况。
grid布局

优点网格布局作为一个比较超前一点的布局自然有其独特的魅力，其布局方式布局思维都可以让你眼前一亮，有种新的思想。

缺点目前兼容性还达不到广泛推广的地步，在chrome Firefox等浏览器还存在bug没有修复

扩展

如果您认真看完了这篇文章，相信对一个基本的三栏布局已经有了比较深入的了解，学会这五种写法也是在布局的时候为自己提供一个新思维，但是这还远远不够，我们应该思考的是，当前的题目是给定已知高度，如果高度也是未知呢，如何实现，如果上上下固定，中间自适应呢，两栏布局呢，上下左右混合布局呢，这些都是应该学会的，基础的布局人人都会，但是要想深入，相信都需要仔细看看。

这里为大家带来一些有意思但是不常用的css知识吧

Caret-color 可以改变光标的颜色可以尝试给input加上这个属性看看
shape-outside 可以改变盒子的形状，从而改变布局。
display: flow-root BFC清楚浮动的一种，常用的一般是clear:both overflower:hidden
text-size-adjust 解决浏览器允许设置最小字体为12px问题，存在兼容性问题，可以用scale缩小解决问题
margin:auto这个属性并不陌生，但是当你搭配flex使用就很神奇了，外层盒子display:flex,内层所有盒子 maegin:auto这一个属性就相当于*justify-content*: space-around;*align-items*: center;
justify-content*: space-evenly 不同于space-around 这是子盒子完全均分，在某些场景十分方便
flex-grow 当flex-grow之和小于1时，只能按比例分配部分剩余空间，而不是全部
input宽度 input的宽度并不是通过block之后赋值改变的，其宽度取决于size的值
position 绝对定位和固定定位时，同时设置left和right相当于隐式地设置宽度
position:sticky 粘性定位，在一定高度进行定位，对于那种某些dom到达窗口最上面就定位十分方便
rgba 当需要设置透明背景时，background可以直接设置rgba 等同于background + opacity
transparent 表示透明色相当于rgba(0,0,0,0),例如写个三角形的时候给三方border设置透明一方给个颜色就有三角形了
text-indent 缩进，可以设置负值隐藏文本，使用fong-size:0px也可以隐藏文本内容
background:concic-gradient(red 0 30%,green 30% 60%,blue 60% 100%) 角向渐变可以用css画饼图
background-attachment指定背景如何附着在容器上，可以对背景进行固定不随窗口改变高度滑动
outline 不同于border，他不占位相当于覆盖不会增加盒子宽高，可以在内在外。
animation-delay 动画的延迟加载，可以实现很多交叉效果
object-fit:cover图片设置固定宽高后可以通过其保持比例，cintain也可以
cursor:not-allowed设置鼠标禁用状态,当button为disabled状态时不要忘记加上哦
filter:blur(10px) 背景虚化模糊，有时候很方便
fill-available 填充宽度，

后期可以补充，各种好用又不常用的css属性，如有问题，欢迎斧正

转载自:https://juejin.cn/post/7002049748295221285