day09 浮动 定位 盒子模型

1.浮动
    1.1标准流（普通流）
        普通布局

    1.2浮动（float）
        元素会脱离标准普通流的控制，移动到指定位置的过程
        left   right    none

        特征：只有左右浮动，找最近的父级元素对齐
              该元素浮动，下面的元素向上补位，浮动后的元素比原来其他元素高，可以覆盖它们

        总结：  1、浮动后的元素会漂浮在其他元素上边
                2、浮动后的元素是不占原来的位置
                3、浮动后的元素不能超出父元素的范围
                4、浮动后的元素在同一水平线上显示
                5、浮动后的元素会自动的转化为行内块元素
                6、浮动后的元素不能超出父元素的内边距和边框

2.清除浮动（clear）
    父盒子将浮动的子盒子圈起来
        left    不允许左侧有浮动元素（清除左侧浮动的影响）
        right    不允许右侧有浮动元素（清除右侧浮动的影响）
        both    同时清除左右两侧浮动的影响

        1.额外标签法
            在浮动元素末尾添加一个空的标签   
            <div style=”clear:both”></div>
        2.父级标签添加overflow属性方法
            可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。
        3.伪元素清除浮动
            clearfix:after {  
                content: "."; 
                display: block; 
                height: 0; 
                clear: both; 
                visibility: hidden;  
            }
        4.双伪元素清除浮动
            .clearfix:before,.clearfix:after { 
                content:"";
                display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
                }
                .clearfix:after {
                clear:both;
                }
                .clearfix {
                *zoom:1;
            }

3.定位
    属性：元素的定位属性主要包括定位模式和边偏移两部分。

    top        顶端偏移量，定义元素相对于其父元素上边线的距离
    bottom    底部偏移量，定义元素相对于其父元素下边线的距离
    left    左侧偏移量，定义元素相对于其父元素左边线的距离
    right    右侧偏移量，定义元素相对于其父元素右边线的距离
    eg：top：10px；

    定位模式（定位的分类）
        选择器{position：属性值；}
            static    自动定位（默认定位方式）
            relative    相对定位，相对于其原文档流的位置进行定位
            absolute    绝对定位，相对于其上一个已经定位的父元素进行定位
            fixed    固定定位，相对于浏览器窗口进行定位

    静态定位：position属性取值为static  标准流特性

    相对定位：position取值为relative
        1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
        2. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

        就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）

    绝对定位：position取值为absolute
        它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

        1、父级没有定位：若所有父元素都没有定位，以浏览器为准对齐(document文档)。
        2、父级有定位：绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。 

        重点！！！：子绝父相

    固定位置：position取值为fixed，以浏览器窗口作为参照物来定义网页元素
        特点：1、固定定位的元素跟父亲没有任何关系，只认浏览器。
              2、固定定位完全脱标，不占有位置，不随着滚动条滚动。
    总结：  
        静态static            不脱标，   正常模式       不可以    正常模式
        相对定位relative    不脱标，    占有位置    可以    相对自身位置移动（自恋型）
        绝对定位absolute    完全脱标，不占有位置    可以    相对于定位父级移动位置（拼爹型）
        固定定位fixed        完全脱标，不占有位置    可以    相对于浏览器移动位置（认死理型）

    定位模式转换：跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换， 
                    都转换为行内块模式，行内块的宽度和高度跟内容有关系。
                 因此比如行内元素如果添加了绝对定位或者固定定位后，
                    浮动后，可以不用转换模式，直接给高度和宽度就可以了。  

    叠放次序：用z-index:n 来定等级，默认为0，取值相同根据书写顺序，后来居上 
            只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性

4.版心和布局流程
    布局流程：
        确定页面的版心（可视区）。
        分析页面中的行模块，以及每个行模块中的列模块。
        制作HTML结构 。
        CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

5.盒子模型
    每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

    1、边框：border   border-width || border-style || border-color 

        1.1 style
            none：没有边框即忽略所有边框的宽度（默认值）
            solid：边框为单实线(最为常用的)
            dashed：边框为虚线  
            dotted：边框为点线
            double：边框为双实线

        1.2 细线边框