Web前端，CSS简单的元素装饰效果的了解，如：垂直对齐方式、overflow溢出等等

最新推荐文章于 2022-11-09 16:14:33 发布

星辰迷上大海

最新推荐文章于 2022-11-09 16:14:33 发布

阅读量481

点赞数

分类专栏： HTML+CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_37255976/article/details/124671359

版权

HTML+CSS 专栏收录该内容

29 篇文章 7 订阅

订阅专栏

前言

持续学习总结输出中，今天分享的是Web前端，CSS简单的元素装饰效果的了解，如：垂直对齐方式、overflow溢出等等

1、垂直对齐方式

1.1 认识基线(了解)

基线:浏览器文字类型元素排版中存在用于对齐的基线(baseline)

当图片和文字在一行中显示时，其实底部不是对齐的，默认是基线对齐，就需要用到对齐方式来处理这个问题。
在这里插入图片描述

1.2 垂直对齐方式

垂直对齐方式：vertical-align

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

vertical-align:baseline;
vertical-align:top;
vertical-align:middle;
vertical-align:bottom;

在项目中 vertical-align 可以解决的那些问题

文本框和表单按钮无法对齐问题
input和img无法对齐问题
div中的文本框，文本框无法贴顶问题
div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
使用line-height让img标签垂直居中问题

注意点:

• 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
• 推荐优先使用浮动完成效果

小结

设置行内/行内块元素垂直对齐方式的属性是什么?
• vertical-align

垂直对齐方式的常见取值有哪些?

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

2、光标类型

垂直对齐方式：cursor

设置鼠标光标移动到元素上时显示的样式

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

cursor:default;
cursor:pointer;
cursor:text;
cursor:move;

小结
光标类型属性的属性名是什么?
• 属性名:cursor

光标类型属性的常见属性值有哪些?

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

3、边框圆角

边框圆角：border-radius

我们在项目中使用边框圆角是为了让盒子四个角变得圆润，增加页面细节，提升用户体验

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

代码参考：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .one {
            width: 200px;
            height: 200px;
            background-color: pink;

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

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

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

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

运行结果：
请添加图片描述
小结：

如果需要在网页中用盒子展示出一个正圆，应该如何完成?

盒子必须是正方形
设置 → border-radius:50%

如果需要在网页中用盒子展示出一个胶囊按钮，应该如何完成?

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

4、overflow溢出部分显示效果

溢出：overflow

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

项目中常用来控制内容溢出部分的显示效果，如:显示、隐藏、滚动条…

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

overflow:visible;
overflow:hidden;
overflow:scroll;
overflow:auto;

小结：

设置溢出部分显示效果的属性名是什么?
• 属性名:overflow

设置溢出部分显示效果的常见属性值有哪些?

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