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

(15) 2024-03-31 19:01:01

前言

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


1、垂直对齐方式

1.1 认识基线(了解)

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

当图片和文字在一行中显示时,其实底部不是对齐的,默认是基线对齐,就需要用到对齐方式来处理这个问题。
Web前端,CSS简单的元素装饰效果的了解,如:垂直对齐方式、overflow溢出等等 (https://mushiming.com/)  第1张

1.2 垂直对齐方式

垂直对齐方式:vertical-align

属性值 效果
baseline 默认,基线对齐
top 顶部对齐
middle 中部对齐
bottom 底部对齐
vertical-align:baseline;
vertical-align:top;
vertical-align:middle;
vertical-align:bottom;

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

  1. 文本框和表单按钮无法对齐问题
  2. input和img无法对齐问题
  3. div中的文本框,文本框无法贴顶问题
  4. div不设高度由img标签撑开,此时img标签下面会存在额外间隙问题
  5. 使用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>

运行结果:
Web前端,CSS简单的元素装饰效果的了解,如:垂直对齐方式、overflow溢出等等 (https://mushiming.com/)  第2张
小结:

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

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

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

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

4、overflow溢出部分显示效果

溢出:overflow

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

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

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

小结:

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

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

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

5、元素本身隐藏

在项目中常用于让某元素本身在屏幕中不可见。如:鼠标:hover之后元素隐藏

常见属性:

visibility:hidden
 display:none

区别:

  1. visibility:hidden 隐藏元素本身,并且在网页中 占位置
  2. display:none 隐藏元素本身,并且在网页中 不占位置

注意点:

• 开发中经常会通过 display属性完成元素的显示隐藏切换
• display:none;(隐藏)、 display:block;(显示)

小结

设置元素本身显示与隐藏的常用代码是什么?
• 元素隐藏 → display:none
• 元素显示 → display:block

6、元素整体透明度(了解)

透明度:opacity

让某元素整体(包括内容)一起变透明

属性值:0~1之间的数字
• 1:表示完全不透明
• 0:表示完全透明

注意点:

• opacity会让元素整体透明,包括里面的内容,如:文字、子元素等…

总结

Web前端,CSS简单的元素装饰效果的了解,如:垂直对齐方式、overflow溢出等等 (https://mushiming.com/)  第3张

最后分享一句话:

顺应时势,改变创新,是任何时候都不过时的道理。
《万历十五年》
——黄仁宇

本次的分享就到这里了!!!

欢迎在评论区留言讨论!!!

THE END

发表回复