前端 day12

一、position属性值

1. position:fixed;    固定定位

        a:参照物为浏览器窗口

        b:不占据空间，脱离布局流

二、让一个元素在浏览器窗口里左右上下居中

   方法1：

           position:fixed;

          left；50%；top：50%；

          margin-left：负的元素宽度的一半；

           margin-top：负的元素高度的一半；

    方法2：

          position：fixed；

         left：0；right：0；

        top：0；bottom：0；

        margin：Auto；

三、让一个子元素在父元素里左右上下居中

     方法：

          1.给父元素添加position：relative；

          2.给子元素添加position：absolute；

                                  left:0;right:0;

                                  top:0;bottom:0;

                                  margin:auto;

四、粘性定位（吸顶）

1. 属性   position：sticky；
2. 执行逻辑

         默认情况下：（1）当浏览器滚动条不滚动时，当前元素没有超过整个浏览器窗口的时候，执行的position：relative；

                              （2）如果元素超过当前窗口，则应用的是position：fixed；

    3.使用方法

       方法：  

               步骤：给元素添加（宽高背景）后给元素添加position：sticky；

                                                                                         top:0    

五、超出版心的banner的解决方法   

      步骤：

              1：在index.html文件里，给banner-con里添加img标签

              2：在index.css文件里，给#banner{}添加overflow：hidden；

              3：在index.css文件里，给.banner-con{}添加position：relative；

              4：在index.css文件里，给.banner-con img{}添加:

                                                                                          position：absolute；

                                                                                          left:50%;

                                                                                          margin-left：负的banner宽的一半；

六、轮播图

       步骤：

               1.在显示区.imgshow添加overflow-x:hidden;

                                                       Position:relative;

               2.给装图的大盒子里.imgbox添加position：absolute；

               3.给图片.imgbox img添加浮动。       

七、定位小结

       属性：  position：

      属性值：static       静态定位

                    absolute    绝对定位

                    relative     相对定位

                    fixed       固定定位

                    sticky       粘性定位

1. 脱离布局流：

          position：absolute；

          position：fixed；

         注：如果块状元素没有设置宽度的时候，添加position：absolute或者position：fixed；出现宽度被内容撑开。

八、锚点

      1.超链接的一种。

         作用：能实现在同一个页面内实现不同位置位置的跳转。

         描述:让锚点绑定id名称的元素回到浏览器窗口的最顶端显示。

         <标签 id=””></标签>

         <a href=”#绑定元素的id名称”></a>

九、PC端的宽度自适应

      1.写html结构的宽时，写成width:100%;

      2.从而可以适应不同的分辨率，不同的设备等。

      3.默认情况下的块状元素，当width不设置的时候，或者设置width:100%，  

         当前元素的宽跟随父元素的宽改变而改变。

十、高度自适应

      1.第一种情况：

              当元素的height未设置或者是设置为height:auto； 时，元素的高度是被内容撑开的。

            需求1：当内容增加的时候，内容能把容器撑开；

            需求2：当内容极少或者没有内容时，让容器保持一个最小高度。

      2.最小高度的设置

            min-height:;

            能满足需求1和需求2。