作者:bale999_816 | 来源:互联网 | 2023-01-25 13:13
1.1 文字对齐问题场景:解决行内行内块元素垂直对齐问题问题:当图片和文字在一行中显示时,其实底部不是对齐的1.2 垂直对齐方式属性名:vertical-align属性值:属性值效
文章目录[隐藏]
- 1.1 文字对齐问题
- 1.2 垂直对齐方式
- 2.1 光标类型
- 3.1 边框圆角
- 5.1 元素本身隐藏
- (拓展)元素整体透明度
1.1 文字对齐问题
场景:解决行内/行内块元素垂直对齐问题
问题:当图片和文字在一行中显示时,其实底部不是对齐的
1.2 垂直对齐方式
属性名:vertical-align
属性值:
属性值 |
效果 |
baseline |
默认,基线对齐 |
top |
顶部对齐 |
middle |
中部对齐 |
bottom |
底部对齐 |
2.1 光标类型
场景:设置鼠标光标在元素上时显示的样式
属性名:cursor
常见属性值:
属性值 |
效果 |
default |
默认值,通常是箭头 |
pointer |
小手效果,提示用户可以点击 |
text |
工字型,提示用户可以选择文字 |
move |
十字光标,提示用户可以移动 |
3.1 边框圆角
场景:让盒子四个角变得圆润,增加页面细节,提升用户体验
属性名:border-radius
常见取值:数字+px、百分比
赋值规则:从左上角开始赋值,然后顺时针赋值,没有赋值的看对角!
4.1 溢出部分显示效果
溢出部分:指的是盒子内容部分所超出盒子范围的区域
场景:控制内容溢出部分的显示效果,如:显示、隐藏、滚动条......
属性名:overflow
常见属性值:
属性值 |
效果 |
visible |
默认值,溢出部分可见 |
hidden |
溢出部分隐藏 |
scroll |
无论是否溢出,都显示滚动条 |
auto |
根据是否溢出,自动显示或隐藏滚动条 |
5.1 元素本身隐藏
场景:让某元素本身在屏幕中不可见。如:鼠标:hover之后元素隐藏
常见属性:
1. display: none 不占位隐藏
2. visibility: hidden 占位隐藏
(拓展)元素整体透明度
场景:让某元素整体(包括内容)一起变透明
属性名:opacity
属性值:0~1之间的数字
注意点:
- opacity会让元素整体透明,包括里面的内容,如文字、子元素等......