CSS定位装饰

一、定位

定位的基本介绍

网页常见布局方式

标准流

        块级元素独占一行---垂直布局

        行内元素/行内块元素一行显示多个---水平布局

浮动

        可以让原本垂直布局的块级元素变成水平布局

定位

        可以让元素自由的摆放在网页的任意位置

        一般用于盒子之间的层叠情况

定位的基本使用

设置定位方式

        属性名：position

        常见属性值

设置偏移值

        偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

        选取的原则一般是就近原则（离哪边近用哪个）

 

静态定位

        /* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */
        .box {
            /* 静态定位, 默认值, 标准流 */
            position: static;
            left: 100px;
            top: 200px;

            width: 200px;
            height: 200px;
            background-color: pink;
        }

 

相对定位

        /* 如果left和right都有，以left为准；top和bottom都有，以top为准 */
        /* 水平和垂直只需要写一个即可 */
        /* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */
        .box {
            position: relative;
            left: 100px;
            top: 200px;

            right: 200px;

            bottom: 400px;

            /* 
                相对定位
                1.占有原来的位置--没有脱标
                2.仍然具备原有的显示模式特点
                3.改变位置参照自己原来的位置
            */

            width: 200px;
            height: 200px;
            background-color: pink;
        }

 

绝对定位

        /* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */
        .box {
            /* 绝对定位：
                先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位
                有父级，但父级没有定位，以浏览器窗口为参照物进行定位
            */
            position: absolute;
            /* left: 50px; */
            left: 0;
            top: 0;
            /* 
                1.脱标，不占位置
                2.改变标签的显示模式特点：具备行内块的特点（在一行共存，宽高生效）
            */
            width: 200px;
            height: 200px;
            background-color: pink;
        }

 

子绝父相

 

绝对定位-居中

 

固定定位

    .box {
            /* 固定定位 */
            position: fixed;
            left: 0;
            top: 0;

            /* 
                1. 脱标-不占位置
                2. 改变位置参考浏览器窗口
                3. 具备行内块特点
            */

            width: 200px;
            height: 200px;
            background-color: pink;
        }

 

元素的层级关系

不同布局方式元素的层级关系

        标准流 < 浮动 < 定位

不同定位之间的层级关系

        相对、绝对、固定默认层级相同

        此时HTML中写在下面的元素层级更高，会覆盖上面的元素

z-index：数字；属性可以修改定位元素的层级

        /* 
            默认情况下，定位的盒子后来者居上
            z-index：整数; 取值越大，显示顺序越靠上， z-index的默认值是0
            注意：z-index必须配合定位才生效
            
        */

二、装饰

垂直对齐方式

        属性名：vertical-align

        属性值

        浏览器遇到行内和行内块标签当做文字处理, 默认文字是按基线对象

光标类型

        场景：设置鼠标光标在元素上时显示的样式

        属性名：cursor

        常见属性值

            /* 手型 */
            cursor: pointer;

            /* 工字型，表示可以复制 */
            cursor: text;

            /* 十字光标，表示用户可以移动 */
            cursor: move;

 

边框圆角

    .box {
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 一个值：表示4个角是相同的 */
            border-radius: 10px;

            /* 4值：顺时针 */
            border-radius: 10px 20px 30px 40px;

            /* 从左上角开始赋值，然后顺时针赋值，没有赋值的看对角 */
            border-radius: 10px 40px 80px;

            border-radius: 10px 80px;
        }

 

overflow溢出部分显示效果

            /* 溢出隐藏 */
            overflow: hidden;

            /* 滚动：无论内容是否溢出都显示滚动条的位置 */
            overflow: scroll;

            /* 根据是否溢出，自动显示或隐藏滚动条 */
            overflow: auto;

 

元素本身隐藏

            /* 占位隐藏 */
            visibility: hidden;

            /* ******不占位隐藏 */
            display: none;

 

三、选择器拓展

元素整体透明度

        场景：让某元素整体（包括内容）一起变透明

        属性名：opacity

        属性值：0~1之间的数字

                1：表示完全不透明

                0：表示完全透明

        opacity会让元素整体透明，包括里面的内容，如：文字、子元素等

2022/9/3 Caroline finish