day08-定位&锚点

<!--

    1.定位的概念:可以控制元素在浏览器中的位置

    2.生活中的定位

        - 把大象放进冰箱需要几步:打开冰箱、把大象放进去、关闭冰箱

        - 把单辉掉在投影仪上听课:绑起来、掉上去、嘲笑他

    3.关于定位使用的条件

        - 需要移动修饰的对象

        - 位置的移动方式

        - 参照物

    4.定位属性的使用 position

        - static 静态定位(默认值)

        - relative 相对定位

        - absolute 绝对定位

        - fixed 固定定位

        - sticky 粘性定位(css新增的定位属性值,兼容差)

 -->

    相对定位属性使用

    1.属性:position

    2.属性值:relative

    3.特点

        - 设置相对定位的时候需要给元素设置方向值(top/right/bottom/left)

        - 相对定位是相对于初始位置进行移动的

        - 总结盒模型和定位属性之间的区别

            - 相同点:可以控制元素在浏览器中进行移动

            - 不同点:盒模型设置的时候需要有父级包含框的接触,定位不需要没有方向的限制

        - 总结浮动和定位属性之间的区别

            - 相同点:可以控制元素在浏览器中进行移动

            - 不同点:浮动是脱离文档流的,相对定位是不脱离文档流的

    4.相对定位作用:是工具人,是为了给绝对定位提供参照物的

    绝对定位属性使用

    1.属性:position

    2.属性值:absolute

    3.特点

        - 绝对定位的参照物(父相子绝)

            - 当父级有定位属性的时候,子级就会相对于父级进行偏移

            - 当父级没有定位属性的时候,会往上级查找,直至找到浏览器

        - 绝对定位是会脱离文档流的,不占位置会破坏正常的网页布局

    拓展"流"的概念

    1.普通流/普通层/文档流:正常的网页布局

    2.浮动层/浮动流:在正常的网页上一层

    3.定位层/定位流:在浮动上一层

    固定定位属性使用

    1.属性:position

    2.属性值:fixed

    3.特点

        - 相对于浏览器的位置进行偏移的,是脱离文档流的

        - 作用:广告弹窗、聊天窗口、登录注册

    粘性定位属性使用

    1.属性:position

    2.属性值:sticky

    3.特点

        - 粘性定位是css中新增的属性值,兼容性比较差

        - 粘性定位是结合了相对定位个固定定位的特点

        - 相对定位:不脱离文档流

        - 固定定位:相对于浏览器进行移动

-->

<!--

    一:定位是可以控制元素在浏览器中移动位置

    二:属性position

    三:属性值及用法

    1.相对定位:relative 是相对于初始位置、不会脱离文档流

    2.绝对定位:absolute 是相对于父级(浏览器)进行移动、会脱离文档流

    3.固定定位:fixed 是相对有浏览器进行移动、会脱离文档流

    4.粘性定位:sticky 是相对于浏览器进行一定、不会脱离文档流

    需求:页面中有三个盒子,考虑让三个盒子叠加在一起?三个盒子排列的顺序是怎样的?

    解答:在定位中脱离文档流会出现在定位层,排列顺序的是从下到上,在后面的元素会显示在最上面

    层叠属性:z-index(使用的前提条件一定需要在定位环境下使用)

    属性值可以设置数字,数字越大越在上面显示

 -->

    1.已知元素宽高大小,设置元素在浏览器中间显示

    2.未知元素宽高大小,设置元素在浏览器中间显示

    拓展:CSS3中的计算属性

    用法:calc(计算公式) 相加相减的时候需要空格