CSS基础-装饰
目录
- CSS基础-装饰
-
- 1.1 认识基线(了解)
- 1.2 文字对齐问
- 1.3 垂直对齐方式
- (拓展)项目中 vertical-align 可以解决的问题
- 2.1 光标类型
- 3.1 边框圆角
- 3.2 边框圆角的常见应用
- 4.1 溢出部分显示效果
- 5.1 元素本身隐藏
- (拓展)元素整体透明度
- (拓展)边框合并
- (拓展)用CSS画三角形技巧(面试题)常用
- (拓展)用CSS画三角形技巧(面试题)
- 选择器拓展
- 1.1 链接伪类选择器
- 2.1 焦点伪类选择器
- 3.1 属性选择器
-
目标：能够完成元素的装饰效果
学习路径：
1. 垂直对齐方式
2. 光标类型
3. 边框圆角
4. overflow溢出部分显示效果
5. 元素本身隐藏1.1 认识基线(了解)
1.2 文字对齐问
1.3 垂直对齐方式
(拓展)项目中 vertical-align 可以解决的问题
1. 文本框和表单按钮无法对齐问题
2. input和img无法对齐问题
3. div中的文本框，文本框无法贴顶问题
4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
5. 使用line-height让img标签垂直居中问题
➢ 注意点：
• 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
• 推荐优先使用浮动完成效果
2.1 光标类型
测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* 手型 */
cursor: pointer;
/* 工字型, 表示可以复制 */
/* cursor: text; */
/* 十字型, 表示可以移动 */
/* cursor: move; */
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>3.1 边框圆角
3.2 边框圆角的常见应用
4.1 溢出部分显示效果
测试：
5.1 元素本身隐藏
(拓展)元素整体透明度
➢ 场景：让某元素整体(包括内容)一起变透明
➢ 属性名：opacity
➢ 属性值：0~1之间的数字
• 1：表示完全不透明
• 0：表示完全透明
➢ 注意点：
• opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……
(拓展)边框合并
测试结果：
(拓展)用CSS画三角形技巧(面试题)常用
(拓展)用CSS画三角形技巧(面试题)
测试结果：
选择器拓展
1.1 链接伪类选择器
2.1 焦点伪类选择器
![[附源码]计算机毕业设计海南与东北的美食文化差异及做法的研究展示平台Springboot程序](https://img-blog.csdnimg.cn/b554991cdeaf45e490590041c6ccc595.png)
![[附源码]Python计算机毕业设计SSM基于的楼盘销售系统（程序+LW)](https://img-blog.csdnimg.cn/83ca8fcb8dda4f2b8f7c0ae2ec4404e8.png)
