最近需要找工作，所以把前端的面试可能会涉及到的知识点，总结一下，也是对自己的一个交代。

页面布局

三栏布局

左右宽度固定，中间自适应
上下高度固定，中间自适应

两栏布局

左宽度固定，右自适应
右宽度固定，左自适应
上宽度固定，下自适应
下高度固定，上自适应

三栏布局，左右宽度固定，中间自适应

题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应这道题对于大家来说并不陌生，那么大家经过思考之后，可以想出几种方案呢？想出两种得话，那还没达到及格线，三种的话勉强及格，下面的是，我想出的几种解决方案。

浮动布局
定位布局
flex布局
table布局
网格布局

浮动布局

浮动的原理就是左右分别使用float:left和float: right;，使用float 使其脱离文档流，而中间的元素则在正常的文档中，就是利用这个原理，让中间的内容自适应。

<!---->浮动解决方案DOM
<section class="layout float">
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h1>浮动解决方案</h1>
            1、这是三栏布局的中间部分
            2、这是三栏布局的中间部分
        </div>
    </article>
<section>

<!---->浮动解决方案css样式
.layout article div {
    min-height: 100px;
}
.layout.float .left {
    float: left;
    width: 300px;
    background: red;
}
.layout.float .right {
    float: right;
    width: 300px;
    background: green;
}
.layout.float .center {
    background: pink;
}

定位布局

定位的话，主要就是采用定位的top,right,butttom,left这几个属性，左右两边分别设置宽度为300px,然后利用定位的属性分别撑开左右两边的宽度就可以了，具体的代码请继续往下看，这里我省略了html的头部的，还有 body 直接写了关键性的代码而已。

<section class="layout position">
    <article class="left-right-center">
        <div class="position-left"></div>
        <div class="position-right"></div>
        <div class="position-center">
            <h1>定位解决方案</h1>
            1、这是三栏布局的中间部分
            2、这是三栏布局的中间部分
        </div>
    </article>
<section>

<!---->定位解决方案的css定位
.layout.position> div {
    position: absolute; // 把左中右三个div分别设置成绝对定位
}
.position-left {
    top: 0; // 把左边的容器定位在左上方
    width: 300px;
    background: red;
}
.position-right {
    right: 0; // 右边的容器定位在右上方
    width: 300px;
    background: blue;
}
.position-center {
    left: 300px;
    right: 300px;
    background: green;
}

flexbox布局

利用flex 布局的原理，就是在其父元素中设置display: flex，左右两栏分别是300px，然后在其中间的区域使用flex: 1; ，这里的1表示的是宽度的比例，具体的数值取决于其他盒子的flex值，因为这里宽度的值是固定的，所以中间栏内容会自动填充。

<!---->这里是flex布局的HTML代码
<section class="layout flexbox">
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h1>flexbox解决方案</h1>
            1、这是三栏布局的中间部分
            2、这是三栏布局的中间部分
        </div>
    </article>
<section>

<!---->这里是flex布局的css样式
.layout.flexbox {
    display: flex;
}
.left {
    width: 300px;
    background: red;
}
.right {
    width: 300px;
    background: blue;
}
.center {
    flex: 1;
    background: green;
}

table布局

利用表格布局的原理就是，让容器作为一个表格，宽度是100%，然后把容器进行撑开，跟页面宽度是相同的，然后左侧的单元格是300像素，右侧的单元格是300像素，而剩余的就放在中间的table-cell的单元格。

<!---->表格布局的HTML代码
<section class="layout table">
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h1>表格布局解决方案</h1>
            1、这是三栏布局的中间部分
            2、这是三栏布局的中间部分
        </div>
    </article>
<section>

<!---->这里是表格布局的css样式
.layout.table .left-right-center{
    width: 100%;
    height: 100px;
    display: table;
}
.layout.table .left-right-center>div {
    display: table-cell;
}
.left {
    width: 300px;
    background: red;
}
.right {
    width: 300px;
    background: blue;
}
.center {
    background: green;
}

网格布局

<!---->这里是网格布局的HTML代码
<section class="layout grid">
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h1>网格布局解决方案</h1>
            1、这是三栏布局的中间部分
            2、这是三栏布局的中间部分
        </div>
    </article>
<section>

<!---->网格布局的css样式
.layout.grid .left-right-center {
    display: grid;
    width: 100%;
    grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
}
.left {
    background: red;
}
.center {
    background: green;
}
.right {
    background: blue;
}

这五种方案中，有哪些优缺点，兼容性那个比较好？

浮动的兼容性比较好，但是清除浮动做的不好的话，同级的元素会围绕在其周围。
定位的方法比较快捷，因为其是脱离文档流的，所以兼容性比较差一点。
flex布局是比较好的，移动端的首选方案，但是flex不支持IE8,兼容性没有那么好。
表格布局的兼容性比较好。
网格布局代码量相对少，是新的技术

前端面试知识点总结