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（相对定位）：

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

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

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

absolute（绝对定位）：

绝对定位使元素脱离常规流，它原来所占据的空间在常规流里消失，其他元素会依据常规流重新布局。
绝对定位的元素的参照物为最近的已定位祖先元素（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>