页面布局

概述： 页面布局常用的方法有浮动布局、绝对定位布局、表格布局、弹性布局（flex）、网格布局

---

三栏布局问题
高度已知，左右各宽300px，中间宽度自适应。效果如图：

三栏布局

用浮动布局、绝对定位布局、表格布局、弹性布局（flex）、网格布局的解决方法和各自的优缺点

布局基本代码：

html

  <section class="layout layout1">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle">浮动布局</div>
  </section>
  <section class="layout layout2">
    <div class="left"></div>
    <div class="middle">绝对定位布局</div>
    <div class="right"></div>
  </section>
  <section class="layout layout3">
    <div class="left"></div>
    <div class="middle">表格布局</div>
    <div class="right"></div>
  </section>
  <section class="layout layout4">
    <div class="left"></div>
    <div class="middle">弹性布局</div>
    <div class="right"></div>
  </section>
  <section class="layout layout5">
    <div class="left"></div>
    <div class="middle">网格布局</div>
    <div class="right"></div>
  </section>

css

   *{
      margin: 0;
     padding: 0;
    }
    .layout{
      width: 100%;
      height: 200px;
    }
    h2{
      width: 100%;
      margin: 3px 0;
      text-align: center;
    }
    .layout .middle{
      height: 100%;
      background-color: #ccc;
    }
    .layout .left, .layout .right{
      width: 300px;
      height: 100%;
      background-color: aqua;
    }

---

浮动布局

• 优点：兼容性好
• 缺点： 浮动的元素会脱离文档流，清除浮动比较麻烦

    .layout1 .left{
      float: left;
    }
    .layout1 .right{
      float: right;
    }

绝对定位布局

    .layout2{
      position: relative;
    }
    .layout2 .middle{
      position: absolute;
      top: 0;
      left: 300px;
      right: 300px;
    }
    .layout2 .left{
      position: absolute;
      left: 0;
      top: 0;
    }
    .layout2 .right{
      position: absolute;
      right: 0;
      top: 0;
    }

表格布局

表格布局有两种方式
1. HTML Table（<table>标签),使用原生的<table>标签
2. CSS Table（display:table 等相关属性）,指用CSS属性模仿 HTML 表格的模型
css display: table 与 html table标签的对照属性如下
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }

    .layout3{
      display: table;
    }
    .layout3>div{
      display: table-cell;
    }

弹性布局

弹性盒子是CSS3的一种新布局模式
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内可以包含了一个或多个弹性子元素。
弹性布局的属性：
弹性容器上(Flex container)：
flex-direction: row | row-reverse | column | column-reverse;（子元素的排列方向）
flex-wrap: nowrap | wrap | wrap-reverse; (子元素如何换行)
justify-content: flex-start | flex-end | center | space-between | space-around;(x轴上对齐方式)
align-items: flex-start | flex-end | center | baseline | stretch;(y轴上对齐方式)
align-content: flex-start | flex-end | center | space-between | space-around | stretch;（多根轴线的对齐方式）
弹性子元素上(Flex item)：
order: <integer>; （定义项目的排列顺序。数值越小，排列越靠前，默认为0。）
flex-grow: <number>; （定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大）
flex-shrink: <number>；（定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小）
flex-basis: <length> | auto; （定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小）

    .layout4{
      display: flex;
    }
    .layout4 .middle{
      flex-grow: 1;
    }