html知识点

 1.定位fixed

        特点：

          1.脱离文档流，原来的位置不在了

          2.始终相对于浏览器进行定位

 

    2.字体图标的使用

        @font-face   自定义字体引入

              font-family  设置字体名称

              src   引入字体文件(一定要记住改地址)

   

    3.z-index  层级

      作用于定位元素

    如果父级存在z-index,那么子代的z-index会继承父级的z-index,子代的z-index只会对兄弟元素生效

    如果父级没有z-index,那么子代的z-index会影响其他元素

    4.背景  background

         

       1.background-color

       2.background-image  url(相对路径)

       3.background-repeat  图片平铺

                         repeat  x/y进行平铺

                         x-repeat   x轴平铺

                         y-repeat   y轴平铺

                         no-repeat   都不平铺

       4.background-size   图片缩放

                       100px  在x轴上缩放

                       100px  200px   x轴 y轴

                       50%      在x轴上缩放

                       50%  50%   x轴 y轴

                       cover  按图片长宽比，使图片填满整个盒子

                       contain  按图片长宽比，使图片完全显示在盒子里

 

       5.background-attachment  背景附着

                        fixed  固定

                        scroll  随着页面进行滚动

 

       6.background-position   背景位置

                         0px  0px   x   y

 

       7.background   背景缩写

         background:color  url  repeat  attachment   position / size

   

       8.  多背景

          url(),url()

     

    5.精灵图

         1.加快网页运行速度

         2.减少用户的流量使用，提升用户体验

    6.盒子阴影

        box-shadow:0px 0px 0px color    x轴 y轴 模糊距离 颜色

        内部阴影  box-shadow:inset 0px 0px 0px color

1.定位

       1.relative   相对定位

             1.相对于自身进行偏移的

             2.不脱离文档流，原来的位置依然存在

       2.absolute   绝对定位

             1.脱离文档流，原来的位置不在了

             2.如果父级或者祖先元素存在非static定位，那么相对于父级或祖先元素进行定位

               如果父级或者祖先元素没有定位或者有static定位，那么相对于浏览器进行定位

               优先作用最近的定位元素

       3.子绝父相

            如果一个元素要设置定位，一般将该元素设置为绝对定位，将其父级或祖先元素设置

            为相对定位，让该元素相对于其父级或者祖先元素进行定位

       4.水平垂直居中的方法

            1.文本

                  text-align:center

                  line-height:height

            2.padding

            3.margin:auto

              margin垂直方向调整位置

            4.position

                  {

                    top:50%;

                    left:50%;