你的思想是一个地下组织，绝不要把那里发生的事情一股脑说给外人听。 —— 引自《黑客与画家》章节：不能说的话

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

<!-- 定义给全局的样式 -->
 <style media="screen">
        html * {
            padding: 0;
            margin: 0;
        }

        .layout article div {
            min-height: 100px;
        }
    </style>

1.浮动布局

<!--浮动布局  -->
<section class="layout float">
    <style media="screen">
        .layout.float .left {
            float: left;
            width: 300px;
            background: red;
        }

        .layout.float .center {
            background: yellow;
        }

        .layout.float .right {
            float: right;
            width: 300px;
            background: blue;
        }
    </style>
    <h1>三栏布局</h1>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h2>浮动解决方案</h2>
            1.这是三栏布局的浮动解决方案；
            2.这是三栏布局的浮动解决方案；
            3.这是三栏布局的浮动解决方案；
            4.这是三栏布局的浮动解决方案；
            5.这是三栏布局的浮动解决方案；
            6.这是三栏布局的浮动解决方案；
        </div>
    </article>
</section>

2. 绝对布局

<!-- 绝对布局 -->
<section class="layout absolute">
    <style>
        .layout.absolute .left-center-right > div {
            position: absolute;
        }

        .layout.absolute .left {
            left: 0;
            width: 300px;
            background: red;
        }

        .layout.absolute .center {
            left: 300px;
            right: 300px;
            background: yellow;
        }

        .layout.absolute .right {
            right: 0;
            width: 300px;
            background: blue;
        }
    </style>
    <h1>三栏布局</h1>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>绝对定位解决方案</h2>
            1.这是三栏布局的浮动解决方案；
            2.这是三栏布局的浮动解决方案；
            3.这是三栏布局的浮动解决方案；
            4.这是三栏布局的浮动解决方案；
            5.这是三栏布局的浮动解决方案；
            6.这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
    </article>
</section>

3. flexbox布局

<!-- flexbox布局 -->
<section class="layout flexbox">
    <style>
        .layout.flexbox {
            margin-top: 110px;
        }

        .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>
    <h1>三栏布局</h1>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>flexbox解决方案</h2>
            1.这是三栏布局的浮动解决方案；
            2.这是三栏布局的浮动解决方案；
            3.这是三栏布局的浮动解决方案；
            4.这是三栏布局的浮动解决方案；
            5.这是三栏布局的浮动解决方案；
            6.这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
    </article>
</section>

4. 表格布局

<!-- 表格布局 -->
<section class="layout table">
    <style>
        .layout.table .left-center-right {
            width: 100%;
            height: 100px;
            display: table;
        }

        .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>
    <h1>三栏布局</h1>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>表格布局解决方案</h2>
            1.这是三栏布局的浮动解决方案；
            2.这是三栏布局的浮动解决方案；
            3.这是三栏布局的浮动解决方案；
            4.这是三栏布局的浮动解决方案；
            5.这是三栏布局的浮动解决方案；
            6.这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
    </article>
</section>

5. 网格布局

   <!-- 网格布局 -->
<section class="layout grid">
    <style>
        .layout.grid .left-center-right {
            width: 100%;
            display: grid;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;
        }

        .layout.grid .left-center-right > div {

        }

        .layout.grid .left {
            width: 300px;
            background: red;
        }

        .layout.grid .center {
            background: yellow;
        }

        .layout.grid .right {

            background: blue;
        }
    </style>
    <h1>三栏布局</h1>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>网格布局解决方案</h2>
            1.这是三栏布局的浮动解决方案；
            2.这是三栏布局的浮动解决方案；
            3.这是三栏布局的浮动解决方案；
            4.这是三栏布局的浮动解决方案；
            5.这是三栏布局的浮动解决方案；
            6.这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
    </article>
</section>

思考：如果中间高度增加，哪些布局方式还能正常使用？

• flex 布局
• table 布局

思考：以上5种布局方案的优缺点有哪些呢？

• 浮动:
  • 缺点：脱离文档流，需要清除浮动
  • 优点：兼容性比较好
• 绝对定位：
  • 缺点：布局脱离文档流，影响元素外其他布局，使用性差些
  • 优点： 快捷，不容易出问题
• flex布局：
  • 缺点：PC 端浏览器存在兼容性问题（例：IE8 不支持）
  • 优点: 完美的布局，解决的上述的布局的不足
• 表格布局：
  • 缺点：增加了重拍 重绘，其中一个单元格高度超出会影响同行的其他单元格高度也要调整
  • 优点: 兼容性好
• 网格布局（Grid）:
  • 缺点：新技术，存在兼容性问题
  • 优点：可以做很多布局的事情，代码简化的多

小结: 页面布局

1. 语义化掌握到位
2. 页面布局理解深刻
3. CSS基础知识扎实
4. 思维灵活且积极上进
5. 代码书写规范

变通: 页面布局

三栏布局

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

两栏布局

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

判断一个人是否具备“换位思考”的能力有一个好方法，那就是看他怎样向没有技术背景的人解释技术问题。 —— 引自《黑客与画家》第31页