#今日说码栏目#第十三集

pc布局中，大的区域用浮动，小的部分可以用margin，定位

定位：

          更加高级的布局手段

          定位指的就是将指定的元素摆放到页面的任意位置

          通过定位可以任意的摆放元素

          通过position属性来设置元素的定位

          可选值：

          static： ['stætik] 默认值，元素没有开启定位

          relative： ['relətiv] 开启元素的相对定位

          absolute： ['æbsəlju:t] 开启元素的绝对定位

          fixed：开启元素的固定定位（也是绝对定位的一种）

          sticky： ['stiki] 开启元素的粘滞定位（较为常用）

1、相对定位

      当元素的position属性设置为relative时，则开启了元素的相对定位 ==》自恋型

      1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化

      2.相对定位是相对于元素在文档流中原来的位置进行定位（top:0;left:0;）

      3.相对定位的元素不会脱离文档流

      4.相对定位会使元素提升一个层级

      5.相对定位不会改变元素的性质，块还是块，内联还是内联

偏移量

    当开启了元素的定位（position属性值是一个非static的值）时，

      可以通过left right top bottom四个属性来设置元素的偏移量，越大越向反方向移动

      left：元素相对于其定位位置的左侧偏移量，

      right：元素相对于其定位位置的右侧偏移量

      top：元素相对于其定位位置的上边的偏移量

      bottom：元素相对于其定位位置下边的偏移量

通常偏移量只需要使用两个就可以对一个元素进行定位，

 一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

2、绝对定位 

 当position属性值设置为absolute时，则开启了元素的绝对定位

绝对定位：

1.开启绝对定位，会使元素脱离文档流

2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

3.绝对定位是相对于离他最近的包含块定位的

  （一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'）

4.绝对定位会使元素提升一个层级

5.绝对定位会改变元素的性质，开启BFC属性

  内联元素变成行内块元素，

  块元素的宽度和高度默认都被内容撑开

 包含块：containing block

-正常情况下：

  离当前元素最近的祖先块元素

-定位情况下：

  离他最近的开启了定位的祖先元素

    如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位

    html （根元素，初始包含块）

绝对定位布局

水平布局

left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right

  -当开启决定定位后，水平方向的布局等式就会加上left，right两个值

      此时规则和之前一样，水平方向9个值相加，必须要等于父元素内容区的宽度，如果不等于的话

      浏览器也会对9个值进行调整，让等式成立，这个过程，叫过渡约束

100+0+0+0+100+0+0+0+200  =400  

      -当发生过度约束时

            1:如果9个值中没有auto，则自动调整right值以使等式满足

            2:如果有auto，则自动调整auto的值以使等式满足

      -可设置auto的值

          margin  width  left  right

          四个值中，三个值固定，某一个值设为auto，则会调整这个auto值,

            若width  left  right top bottom都为0，margin会均分四个方向值

              让元素水平垂直居中

      —两个auto的情况

          margin 和width为auto，  调整width

          margin 和left，right其中一个值为auto，调整left或right

          width 和left，right其中一个值，调整right

          left，right都为auto  调整right

      —三个auto的情况

        margin  width  left ===> 调整left

        margin  width  right ===>  调整right

        width  left  right  ===>  调整right

      —四个值auto的情况

          width，right，left，right   ==>调整right

垂直布局

    等式也必须满足

  top+margin-top+····+botoom

总结：

  调整的优先级

    right>left>width>margin

  会设置水平垂直居中

 3、固定定位

当元素的position属性设置fixed时，则开启了元素的固定定位

（1）用于固定在浏览器页面上，不随浏览器的滚动而改变位置；

（2）以浏览器(html根标签)为参照物，和父元素没有任何关系；

（3）固定定位不占有原来的位置，即脱离标准流 ,会改变元素的性质

  (4)应用场景

        - 固定导航

        - 固定侧边栏

        - 广告  

4、粘滞定位

 粘滞定位 （一般用于页面导航的吸顶效果)

 当元素的position属性设置为sticky时，则开启了元素的粘滞定位

     （1）以浏览器为参照物（体现固定定位特点）；

     （2）占有原来位置（体现相对定位特点）；

　 （3）粘滞定位可以在元素到达某个位置时，将其固定

       (4)没有达到top值之前正常显示,随着滚动条的滚动而滚动，

        达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动