7小时玩转网页布局开发【新】——1.页面元素定位和CSS布局模型概述

为什么需要元素模型：

                    布局

元素模型分爲三種：

1. 流動模型（Flow默认）
2. 浮動模型（Float）
3. 層模型（Layer）

    流动模型（块元素、行内元素、行内块元素）

            【块元素】

          

   

           【行内元素】

          

           【行内块元素】

           

   

    浮动模型

     

          例如： float:letf、float:right等等

            小插曲：如果设置的float不影响 【受影响的元素】的后面，可以加入clear:both

                      

    层模型

       

   

          absolute、relative、fixed区别：

            原代码：

                                           

             一.  absolute

              1. 在第二个div（我是内部元素）设置position:absolute

        

    position: absolute;
    top: 30px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: 100px;
    height: 100px;
    background: #ccc;
    text-align: center;
    line-height: 100px;

              2.然后在第一个div（我是外部元素）设置position：relative

    position: relative;
    height: 150px;
    width: 150px;
    background: royalblue;

             3.效果

 

              4.总结：absolute的位置是相对于relative来的，absolute与relative类似于父子关系

             二.  relative 

              1.下面再在第一个div元素添加left:200px

    position: relative;
    height: 150px;
    width: 150px;
    background: royalblue;
    left:200px;

              2.效果：

               3.总结：relative 的位置是相对于这个页面的

               小插曲：层级关系【z-index的用法】可以百度

             三.  fixed           

              1.效果

               

             2.总结：滚动条滚动，这个div也会随着滚动