Web前端，CSS简单的元素装饰效果的了解，如：垂直对齐方式、overflow溢出等等
前言
持续学习总结输出中，今天分享的是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 | 根据是否溢出，自动显示或隐藏滚动条 |
5、元素本身隐藏
在项目中常用于让某元素本身在屏幕中不可见。如:鼠标:hover之后元素隐藏
常见属性:
visibility:hidden
display:none
区别:
- visibility:hidden 隐藏元素本身，并且在网页中 占位置
- display:none 隐藏元素本身，并且在网页中 不占位置
注意点:
• 开发中经常会通过 display属性完成元素的显示隐藏切换
• display:none;(隐藏)、 display:block;(显示)
小结
设置元素本身显示与隐藏的常用代码是什么?
• 元素隐藏 → display:none
• 元素显示 → display:block
6、元素整体透明度（了解）
透明度：opacity
让某元素整体(包括内容)一起变透明
属性值:0~1之间的数字
• 1:表示完全不透明
• 0:表示完全透明
注意点:
• opacity会让元素整体透明，包括里面的内容，如:文字、子元素等…
总结
最后分享一句话：
顺应时势，改变创新，是任何时候都不过时的道理。
《万历十五年》
——黄仁宇
本次的分享就到这里了！！！
欢迎在评论区留言讨论！！！
