H5前端 定位笔记整理

定位属性

   第一节：position属性值
        static 静态定位
        relative  相对定位
        absolute  绝对定位
        fixed     固定定位
        sticky    粘性定位

   1、 position:fixed;     固定定位

        a: 参照物：浏览器窗口。
        b: 不占据空间，脱离布局流。

       让一个元素在浏览器窗口左右上下居中？
           第一种方法：
                position:fixed;
                left:50%;top:50%;
                margin-left:-元素宽度一半;
                margin-top:-元素高度的一半;

           第二种方法：
                position:fixed;
                left:0;right:0;
                top:0;bottom:0;
                margin:auto;

    2、position:sticky;    粘性定位
        执行逻辑：
             默认情况下：当浏览器窗口滚动条不滚动，当前元素没有超出整个浏览器窗口的时候
             执行的position:relative;如果元素超出当前窗口则应用的position:fixed;

    3、脱离布局流：
            position:absolute
            position:fixed;
    注：如果块状元素没有设置宽度的时候，添加position:absolute || position:fixed
    出现宽度被内容撑开

   第二节：锚点（超链接的一种）
        作用：能实现在同一个页面内实现不同位置的跳转。
        描述：让锚点绑定id名称的元素回到浏览器窗口的最顶端。
        语法：
              <标签 id=""></标签>
              <a href="#绑定元素的id名称"></a>

    第三节：PC端 宽度 和 高度的自适应问题

         1、之前的项目：宽度和高度一般都是固定宽高。
              有时候我们希望，写html结构的宽和高，能适应不同的分辨率、不同的设备、不同的内容增删，使我们项目更加的灵活。

         2、默认情况下块状元素：
                当width不设置的时候，或者width:100%;当前元素的宽跟随父元素的变化。

         3、高度自适应第一种情况：
              当元素height不去设置或者是设置成height:auto;
              元素的高度是被内容撑开的。

          4、最小高度的设置：
               min-height:;   
                   能满足1：当内容增加的时候，内容能把容器撑开。
                   能满足2：当内容极少或者没有内容的时候，让容器保持一个最小高度。
 
          5、拓展（了解【体会】）：
               min-height IE的低版本不支持。
               但是：IE6默认的把height解析成最小高度。