首页 > Web开发 > 详细

CSS 可视化设计模型(1)定位方案(Positioning schemes)

时间:2016-02-06 22:23:31      阅读:303      评论:0      收藏:0      [点我收藏+]

在CSS2.1中,一个框(box,就是元素形成的方块等)可以根据三种定位体系布局

  • 常规流(Normal Flow):是指浏览器按照html中的元素顺序一个一个的加载,CSS2.1中,常规流包括块框(的block-level boxes)块格式化,行内框(inline-level boxes)的行内格式化,以及块框和行内框的相对定位。
  • 浮动(Floats):在浮动模型中,box首先根据常规流布局,然后从常规流中脱离并尽可能地向左或向右位移。内容可以布局在浮动周围。
  • 绝对定位(Absolutr Positioning):在绝对定位模型中,盒完全从常规流中脱离(对后面的兄弟元素无影响)并根据包含块来分配位置。

 

选择定位:“position”属性

static(默认值):

默认的定位方式,元素按常规流布局,top ,right ,bottom ,left 属性值不生效。

relative(相对定位):

相对定位属于常规流,元素根据它原来的位置来定位。

  1. 元素仍然占据原来的空间,不会影响到其他元素的位置。
  2. 移动元素会导致它覆盖其它框。
  3. 移动元素可能导致元素抛出它的包含块。

技术分享

如图,B 使用相对定位后,对框C没有影响,并且框B移动超出了它的包含块。

absolute(绝对定位):

  1. 绝对定位使元素脱离常规流,它原来所占据的空间在常规流里消失,其他元素会依据常规流重新布局。
  2. 绝对定位的元素的参照物为最近的已定位祖先元素(postition属性值不为 static),如果元素没有已定位的祖先元素,那么它的参照物为初始包含块(initial containing block)(一般情况下,可以看着是 BODY)。

有如下代码:

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .wrapper{
        width: 300px;height: 200px;
        background-color: gray;
        }
    div{
        width: 250px;height:50px;
    }
    .A{
        background-color: red;
    }
    .B{
        background-color: green;
    }
    .C{
        background-color: blue;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="A">A</div>
        <div class="B">B</div>
        <div class="C">C</div>
    </div>
</body>
</html>

上面效果页面显示为:

技术分享

 

现在对 元素B 使用绝对定位:

技术分享

可以看到,元素B 脱离了常规流,从浏览器的底部向上10px,因为元素B的祖先元素 wrapper并没有使用定位,所以元素B的参照物是最初包含块(BODY)。

 

在元素wrapper也使用定位(positon属性非默认值)

技术分享

如果元素B的祖先元素wrapper也使用了定位(positon属性非默认值),那么元素B将以它的祖先元素 wrapper为参照物,从wrapper的底部向上移动了10px。

 

fixed(固定定位):

固定定位和绝对定位一样也脱离常规流,不过其参照物是当前的可视窗口(就是我们通过显示屏看到的一个窗口)。

元素设置了固定定位,如果当前页面一页显示不完,我们拖动滚动条时,定位元素就一直在当前可视窗口的某个位置上固定不变。

CSS 可视化设计模型(1)定位方案(Positioning schemes)

原文:http://www.cnblogs.com/womlly/p/5184394.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!