css布局模型

1.流动模型

流动（Flow）是默认的网页布局模式。流动布局的特征：

• 块状元素会在所处的包含元素内自上而下按顺序垂直延伸分布，因为再默认状态下，块状元素的宽度都为100%，以行的形式占据位置。
• 在流动模式下，内联元素都会在所处的包含元素内从左到右平均分布显示。

2.浮动模式

div{
    float:left;    
}

3.层模型

层模型的三种形式：

• 绝对定位（absolute）

  如果想为元素设置层模型中的绝对定位，需要设置position:absolute，这条语句的作用将元素从文档流中拖出来，然后使用left/right/top/bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位，如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口

div{
   background-color: #00ffff;

   width:1000px;

   height: 100px;        
}
#div2 {

   position: absolute;

   left:80px;

   top:50px;

}

<div id="div1">原来的样子</div>
<div id="div2">绝对定位之后</div>

如上代码执行后的效果：

上面的#div2，是相对于body进行的绝对定位。

• 相对定位(relative)

  相对定位完成的过程是首先按static(float)方式生成一个元素（并且元素像层一样浮动起来），然后相对于以前的位置移动，移动的方向和幅度由left,right,top,bottom属性确定，偏移前的位置保留不动。

   div{
       background-color: #00ffff;     
       width:1000px;
       height: 100px;        
  }
  #div2 {
      position: absolute;
      left:80px;
      top:50px;
  
  }
  #div3 {
      position: relative;
      left:200px;
      top:50px;
  }
  

   <div id="div1">原来的样子</div>
  <div id="div2">绝对定位之后</div>
  <div id="div3">相对定位</div>
  <span>偏移前的依然被占用</span>
  

  如上代码执行结果：

  

  绝对定位是相对于上一个具有定位性质的父体，上面的例子是相对于body,也就是#div2没有偏移的话，absolute之后，位置就跟#div1是重合的。

  但是相对定位是与自己本来位置的偏移，如上图，本来位置用红色框表示出来，偏移之后，原来的位置依然保持占用。

• 固定定位(fixed)

  与absolute定位类型类似，但他的相对移动的坐标是视图（屏幕内的网页窗口）本身。

  由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小

  

如上代码执行的结果：

移动滚动条之后：

如上图，#div4固定位置是根据整个视图，而不是根据body或者其他参考对象。

• 绝对定位和相对定位一起使用

  position:absolute可以实现被设置元素相对于浏览器(body)设置定位，也可以相对于其他元素。但是需要遵循以下规范：

  • 参照定位的元素必须是相对定位元素的前辈元素：

    <div id="div1">
        <div id="div2">
            内容
        </div>
    </div>
    

    如上，div2是div1的子元素，所以div1是div2的前辈元素。

  • 参照定位的元素必须加入position:relative

    #div1{
        width:100px;
        height:50px;
        position:relative;
    }
    

  • 定位元素加入position:absolute

    #div2{
        width:100px;
        position:absolute;
        left:20px;
        top:10px;
    }