前端学习笔记之--CSS(4)

    定位

        视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

        常规流    浮动：float    定位：position

        定位：手动控制元素在包含块中的精准位置

        涉及的CSS属性：position

    position 属性

        默认值：static，静态定位（不定位）

        relative：相对定位

        absolute：绝对定位

        fixed：固定定位

    一个元素，只要position的取值不是static，认为该元素是一个定位元素。

    定位元素会脱离文档流（相对定位除外）

    一个脱离了文档流的元素：

    文档流中的元素摆放时，会忽略脱离了文档流的元素

    文档流中元素计算自动高度时，会忽略脱离了文档流的元素

    相对定位

     不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。

     可以通过四个CSS属性对设置其位置：

     left    right    top    bottom

     盒子的偏移不会对其他盒子造成任何影响。

    绝对定位

    宽高为auto，适应内容

    包含块变化：找祖先中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）

    固定定位

    其他情况和绝对定位完全一样。

    包含块不同：固定为视口（浏览器的可视窗口）

   定位下的居中

    某个方向居中：

        定宽（高）

        将左右（上下）距离设置为0

        将左右（上下）margin设置为auto

    绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间

   多个定位元素重叠时

    堆叠上下文

    设置z-index，通常情况下，该值越大，越靠近用户

    只有定位元素设置z-index有效

    z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖

    补充

     绝对定位、固定定位元素一定是块盒

     绝对定位、固定定位元素一定不是浮动

     没有外边距合并

    透明度

     opacity，它设置的是整个元素的透明，它的取值是0 ~ 1

     在颜色位置设置alpha通道(rgba )

    鼠标

     使用cursor设置

    盒子隐藏

     display:none，不生成盒子

     visibility:hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。

    背景图

    和img元素的区别        img元素是属于HTML的概念        背景图属于css的概念

        1.当图片属于网页内容时，必须使用img元素

        2. 当图片仅用于美化页面时，必须使用背景图

    涉及的css属性

        1.background-image

        2.background-repeat

    默认情况下，背景图会在横坐标和纵坐标中进行重复

        3.background-size

    预设值：contain、cover，类似于object-fit 数值或百分比

        4.background-position

    设置背景图的位置。

        预设值：left、bottom、right、top、center

    数值或百分比

        雪碧图（精灵图）（spirit）

        5.background-attachment

    通常用它控制背景图是否固定。

        6.背景图和背景颜色混用