注：
1.目前页面布局一般用div标签（其实也没固定必须是div来布局，你也可以用其它）
2.div没有其它功能，可以看成一个盒子
3.div默认是行元素，就是它默认占据一行，不管你设置宽度是多少，但这是可改变的css属性：
  （1）行内元素保留行属性display:inline-block;
  （2）浮动属性float:left;
  （3）定位属性position:absolute;

示例1：默认属性

示例2：同行排列

示例3：左右分，可变宽

示例3：综合

  <div id="d1"></div> <!-- 上边栏，可变宽 -->
  <div id="d2">
    <div id="d21">
      <div id="d2-zuo"></div> <!-- 左边栏，固定宽 -->
      <div id="d2-you"></div> <!-- 右边栏，固定宽 -->
    </div>
    <div id="d22">
      <div id="d2-zhong"></div> <!-- 中间栏，可变宽 -->
    </div>
  </div>
  
  <style type="text/css">
  #d1{
    height:50px;
  }
  #d2{
    position:relative; /* 设定位父元素 */
  }
  #d21,#d22{
    position:absolute; /* 设相对d2定位 */
    left:0; /* 定位左=0 ，你可以叫它x */
    top:0;  /* 定位上=0 ，你可以叫它y */
    width:100%;
  }
  #d2-zuo{
    float:left;
    width:50px;
  }
  #d2-you{
    float:right;
    width:50px;
  }
  #d2-zhong{
    margin-left:50px; /* d2-zuo宽度 */
    margin-right:50px; /* d2-you宽度 */
  }
  
  /* 测试添加 */
  #d1{
    border:1px solid #ff0000;
  }
  #d2-zuo{
    border:1px solid #03fff2;
  }
  #d2-you{
    border:1px solid #ea00ff;
  }
  #d2-zhong{
    border:1px solid #1100ff;
  }
  #d2,#d21,#d22,#d2-zuo,#d2-you,#d2-zhong{
    height:100px;
  }
  </style>

示例4：垂直水平居中

<div>垂直水平居中</div>

<style type="text/css">
  html,body{
    width:100%;
    height:100%;
  }
  div{
    width:100px;
    height:38px;
  
    /*垂直居中，注：div的top边居中，因此要完全居中需要再添加一个固定高div使用margin-top：-px一半高度  */
    position:relative;
    top:50%;
  
    /* 水平居中 */
    margin:0 auto;
  
    /*测试添加*/
    border:1px solid #0000ff; 
  }
  </style>