关闭

CSS布局模型

395人阅读 评论(0) 收藏 举报
分类:
CSS布局模型:
    和盒模型一样都是CSS最基本,最核心的概念
CSS包含三种最基本的布局模型:
    1.流动模型(Flow)
    2.浮动模型(Float)
    3.层模型(Layer)




流动模型


    流动是默认的网页布局模式。
 特征:
    1.  块状元素都会在所处的包含元素自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。
    2.
      内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道的独占一行)


浮动模型
    
      让块状元素并排显示,任何元素在默认情况下是不能浮动的,但可以用CSS定义为浮动。
    语法:
         float:left;
         #div{float;left;}
         #div{float:right;}


层模型
    层布局模型就像是Photoshop中的图层编辑一样,每个图层都能够精确定位操作。如何让html元素在网页中精确定位?CSS定义了一组定位(positioning)属性来支持层布局模型。
    层模型有三种形式:
    1.绝对定位(position:absolute)
    2.相对定位(position:relative)
    3.固定定位(position:fixed)


  a:绝对定位:将元素从文档流中拖出来,然后使用left,right,top,bottom属性相对于最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
  如:
  div{
      width:200px;
      height:200px;
      position:absolute;
      left:100px;
      top:50px;
  }


  b.相对定位:它通过left,right,top,bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程首先按static(float)方式生成一个元素,然后相对于以前的位置移动,移动的方向和幅度有left,...bottom属性确定,偏移前的位置保留不动。
  如:
  div{
      width:200px;
      height:200px;
      position:relative;
      left:100px;
      top:50px;
  }
    偏移前的位置保留不动?
    div元素相对于以前的位置产生了偏移,但是div元素以前的位置还是保留,所以后面的span 元素是显示了div元素以前位置的后面。




  c:固定定位:
             它的相对移动的坐标是视图(屏幕内的网页窗口)本身,由于试图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动的影响。
  如:
  div{
      width:200px;
      height:200px;
      position:fixed;
      left:100px;
      top:50px;
  }




relative 和absolute 组合使用
    相对于其他元素进行定位
    1.参照定位元素必须是相对定位元素的前辈元素:
        <div id="box1"><!--参照定位元素-->
            <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
        </div>
        box1是box2的父元素


    2.参照定位元素必须加入position:relative;
    #box1{
        width:100px;
        height:200px;
        position:relative;
    }


    3.相对定位元素必须加入position:absolute,就可以使用top,bottom,left,right来进行偏移定位了;
    #box2{
        position:absolute;
        top:20px;
        left:20px;
    }


    这样box2就可以相对于父元素box1定位了,参照物不在是浏览器。


大家自己实践一下,不太全,比较基础~

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:58641次
    • 积分:1885
    • 等级:
    • 排名:千里之外
    • 原创:89篇
    • 转载:9篇
    • 译文:0篇
    • 评论:57条
    最新评论