认识基线
基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）
文字对齐问题
场景：解决行内/行内块元素垂直对齐问题
Ø 问题：当图片和文字在一行中显示时，其实底部不是对齐的
垂直对齐方式
属性名：vertical-align 属性值:
项目中 vertical-align 可以解决的问题
-
文本框和表单按钮无法对齐问题
-
input和img无法对齐问题
-
div中的文本框，文本框无法贴顶问题
-
div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
-
使用line-height让img标签垂直居中问题
注意点：
学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
推荐优先使用浮动完成效果
光标类型
场景：设置鼠标光标在元素上时显示的样式
Ø 属性名：cursor 常见属性值
边框圆角
场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
Ø 属性名：border-radius
Ø 常见取值：数字+px 、百分比
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
边框圆角的常见应用
画一个正圆：
-
盒子必须是正方形
-
设置边框圆角为盒子宽高的一半 → border-radius:50%
Ø 胶囊按钮：
-
盒子要求是长方形
-
设置 → border-radius：盒子高度的一半
溢出部分显示效果
溢出部分：指的是盒子 内容部分 所超出盒子范围的区域
Ø 场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
Ø 属性名：overflow
Ø 常见属性值：
元素本身隐藏
场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏
Ø 常见属性：
-
visibility：hidden
-
display：none
Ø 区别：
-
visibility：hidden 隐藏元素本身，并且在网页中 占位置
-
display：none 隐藏元素本身，并且在网页中 不占位置
Ø 注意点：
开发中经常会通过 display属性完成元素的显示隐藏切换
display：none；（隐藏）、 display：block；（显示）
元素整体透明度
场景：让某元素整体（包括内容）一起变透明
Ø 属性名：opacity
Ø 属性值：0~1之间的数字
1：表示完全不透明
0：表示完全透明
Ø 注意点：
opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……
边框合并
场景：让相邻表格边框进行合并，得到细线边框效果
Ø 代码：border-collapse：collapse；
选择器拓展
链接伪类选择器
场景：常用于选中超链接的不同状态
Ø 选择器语法
注意点：
如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写
记忆口诀：男盆友送了你一个 LV 包包，你开心的 HA 哈笑
其中 :hover伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态
焦点伪类选择器
场景：用于选中元素获取焦点时状态，常用于表单控件 选择器语法 input:focus: {background-color:skyblue;}
效果：
表单控件获取焦点时默认会显示外部轮廓线
属性选择器
场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签
选择器语法
