页面布局

布局即为html 页面的整体结构或骨架，是一种设计思想。

水平居中

1.text-align:center;+display:inline-block;

优点：方法比较成熟，兼容性好。

缺点：text-align对齐属性会继承，使所有子级元素文本水平居中。

解决方法：在子级元素中重新设置text-align覆盖继承值。

   
 #parent {
      width: 100%;
      height: 200px;
      background: #ccc;
      /* 
        text-align属性:是为文本内容设置对齐方式
        * left:左对齐
        * center:居中对齐
        * right:右对齐
       */
      text-align: center;
    }

    #child {
      width: 200px;
      height: 200px;
      background: #c9394a;
      /* 
        display属性:
        * block:块级元素
        * inline:内联元素(text-align属性有效)
          * width和height属性是无效的
        * inline-block:行内块级元素(块级+内联)
          * width和height属性是有效的
       */
      display: inline-block;
      text-align: left;
    }

<!-- 定义父级元素 -->
  <div id="parent">
    <!-- 定义子级元素 -->
    <div id="child">居中布局</div>
  </div>

2. display:block(table);+margin:0 auto;  

优点：只需要对子级元素进行设置就可以实现水平方向居中布局效果。

 缺点：如果子级元素脱离文档流（浮动(float)、绝对定位(absolute)、固定定位(fixed)），会导致margin属性的值无效。

 #parent {
      width: 100%;
      height: 200px;
      background: #ccc;
    }

    #child {
      width: 200px;
      height: 200px;
      background: #c9394a;
      /* display的值为table和block */
      display: table;
      /* 
        margin属性:外边距
        * 一个值 - 上右下左
        * 二个值 - 第一个表示上下，第二个表示左右
          * auto - 表示根据浏览器自动分配
        * 三个值 - 第一个表示上，第二个表示左右，第三个表示下
        * 四个值 - 上右下左
       */
      margin: 0 auto;

      position: absolute;
    }

<!-- 定义父级元素 -->
  <div id="parent">
    <!-- 定义子级元素 -->
    <div id="child">居中布局</div>
  </div>

3. position:absolute;+transform:translatX(px\%);

优点：父级元素是否脱离文档流，不影响子级元素水平居中效果。

缺点：transform属性是CSS3中新增属性，浏览器支持情况不好。

#parent {
      width: 100%;
      height: 200px;
      background: #ccc;

      /* 开启定位 */
      position: relative;
    }

    #child {
      width: 300px;
      height: 200px;
      background: #c9394a;
      /* 
        当把当前元素设置为绝对定位之后:
        * 如果父级元素没有开启定位的话，当前元素是相对于页面定位的
        * 如果父级元素开启了定位的话，当前元素是相对于父级元素定位的
       */
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

<!-- 定义父级元素 -->
  <div id="parent">
    <!-- 定义子级元素 -->
    <div id="child"></div>
  </div>

垂直居中

1. display:table-cell; + vertical-align:middle;

父元素设置: display:table-cell;

vertical-align:middle;

display:table-cell：把当前元素设置为<td>元素（单元格）

vertical-align:用于设置行内元素垂直方向的对齐方式。

优点：方法比较成熟，兼容性好。

缺点：vertical-align对齐属性会继承，使所有子级元素文本垂直居中。

 #parent {
      width: 200px;
      height: 600px;
      background: #ccc;
      /* 
        display属性:
        * table:设置当前元素为<table>元素
        * table-cell:设置当前元素为<td>元素(单元格)
       */
      display: table-cell;
      /* 
        vertical-align属性:用于设置文本内容的垂直方向对齐方式
        * top:顶部对齐
        * middle:居中对齐
        * bottom:底部对齐
       */
      vertical-align: middle;
    }

    #child {
      width: 200px;
      height: 200px;
      background: #c9394a;
    }

<div id="parent">
    居中布局
    <!-- 定义子级元素 -->
    <div id="child"></div>
  </div>

2. position: absolute;+transform: translateY(-50%)

优点： 父级元素是否脱离文档流，不影响子级元素垂直居中效果

缺点： transform属性是CSS3新属性，浏览器支持情况不好

#parent {
      width: 200px;
      height: 600px;
      background: #ccc;
      position: relative;
    }

    #child {
      width: 200px;
      height: 200px;
      background: #c9394a;
      position: absolute;
      top: 50%;
      transform: translateY(-50%)
    }

<!-- 定义父级元素 -->
  <div id="parent">
    <!-- 定义子级元素 -->
    <div id="child"></div>
  </div>

居中布局

1. display: table-cell;+vertical-align: middle;+vertical-align: middle;

 #parent {
      width: 1000px;
      height: 600px;
      background: #ccc;
      display: table-cell;
      vertical-align: middle;
    }

    #child {
      width: 200px;
      height: 200px;
      background: #c9394a;
      display: block;
      margin: 0 auto;
    }

 <!-- 定义父级元素 -->
  <div id="parent">
    <!-- 定义子级元素 -->
    <div id="child"></div>
  </div>

