CSS定位装饰-装饰

目录

基线baseline：

光标 

边框圆角

溢出部分显示效果

元素本身隐藏

元素整体透明度

---

基线baseline：

浏览器文字类型元素排版中存在用于对齐的基线 

应用场景

1. 浏览器遇到行内和行内块标签当作文字处理，默认文字是按基线对齐 如果不对齐 添加vertical align：middle
2. 想要完全顶对齐 用vertical align：top  底对齐：bottom
3. 让图片在盒子垂直居中 在父级设置行高=高度，把图加一个vertical align：middle属性
4. 让图片在盒子水平居中  在父级设置text-align：center属性

光标 

设置鼠标在元素上显示的样式

属性：cursor

属性值	效果
default	默认，箭头
pointer	小手效果 提示可以点击
text	工字形 提示可以选择
十字光标	提示可以移动

边框圆角

属性：border-radius

常见取值：数字+px、百分比

从左上角开始赋值 然后顺时针赋值 没有赋值的看对角

一个值：表示四个角值相同 

常用应用

• 画一个正圆：盒子必须是正方形 设置边框圆角为盒子一半--> border-radius：50%
• 胶囊按钮：盒子要求是长方形 -->border-radius：盒子高度一半

溢出部分显示效果

溢出部分：指的是盒子 内容部分 所超出盒子范围的区域

场景：控制内容溢出部分的显示效果显示、隐藏、滚动条

属性名：overflow

属性值	效果
visible	默认值
hidden	溢出部分隐藏
scroll	无论是否溢出 都显示滚动条
auto	根据是否溢出 自动显示或隐藏滚动条

元素本身隐藏

场景：让元素本身在屏幕不可见 如：鼠标hover以后元素隐藏

常见属性：

1.visibility：hidden

2.display：none

区别：visibility：占位隐藏

display：不占位置（常用）

元素整体透明度

属性名：opacity

属性值：0～1间的数字

• 1：完全不透明
• 0:完全透明

注意：会让元素整体透明 包括文字、子元素等