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

在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. 移动元素可能导致元素抛出它的包含块。

relative

如图,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>

上面效果页面显示为:

CSS 可视化设计模型(2)定位方案(Positioning schemes)_第1张图片

 

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

CSS 可视化设计模型(2)定位方案(Positioning schemes)_第2张图片

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

 

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

CSS 可视化设计模型(2)定位方案(Positioning schemes)_第3张图片

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

 

fixed(固定定位):

  1. 固定定位和绝对定位一样也脱离常规流,不过其参照物是唯一的,只考虑初始包含块(initial containing block)
  2. 如果页面在当前屏幕一页显示不完,拖动滚动条时,固定定位元素就会固定在当前屏幕的位置,不会随着滚动条移动。

下面我们把 div wrapper 的高度调高,使它超过1页,对 div b 使用 固定定位。

CSS 可视化设计模型(2)定位方案(Positioning schemes)_第4张图片

可以看到,拖动滚动条,而DIV B 一直固定在当前屏幕的位置保持不变。

 

初始包含块(initial containing block)

  • 一个html页面的根元素是 html,html再包含 body,其实在html外面有一个初始包含块。
  • html,body也有自己的各自框模型,目前,主流的浏览器 IE10,火狐等都有一个默认的样式表,他们默认的定义如下:

html{margin:0;padding:0;}

body{margin:8;padding:0;}

  • 下面我们通过一个实验久呢个看到,我们给 html 和 body 分别加上边框属性;

CSS 可视化设计模型(2)定位方案(Positioning schemes)_第5张图片

  • 可以明显看到html,body的范围,上图是浏览器默认样式的显示效果,我们再给html,body设置一个外边距。

CSS 可视化设计模型(2)定位方案(Positioning schemes)_第6张图片

  • 可以看到html外面还有空间,这个包含html的块就被称为初始包含块(initial containing block),它是作为元素绝对定位和固定定位的参照物,下面我们来给DIV B来一个绝对定位。

CSS 可视化设计模型(2)定位方案(Positioning schemes)_第7张图片

  • 看到了吧,DIV B 以初始包含块为参照物而进行定位。
  • 在目前的网页布局中,为了使页面能兼容各种浏览器,一般在css里都会把 html,body的margin 和 padding 设置为0,这样页面就能铺满整个浏览器窗口了。

html,body{margin:0;padding:0}

  • 不过,现在的主流浏览器的默认样式表都为:html{margin:0;padding:0;} body{margin:8;padding:0;},所以为了减少代码量,可以只设置 body的margin 为 0。

body{margin:0}

你可能感兴趣的:(CSS 可视化设计模型(2)定位方案(Positioning schemes))