CSS基础-装饰
目录
目标：能够完成元素的装饰效果
学习路径：
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 焦点伪类选择器
