• python全栈开发day41-background、精灵图技术、定位(相、绝、固)、z-index


    一、昨日内容回顾

        1.标准文档流定义:

          https://www.jianshu.com/p/b4d2c1dfd6e5

        2.浮动和浮动的四大特性

          1)脱标

          2) 浮动元素相互贴靠

          3)字围

          4)紧凑(浮动的元素不分为块还是行内标签,宽高可以任意设置)

        3.清除浮动带来的影响

          1) 父盒子设置固定高度

          2) 在浮动元素的后边加上一个空的盒子模块,属性为clear:both

          3)伪元素清除法(****)

          4)父盒子overflow:hidden(***)

        4.margin塌陷

          标准流下才会出现margin塌陷(上下)问题;

          非标准下的盒子:浮动、绝对定位、固定定位

          不会出现margin塌陷问题。

        5.字体属性、文本属性、颜色

          1)文本属性

            text-algin,text-decoration,text-space,color,text-indent

            单行文本,多行文本居中 line-height。

          2)字体属性

            text-weight、font-size、font-famliy、。。。。

        6.超链接导航案例

          div

           div

            ul

              li  

                a

    二、今日内容总结

         1.background

          backgroud-color:rgba(255,255,0,.5) alpha

          backgroud-image:url('')

          backgroud-repeat:no-repeat | repeat-x | repeat-y |repeat

          backgroud-position:水平方式 垂直方向

                   left center right(top bottom)

                                                           如果是正值,那么是调背景图的位置,如果是负值,切图

          backgroud-attachment:fixed 固定背景图(固定其所在的盒子里 盒子动它也动)

          通天banner:backgroud-position:center top

         2.CSS sprite

         3.定位(****)

          1) 相对定位 position:relative

            特点

            (1)不脱标

            (2)形影分离

            (3)人走留坑

             作用:

               微调元素、父相子绝参考点(绝对位置跟随移动后位置作为参考点而不是他留下的坑,移动后当然也占用位置)

            相对定位的参考点:相对于原来的位置调整

          2) 绝对定位

            特点:

             (1) 绝对定位的盒子脱离标准流

             (2) 压盖

             (3)父相子绝

             (4)设置绝对定位之后,不区分行内元素还是块级元素,都能设置宽高。

          一、单独一个绝对定位的盒子或者说父元素除static无其他定位元素,

                        1.当我使用top属性描述的时候 是以页面的左上角(跟浏览器的左上角区分)为参考点来调整位置
                        2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
                        
                        二、嵌套的盒子
                         父相子绝: 父辈元素设置相对定位,子元素设置绝对定位,子元素会以父辈元素的左上角作为参考点
                                   不仅仅是‘父相子绝’
                                   父绝子绝没有实战意义 父固子绝 都是以父辈元素为基准

          3) 固定定位

         4.z-index

          1)z-index 值表示谁压着谁,数值大的压盖住数值小的。

          2)只有定位了的元素(relative,absolute,fixed),才能有z-index,浮动元素和标准流不能设置z-index

          3) z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在          HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
                       4) 从父现象:父亲怂了,儿子再牛逼也没用

                    
            css简单布局:
                    重要知识点***:
                        1.浮动
                        2.定位
                        3.z-index
                        4.display

    三、预习与扩展

  • 相关阅读:
    Spring Cloud Bus 消息总线介绍
    工商银行分布式服务 C10K 场景解决方案
    关于写好文章的3个心法和5点技巧
    混合云K8s容器化应用弹性伸缩实战
    云原生下的灰度体系建设
    被解救的代码
    【2020-10-22】我是否一个真正靠谱的人
    【2020-10-21】以谦虚与忍耐去期待豁然与贯通
    【2020-10-20】压力也是一种感受,用心体会
    【2020-10-19】不断试错的过程
  • 原文地址:https://www.cnblogs.com/wuchenggong/p/9233975.html
Copyright © 2020-2023  润新知