2018.3.13 浮动 定位

float：浮动

　　clear ;both

　　要浮动的标签用div包起来给d iv设宽高设行高垂直居

　　line-height: 30px；行高默认垂直居中

　　line-height最好对一行使用，如果换行了， 标签高度就变了

　　消除浮动：clear:both (使自身不受上面浮动的效果)

　　兼容：将最外层的标签设置宽高  里面用百分比

　　盒子模型：内容（html）内边距（padding）边框（border）外边距（margin）

　　box-sizing:border-box;    指定宽高，自适应边框，内边距，内容

　　

定位：

　　　position:定位   顺序  top(上) left(左) right(右)  buttom(下) 

　　　 fixed:绝对定位（相对于窗口定位）自身位置没有了

　　　 absolute:绝对定位（相对body）

　　　　　　他会相对于最近的有position属性的父标签定位，最上层就是body

　　　 relative:相对定位 有自身位置 用来微调

　　　 cursor:pointer;鼠标变小手

　　　 z-index:10   DIV分层 数值高的在上面

/*    给A设置绝对定位*/
    #a{
         500px;
        height:200px;
        border: 1px solid #FC0307; 
        margin-bottom: 20px;
        position: relative; /*绝对定位，用于给相对定位找位置*/
    }
/*    给B设置关于A的相对定位*/
    #b{
        200px;
        height: 100px;
        border: 1px solid #F7080C;
        position:absolute;    /*给B设置相对于A的定位    */    
        bottom:2px;
        right:2px;
    }
    /*    给B设置关于A的相对定位，并层次高于X*/
    #c{
        200px;
        height: 100px;
        background:#D027A0;
        position: absolute;  /*给C设置相对于A的定位    */    
        top: 250px;
        left: 130px;
        z-index: 2;   /*给C设置层次*/
        
    }
/*    给Z设置绝对定位*/
    #z{
         500px;
        height:200px;
        border: 1px solid #FC0307;
        position: relative;
    }
    /*    给X设置关于Z的相对定位*/
    #x{
        200px;
        height: 100px;
        background: #1CE813;
        position: absolute;
        top: 10px;
        left: 80px;
    }
    /*    给y设置关于Z的相对定位*/
    #y{
        200px;
        height: 100px;
        border: 1px solid #F7080C;
        position: absolute;
        top: 98px;
        left: 540px;
    }