一.垂直对齐方式：vertical-align
- 浏览器会把行内块，行内标签都当做文字处理，根据基线对齐(通常以文字的底部为基线)，就会导致图片和文字一上一下的效果，有些文字超出基线以下，故图片会和基线留有空白
- 设置vertical-aligin:middle（要作用在行内行内块的最高的一个上）比如文字和图片放一起作用在图片上（图片较高）可选效果有：top middle bottom
- 图片底部留有空白转为块级display:block就不按基线对齐
二.过度属性： transition
- 可以为一个元素在不同状态之间切换的时候添加过度效果
1 | <style> |
三.透明度 opacity
- 设置整个元素的透明度（包含背景和内容）
- 属性名：opacity 属性值可选0-1之间的内容，0:完全透明 1:不透明
- 用户点击一个超链接背景图片变成半透明
四. 光标属性cursor
| 属性值 | 效果 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工具型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
- 鼠标悬停在元素上时指针显示样式
五. overflow:隐藏超出元素盒子范围的内容
overflow: hidden; 的作用是隐藏超出元素盒子范围的内容，但它还有一个常用的副作用：可以触发 BFC（块级格式化上下文）。
在实际开发中，父元素如果只包含浮动子元素，父元素高度会塌陷（高度为0），这时给父元素加上 overflow: hidden;，就会触发 BFC，父元素会包裹住所有浮动子元素，从而防止高度塌陷。
总结：overflow: hidden; 触发了BFC，BFC可以让父元素自动包含内部的浮动元素，防止高度塌陷。
