CSS布局

CSS布局
 流动模型 （flow）
   块状元素，由于没有设置宽度，默认为100%
   内联元素从左到右水平分布显示
 
 浮动模型 
  两个块状元素并排显示：
    div{ 
       width:200px;
       height:200px;
       float:left;//浮动并排向左显示
     }
   <div id="div1"></div>
   <div id="div2"></div>
     
    div{
       width:200px;
       height:200px;
       border:2px red solid
     } 
    #div1{float:left;}
    #div2{float:right;}//两个元素一左一右显示


 层模型：
   绝对定位（absolute）：相对于上一个父级，如果没有父级则相对于浏览器窗口
   div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
  }
<div id="div1"></div>
   
  相对定位 position:relative
  
  固定位置：fixed 不随滚动条滚动而变化


  
  相对定位与绝对定位相结合
  <div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位的元素-->
  </div>
  参照定位的元素必须加入position:relative;
  相对定位的元素加入position:absolute
  
  确定宽度的块状元素使用 margin-left:auto;和margin-right:auto 来设置居中
  不定宽的块状元素居中：加入table标签
                        设置display:inline方法,然后使用text-align:center
                        设置position:relative 和left:50%。给父元素设置float


垂直居中：
  插入table，设置vertical-align:middle;