CSS布局模式

CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。

在网页中，元素有三种布局模型：
1. 流动模型（Flow）
2. 浮动模型 (Float)
3. 层模型（Layer）

流动模式：

流动是默认的网页布局模式。 流动布局模式的2个比较典型的特点：

1. 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
2. 在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）。

浮动模式：

使块状元素实现浮动在一行； 如： div{float:left;}所有div元素向左浮动。

层模式：

1. 层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。

2. 如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：
1. 绝对定位(position: absolute)

    ```
     元素选择器{
        position:absolute;
        left:value;
        right:value;
        top:value;
        bottom:value;    
    }
    ```

2. 相对定位(position: relative)

元素选择器{
          position:relative;
            left:value;
            right:value;
            top:value;
            bottom:value;    
        }

3.固定定位(position: fixed)

元素选择器{
          position:fixed;
            left:value;
            right:value;
            top:value;
            bottom:value;    
        }

颜色透明度的处理：

Chrome、Firefox等
    opacity:value(0~1);
IE---filter:
    alpha(opacity=value[0~100]);