zoukankan      html  css  js  c++  java
  • 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

    三、预习与扩展

  • 相关阅读:
    清空
    从一个例子看现代C++的威力
    C++11实现一个自动注册的工厂
    REST RPC架构思想
    thinking in object pool
    worksteal thread pool
    check member function
    C# string 常用功能的方法扩展
    C#设计模式总结
    JAVA过滤器和拦截器的区别
  • 原文地址:https://www.cnblogs.com/wuchenggong/p/9233975.html
Copyright © 2011-2022 走看看