2. position: absolute; + transform: translate(-50%, -50%);

 #parent {
      width: 1000px;
      height: 600px;
      background: #ccc;
      position: relative;
    }

    #child {
      width: 200px;
      height: 200px;
      background: #c9394a;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

<!-- 定义父级元素 -->
  <div id="parent">
    <!-- 定义子级元素 -->
    <div id="child"></div>
  </div>

两列布局

1.左侧固定，右侧自适应，float+margin-left

优点:实现方式简单 

 缺点:自适应元素margin属性值与定宽元素的width属性值保持一致， 定宽元素浮动与自适应元素不浮动导致浏览器兼容性不好， 清除浮动会导致显示有问题

 #left,
    #right {
      height: 300px;
    }

    #left {
      /* 定宽 */
      width: 400px;
      background-color: #c9394a;
      /* 当前元素脱离文档流 */
      float: left;
    }

    #right {
      background-color: #cccccc;

      margin-left: 400px;
    }

    #inner {
      height: 300px;
      background-color: green;

      clear: both;
    }

<div id="left"></div>
  <div id="right">
    <div id="inner"></div>
  </div>

2. float + overflow

缺点：overflow属性开启了BFC模式，导致内容溢出

 #left,
    #right {
      height: 300px;
    }

    #left {
      /* 定宽 */
      width: 400px;
      background-color: #c9394a;
      float: left;
    }

    #right {
      background-color: #cccccc;
      /* 开启BFC模式 - 当前元素的内部环境与外界完全隔离 */
      overflow: hidden;
    }

<div id="left"></div>
<div id="right"></div>

3. 利用布局table

优点：兼容性比较好

缺点：利用table会受到表格的本身具有的属性的影响

 #parent {
      /* 表格的单元格的宽度会自动分配 */
      display: table;
      table-layout: fixed;
      width: 100%;
    }

    #left,
    #right {
      height: 300px;

      display: table-cell;
    }

    #left {
      /* 定宽 */
      width: 400px;
      background-color: #c9394a;
    }

    #right {
      background-color: #cccccc;
    }

<div id="parent">
    <div id="left"></div>
    <div id="right"></div>
  </div>

三列布局

1. 左、中定宽，右自适应

优点:实现方式简单 

 缺点:自适应元素margin属性值与定宽元素的width属性值保持一致， 定宽元素浮动与自适应元素不浮动导致浏览器兼容性不好， 清除浮动会导致显示有问题

#left,
    #center,
    #right {
      height: 300px;
    }

    #left {
      /* 定宽 */
      width: 400px;
      background-color: #c9394a;
      float: left;
    }

    #center {
      width: 400px;
      background-color: green;
      float: left;
    }

    #right {
      background-color: #cccccc;
      margin-left: 800px;
    }

<div id="left"></div>
<div id="center"></div>
<div id="right"></div>

2.圣杯布局

圣杯布局主要是实现中间主体部分中的左右定宽+中间自适应的布局

优点：不需要添加dom节点

缺点：当main部分的宽小于left部分时就会发生布局混乱。

 #parent {
      height: 300px;
      /* 对应的是left元素的宽度 */
      margin-left: 300px;
      /* 对应的是right元素的宽度 */
      margin-right: 300px;
    }

    #left,
    #center,
    #right {
      height: 300px;

      float: left;
    }

    #left,
    #right {
      width: 300px;
    }

    #left {
      background-color: #c9394a;
      /* 将当前元素从当前行，移动上一行同一个位置 */
      margin-left: -100%;

      position: relative;
      /* 将当前元素移动到理想位置 */
      left: -300px;
    }

    #center {
      /* 为父级元素宽度的100% */
      width: 100%;
      background-color: green;
    }

    #right {
      background-color: #cccccc;

      margin-left: -300px;

      position: relative;
      right: -300px;
    }
 <div id="parent">
    <div id="center"></div>
    <div id="left"></div>
    <div id="right"></div>
  </div>

3.双飞翼布局

目的：为了优先显示中间主要部分，浏览器渲染引擎在构建和渲染渲染树是异步的（谁先构建好谁先显示），故在编写时，先构建中间main部分，但由于布局原因，将left置于center左边，故而出现了双飞翼布局。 

 优点：不会像圣杯布局那样变形 

 缺点是：多加了一层dom节点

 #parent {
      height: 300px;
    }

    #left,
    #center,
    #right {
      height: 300px;

      float: left;
    }

    #left,
    #right {
      width: 300px;
    }

    #left {
      background-color: #c9394a;
      /* 将当前元素从当前行，移动上一行同一个位置 */
      margin-left: -100%;
    }

    #center {
      /* 为父级元素宽度的100% */
      width: 100%;
      background-color: green;
    }

    #right {
      background-color: #cccccc;

      margin-left: -300px;
    }

    #inner {
      height: 300px;
      background-color: hotpink;
      /* 对应的是left元素的宽度 */
      margin-left: 300px;
      /* 对应的是right元素的宽度 */
      margin-right: 300px;
    }

<div id="parent">
    <div id="center">
      <div id="inner"></div>
    </div>
    <div id="left"></div>
    <div id="right"></div>
  </div>