position 定位

三种布局方式

   标准流(顺序)

　　　　1块级元素   h   div   table  ol ul li  p 独占一行

　　　2内联元素  a  mig span input 排列除非宽度不够

　　　　{ 100px;height:100;background: red;

            border:1px solid #fff  }  // 结果是3个竖的块

　　　　 span  span  span  横排  

        这俩个就是传统布局

2  position 

 　　　　　  position通过top right bottom left 实现定位

     　　　　 static 默认 top right bottom left 

     　　　　 relative 相对top right bottom left 

　　　　　　absolute绝对top right bottom left 

     代码:

           div{100px;  height100px;   background:red;

                  position:relative;    left:0px;top:0px}

           div2{100px;  height100px;   background:blue;

 　　　　　　 position:relative;　left:0px;top:-50px}

     // 第一点 : div2 blue覆盖在了 div1 red 上

   //  第二点 :  当position :relative 为left 100px   top100px时,是相对于网页左上角向左和向下移动;  当为right:50px  bottom:50px,相对于最左上角向右和,从下往上移动, 结果为 这个图形不完整了.   重点 是 relative是相对于网页的左顶点为起点.

      position :absolute 

         　　　　　　div{100px;  height100px;   background:red;

                 　　         position:relative;    left:100px;top:100px}  // 结果为 窗口的向左边 在向下 

           　　          div2{100px;  height100px;   background:blue;  

 　　　　　　 　　      position:relative;　right:100px;bottom:100px}  // 结果为 窗口的右下  在向上. 

                           body{ height :300px} // bottom:设置为 0 也是相对于当前窗口的,如果为bottom:-500px ,或top:1500px,则会下移动

             absolute 与relative的区别是  一个是相对于窗口的四个点,  一个是相对与只窗口的左上点.

              如果绝对属性的父元素设置了,margin-left 和 margin-top,但子绝对定位不会有变化,因为父元素不具备定位属性

               

fixed 

   position fixed  相对于屏幕的四个角,不受父元素的定位限制.

　　inherit

           主要作用是继承父元素的 定位, 作用效果一样,  相当于自己添加了. 

　　.w{
　　　　　　     100px;
  　　　　　　　  height: 100px;
   　　　　　　　  background :red;}
　　　　.q{ 100px;
　　　　    height: 100px;
  　　　　  background :blue;
　　　　　　 position:relative;
　　　　　  top: -50px;}// .q会覆盖.w ,后面的元素依然有层的关系.
z-index 是表示层级关系的
      上图代码 .w 添加z-index:1;则 .w覆盖.q  ,前提是.w也必须定位(position:relative)否则无效.

)

   浮动

        

   定位

*{
    margin:0;
    /*padding:0;*/
}// 经过测试 padding设置为0无效果, 直接用margin就可以, padding是设置框里的填充