position 定位

Posted 2021-01-04 ningjie

三种布局方式

   标准流(顺序)

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

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

　　　　{ width: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{width:100px;  height100px;   background:red;

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

           div2{width: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{width:100px;  height100px;   background:red;

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

           　　          div2{width: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 

　　inherit

 

   浮动

        

   定位

 

 

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