CSS基础-装饰,基线，光标类型，边框圆角（胶囊），文字溢出，元素隐藏，边框合并，css画三角形

CSS基础-装饰

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>