定位及轮播图的相关知识点

发布于:2023-01-20 ⋅ 阅读:(19) ⋅ 点赞:(0) ⋅ 评论:(0)

03.固定定位

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

  (1)用于固定在浏览器页面上,不随浏览器的滚动而改变位置;

  (2)以浏览器为参照物,和父元素没有任何关系;

 (3)固定定位不占有原来的位置,即脱离标准流 ,更改元素的性质

  (4)应用场景

        - 固定导航

        - 固定侧边栏

        - 广告  

04.粘滞定位

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

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

    (1)以浏览器为参照物(体现固定定位特点);

    (2)占有原来位置(体现相对定位特点),不会脱离文档流,元素性质也不会发生变化;

   (3)粘滞定位可以在元素到达某个位置时,将其固定

     (4)配合top值设置,没有达到top值之前正常显示,随着滚动条滚动而滚动,

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

05.绝对定位元素布局

水平方向9个值相加必须要等于父元素的内容的宽高,否则浏览器就会自动调整,这个过程

 还是叫过渡约束

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

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

               此时规则和之前一样,只是多添加了两个值

                 -当发生过度约束时

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

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

                 -可设置auto的值

                    margin  width  left  right

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

                     若width  left  right top  bottm都为固定值,

                     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的情况

                   width,right,left,调整right

          垂直布局

              等式也必须满足

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

水平方向总结

      只要right为auto,那就调整right

      right>left>width>margin

06.层级

z-index  设置元素的层级  

            后面跟正整数,数值越大,层级越高

            注意:

             1、 z-index属性必须要开启定位的前提下使用

             2、设置z-index,父元素的层级再高也不会高于子元素

07.第一种轮播图

总结下来,轮播图:

     一般分为两类

       一、自己手写(配合js,目前的话,大家掌握原理和样式)

         1、用float为主

            建一个对外的窗口,让图片整个横向排列,通过调整整个图片的水平方向,

              来显示对应的图片

         2、用定位为主

            让图片叠在一起,通过改变图片的层级,来决定显示哪张图片

       二、用各种插件、或者框架(别人写的,你来用)

08.第二种轮播图

09.图标字体

 图标字体(iconfont)

    大多情况下,我们的图标字体,是有专门图标库,或者从框架里找

           -在网页中经常需要使用一些图标,可以通过图片来引入图标

           但图片本身比较大,也不灵活

           -所以使用图标时,我们还可以将图标直接设置为字体,

                然后通过font-face的形式来对字体进行引入

           -这样我们就可以通过使用字体的形式来使用图标