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

三、预习与扩展

原文地址:https://www.cnblogs.com/wuchenggong/p/9233975.html