css定位

1、定位：是一种高级的布局手段，
    2、通过position属性设置定位 
         可选值：
            static  默认值，没有开启定位

            开启定位：
            relative   开启相对定位
            absolute   开启绝对定位
            fixed      开启固定定位
            sticky     开启粘滞定位
    3、每一种定位，对应的特点
       （1）、position: relative;  开启了相对定位
        开启后的特点：
           a:开启相对定位之后，如果不配合偏移量使用，元素是没有任何变化
           b:相对定位的原点，就是元素原来在文档流中的位置
           c:开启相对定位后，元素的层级提高了
           d:开启相对定位，元素的性质不会发生改变，块还是块，行内还是行内，
              也就是说元素没有脱离文档流
       
   
   偏移量：
      left   相对定位位置左侧的偏移量
      right  相对定位位置右侧的偏移量
      top    相对定位位置上侧的偏移量
      bottom  相对定位位置下侧的偏移量 

   一般情况下，水平方向的偏移量，垂直方向的偏移量，只用一个值确定，不会同时使用两个值，容易出问题

（2）、position: absolute; 开启绝对定位
      开启之后特点：
        a:开启绝对定位后，元素就会脱离文档流
        b:开启绝对定位后，元素的性质就发生了改变，不再区分块，行内块，行内元素
        c:开启绝对定位，元素的层级也会提高
        d:绝对定位，如果要元素的位置发生改变，依然需要配合偏移量去使用
        e:绝对定位的原点：相对于其包含块来定位的
          一般情况下，我们给子元素设置绝对定位，同时也会给父元素设置相对定位，
          叫“子绝父相”，但具体情况具体看

        包含块：
           （1）、在没有定位的情况下，包含块就是离当前元素最近的祖先元素
           （2）、有定位的情况，包含块是离它最近的，开启了定位的祖先元素；
                  如果他的祖先元素都没有开启定位，包含块就是根元素（html），又叫初始包含块

(3)、position: fixed;  开启固定定位
开启固定定位特点
   a：元素会脱离文档流，元素的性质也会发生改变
   b:元素会固定在页面当中，不会随着滚动条的滚动而滚动
   c:元素的层级也会提高
   d:元素位置的改变，也需要配合偏移量去使用
   e：固定定位是参考根标签（浏览器视口）来偏移
一般情况下：固定定位常用于，广告、固定导航等
(4)、 position: sticky; 开启粘滞定位
      特点：
        a:不会脱离文档流，元素的性质也不会发生改变
        b:粘滞定位要配合top值去使用，在没有到达top值之前，元素是随着滚动条滚动而滚动
        到达指定的top值后，元素就不会随着滚动条滚动而滚动
        c：粘滞定位的偏移量定位点：是浏览器的视口
      一般使用场景：广告，导航
水平布局
        left+margin-left+border-left+padding-left+width+
        padding-right+border-right+margin-right+right
      -当开启绝对定位后，水平方向的布局等式就会加上left，right两个值
          此时规则和之前一样，只是多添加了两个值
            -当发生过度约束时
                1:如果9个值中没有auto，则自动调整right值以使等式满足
                    0+0+0+0+100+0+0+0+300=400
                2:如果有auto，则自动调整auto的值以使等式满足
            -可设置auto的值
              margin  width  left  right
              四个值中，三个值固定，某一个值设为auto，则会调整这个auto值,
                若width  left  right都为0，margin会均分四个方向值
          —两个auto的情况
              margin 和width为auto， 调整的width
              margin 和left，right其中一个值为auto， 调整left/right
              width 和left，right其中一个值，调整left/right
              left，right都为auto,调整right
              
          —三个auto的情况
            margin  width  left ===> 调整left
            margin  width  right ===>  调整right
            width  left  right  ===> 调整right
          —四个值auto的情况===> 调整right

          总结：
          (1)、right>left>width>marign
          （2）、在绝对定位的情况下，四个方向偏移量都为0px，宽度也为固定值，让margin为auto，
          元素会水平垂直居中
图标字体（iconfont）
           -在网页中经常需要使用一些图标，可以通过图片来引入图标
           但图片本身比较大，也不灵活
           -所以使用图标时，我们还可以将图标直接设置为字体，
                然后通过font-face的形式来对字体进行引入
           -这样我们就可以通过使用字体的形式来使用图标

  图标字体库
      https://www.iconfont.cn/    阿里巴巴矢量图标库
      https://fontawesome.com.cn/  Fontawesome中文网

      额外的还有很多图标字体库，基本上每一个框架，都会有自带的图标库
        elementUI，vant  MUI·····