其他分享
首页 > 其他分享> > 装饰

装饰

作者:互联网

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之间的数字

注意点:

标签:场景,元素,装饰,对齐,隐藏,溢出,属性
来源: https://www.cnblogs.com/lkim/p/16497325.html