页面布局

题目:假设高度已知，请写出三栏布局，其中左/右栏宽度各位300px，中间自适应。

分析：5种布局方案

浮动定位： float
绝对定位： position: absolute;
弹性/flex布局：（移动端开发）display: flex;
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
表格/table布局： display: table; -> display: table-cell;
网格/grid布局：（下一代css3)

延伸

1.5种方案的优缺点

浮动

缺点：脱离文档流，需要清理浮动以及出具好浮动周边的关系

优点：兼容性好

绝对

缺点：脱离文档流，可适用性较差

优点：快捷

flex

缺点：兼容性较差

优点：css3主要解决浮动和绝对两种布局的缺点，比较完美，用于移动端

table

缺点：操作繁琐，对seo不友好

优点：兼容性好，支持ie8，flex解决不了的可以用table布局

grid

优点：代码量少，新技术，使布局不再是模拟网格布局，可以做更多复杂的事情

2.未知高度下，这5种方案哪些方案不适用

flex和table布局适用

float

原理：遮挡，创建bfc

3.兼容性，最优的解决方案（从业务考虑）

源码

interview.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Layout</title>
   <style media="screen">
   html *{
      padding: 0;
      margin: 0;
   }
   .layout{
      margin-top: 20px;
   }
   .layout article div{
      min-height: 100px;
   }
</style>
</head>
<body>

<!--浮动布局-->
<section class="layout float">
    <style media="screen">
        .layout.float .left{
            float: left;
            width: 300px;
            background: red;
        }
        .layout.float .right{
            float: right;
            width: 300px;
            background: blue;
        }
        .layout.float .center{
            background: yellow;
        }
    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h2>浮动解决方案</h2>
            1.这是三栏布局中间部分
            2.这是三栏布局中间部分
        </div>
    </article>    
</section>

<!--flex布局-->
<section class="layout flexbox">
    <style media="screen">
        .layout.flexbox .left-center-right{
            display: flex;
        }
        .layout.flexbox .left{
            width: 300px;
            background: red;
        }
        .layout.flexbox .center{
            flex: 1;
            background: yellow;
        }
        .layout.flexbox .right{
            width: 300px;
            background: blue;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>flexbox方案</h2>
            1.这是三栏布局flexbox中间部分
            2.这是三栏布局flexbox中间部分
        </div>
        <div class="right"></div>
    </article>
</section>

<!--table布局-->
<section class="layout table">
    <style media="screen">
        .layout.table .left-center-right{
            width: 100%;
            display: table;
            height: 100px;
        }
        .layout.table .left-center-right>div{
            display: table-cell;
        }
        .layout.table .left{
            width: 300px;
            background: red;
        }
        .layout.table .center{
            background: yellow;
        }
        .layout.table .right{
            width: 300px;
            background: blue;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>表格布局方案</h2>
            1.这是三栏布局表格布局中间部分
            2.这是三栏布局表格布局中间部分
        </div>
        <div class="right"></div>
    </article>
</section>

<!--grid布局-->
<section class="layout grid">
    <style media="screen">
        .layout.grid .left-center-right{
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;
        }
        .layout.grid .left{
            background: red;
        }
        .layout.grid .center{
            background: yellow;
        }
        .layout.grid .right{
            background: blue;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>网格布局方案</h2>
            1.这是三栏布局网格布局中间部分
            2.这是三栏布局网格布局中间部分
        </div>
        <div class="right"></div>
    </article>
</section>

<!--绝对布局-->
<section class="layout absolute">
    <style media="screen">
        .layout.absolute .left-center-right>div{
            position: absolute;
        }
        .layout.absolute .left{
            left: 0;
            width: 300px;
            background: red;
        }
        .layout.absolute .right{
            right:0;
            width: 300px;
            background: blue;
        }
        .layout.absolute .center{
            left:300px;
            right: 300px;
            background: yellow;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>绝对定位方案</h2>
            1.这是三栏布局绝对定位中间部分
            2.这是三栏布局绝对定位中间部分
        </div>
        <div class="right"></div>
    </article>
</section>

</body>
</html>

总结

语义化掌握到位

页面布局理解深刻

CSS基础知识扎实

思维灵活且积极上进

代码书写规范

举一反三

三栏布局

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

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

两栏布局

左宽度固定，右自适应

右宽度固定，左自适应

上宽度固定，下自适应

下宽度固定，上自适应