HMTL开发系列（8） 之 浮动模块（标准流 浮动 定位）

浮动模块

布局模式分为三种：普通流（标准流）、浮动和定位；

1.普通流（标准流）

在此之前讲的布局都是普通流，块级元素竖行排列，行内元素水平排列；

 

2.浮动

目的：浮动的主要目的是将多个块级元素通行显示；

特点：

1.可以通过显示样式转换，转换成行内块元素显示，但是行内块有个缺点是在各个块元素之间会有缝隙存在；（img标签就是行内块，所以多个图片相邻的话会有缝隙，所以要转成块元素）

2.浮动就是将块元素浮起来，不占位置；然后下面的元素就会上移动抢位置；这样的话就失去了布局的意义了，所以往往是要在浮动的元素外面套一个块元素站位；里面的元素就可以做浮动效果了；

3.如果要一行显示所有的块，则这些块都要使用浮动属性才行；

4.浮动可以使得块元素变成行内块元素，可以使得行内元素也变成行内块元素；

 

3.定位position

定位属性分为两部分：定位模式和边偏移；

3.1定位模式：有四个属性

静态定位：static  一般是清空定位使用的；边偏移是不起作用的；

相对定位：relative   相对自己进行边偏移；但是以前的位置还继续占用，不脱坐标；

绝对定位：abssolute   完全脱标的，不占用空间的；所以父元素的高度就会上移动，如果只有一个子元素的话，父元素高度就成0了；

                 父级没有使用定位的话，子级使用的定位，坐标是以浏览器的左上角为基准点的；相反如果父亲有定位则以最近的父亲(一层一层往上找，直到找到有定位的父亲)的左上角作为基准点；

固定定位：fixed  认的是浏览器的，完全脱标，不占有位置，可以和边偏移一起使用；

 

例如：块元素的居中显示(这个中需要计算)

.style_loadingImg{
    width: 400px;
    height: 320px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -160px;
}

下面这种方式是不需要计算的：

        .test_div{
            width: 200px;
            height: 200px;
            background: pink;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        .test_div_parent{
            width: 900px;
            height: 900px;
            background: yellow;
            position: absolute;
        }