CSS自学Day8-css定位装饰-装饰

什么时候养猫猫

已于 2022-09-23 16:54:38 修改

阅读量213

点赞数 1

分类专栏： CSS 文章标签： css 前端 javascript

于 2022-09-15 12:55:48 首次发布

本文链接：https://blog.csdn.net/m0_64005381/article/details/126865189

版权

CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1.1认识基线（了解）

基线：浏览器文字类型排版中存在用于对齐的基线（baseline）

1.2文字对齐问题

场景：解决行内/行内块元素垂直对齐问题

问题：当图片和文字在一行显示时，其实底部不是对齐的

1.3垂直对齐方式

属性名：vertical-align

属性值：

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

01-03：

    <style>
        /* 浏览器遇到行内或行内块标签当文字处理，默认文字是按基线处理 */
        input{
            height: 50px;
            box-sizing: border-box;

            vertical-align: middle;
        }


        
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

      img{
            vertical-align: middle;
        }
      
    </style>
</head>
<body>
    <input type="text"><input type="button" value="搜索">
    <br>

    <img src="../css基础/img/屏幕截图 2022-09-10 112632.png" alt=""><input type="text">
    <br>
    <div class="father">
        <input type="text" >
    </div>
</body>

04：

    <style>
        .father{
            width: 400px;
            background-color: pink;
        }

        img{
            /* 浏览器把行内和行内块标签当做文字处理，默认基线对齐 */
            vertical-align: middle;
            /* display: block; */
        }
    </style>
</head>
<body>
    <div class="father">
        <img src="../css基础/img/屏幕截图 2022-09-10 112632.png" alt="">
    </div>
</body>

05：

    <style>
        .father{
            width: 600px;
            height: 600px;
            background-color: pink;
            line-height: 600px;
            text-align: center;
        }
        
            img{
                 vertical-align: middle;

            }
        
    </style>
</head>
<body>
    <div class="father">
        <img src="../css基础/img/屏幕截图 2022-09-10 112632.png" alt="">
    </div>
</body>

2.1光标类型

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

属性名：cursor

常见属性值：

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
           
            /* 手型 */
            /* cursor: pointer; */

            /* 工字型 */
            /* cursor: text; */

            /* 十字型光标，表示可以移动 */
            cursor: move;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>

3.1边框圆角

场景：让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名：border-radius

常见取值：数字+px、百分比

原理：

赋值原则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！

    <style>
        .box{
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 表示四个角是相同的 */
            border-radius: 10px;

            /* 四个角：左上 右上 右上 左下--从左上顺时针转一圈 */
            /* border-radius: 10px 20px 40px 80px;*/


            /* 左上顺时针 对角相同 */
            /* border-radius: 10px 40px 80px; */
            /* border-radius: 10px 80px; */
            
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

3.2边框圆角的常见应用场景

画一个正圆：

1.盒子必须是正方形

2.设置边框圆角为盒子宽高的一半-->border-radi：50%

胶囊按钮：

1.盒子要求是正方形

2.设置-->border-radius：盒子高度的一半

    <style>
        .one{
            width: 200px;
            height: 200px;
            background-color: pink;

            /* border-radius: 100px; */
            /* 50%:取盒子尺寸的一半 */
            border-radius: 50%;
        }

        /* 胶囊状：长方形，border-radius取高度的一半 */
        .two{
            width: 300px;
            height: 200px;
            background-color: skyblue;

            border-radius: 100px;
        }
    </style>
</head>
<body>
    <div class="one"></div>

    <div class="two"></div>
</body>

4.1溢出部分显示效果

溢出部分：指的是盒子内容部分所超出盒子范围的区域

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条...

属性名：overflow

常见属性值：

属性值	效果
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: pink;

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

            /* 滚动 :无论内容是否超出,都显示滚动条*/
            /* overflow: scroll;*/
            
            /* auto:根据内容是否超出,判断是否显示滚动条 */
            /* overflow: auto; */
    </style>
</head>
<body>
    <div class="box">我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。我是div，这是溢出显示效果。</div>
    
</body>

5.1元素本身隐藏

场景：让某元素本身在屏幕中不可见。如：鼠标：hover之后元素隐藏

常见属性：

1.visibility：hidden

2.display：none

区别：

    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .one{
            /* 占位隐藏效果 */
            /* visibility: hidden; */

            /* ****不占位的隐藏 */
            display: none;
           background-color: pink;
        }

        .two{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>

（案例）导航二维码居中定位-显示隐藏效果

效果图：(鼠标悬停，图片才显示)

代码：

（拓展）元素整体透明度

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

属性名：opacity

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

1：表示完全不透明

0：表示完全透明

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

    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: green;

            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div>
        <img src="../css基础/img/屏幕截图 2022-09-10 112632.png" alt="">
        这个字透明吗？
    </div>
</body>