前端开发学习——CSS装饰

先吃点再说

于 2024-09-07 09:52:07 发布

阅读量617

点赞数 12

文章标签：学习

本文链接：https://blog.csdn.net/2302_80311379/article/details/141924673

版权

一、垂直对齐方式

属性名：vertical-align

属性值：

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

例一、

body部分：

<input type="text"><input type="button" value="搜索">

css部分：

        input {
            height: 50px;
            box-sizing: border-box;
        }

浏览器运行结果，可知：文本框和搜索按钮并未对齐

因此，需要在css代码中添加：

/* 浏览器遇到行内和行内块标签当作文字处理，默认文字是按基线对齐 */
            vertical-align: middle;

浏览器运行效果：

例二、

body部分：

    <div class="father">
        <img src="./image.jpg" alt="">
    </div>

css部分：

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

浏览器运行效果：由此可以看出，img父级盒子高度与img高度不同，且略大。

应添加vertical: middle;或display: block;以解决此问题。

        img {
            /* 浏览器把行内和行内块标签当作文字处理，默认基线对齐 */
            /* vertical-align:middle; */
            display: block;
        }

浏览器运行效果：

二、光标类型

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

属性名：cursor（光标）

常见属性值：

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

代码：

        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 小手效果 */
            /* cursor: pointer; */
            /* 工字形 */
            /* cursor: text; */
            /* 十字光标 */
            cursor: move;
        }

三、边框圆角

1、用法

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

属性名：border-radius（边框半径）

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

原理：

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

        .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;
        }

2、常见应用

1、画一个正圆：

盒子必须是正方形
设置边框圆角为盒子宽高的一半——border-radius: 50%

css代码：

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

            /* border-radius: 100px; */
            border-radius: 50%;
        }

浏览器显示效果：

2、胶囊按钮：

盒子要求是长方形
设置——border-radius: 盒子高度的一半

css代码：

        .two {
            width: 400px;
            height: 200px;
            background-color: skyblue;

            border-radius: 100px;
        }

浏览器显示效果：

四、overflow溢出部分显示效果

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

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

属性名：overflow

常见属性值：

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

1、默认效果

<head>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </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>
</body>

浏览器显示效果：

2、隐藏效果

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

            overflow: hidden;
        }
    </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>
</body>

浏览器显示效果：

3、滚动条效果

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

            overflow: scroll;
        }
    </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>
</body>

浏览器效果：

五、元素本身的隐藏

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

常见属性：

visibility:hidden
display:none

区别：visibility:hidden占位隐藏

display:none不占位隐藏

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

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

            background-color: pink;
        }
        .two {
            background-color: skyblue;
        }

六、元素整体透明度

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

属性名：opacity

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

1：完全不透明
0:完全透明

注意点：

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

先吃点再说

关注

12
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
前端开发学习——CSS装饰

浏览器运行效果：由此可以看出，img父级盒子高度与img高度不同，且略大。场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条......场景：让某个元素本身在屏幕中不可见，如：鼠标:hover之后元素隐藏。赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！场景：让盒子四个角落变得圆润，增加页面细节，提升用户体验。属性名：border-radius（边框半径）场景：设置鼠标光标在元素上时的显示样式。属性名：vertical-align。属性名：cursor（光标）属性名：overflow。
复制链接

扫一扫