CSS（六）

目录

🍓一、装饰

✨1、垂直对齐方式

🎈1.1、认识基线

🎈1.2、文字对齐问题

🎈1.3、垂直对齐方式

✨2、光标类型

✨3、边框圆角

✨4、overflow溢出部分显示效果

✨5、元素本身隐藏

🍓二、选择器拓展

✨1、链接伪类选择器

✨2、焦点伪类选择器

✨3、属性选择器

---

🍓一、装饰

✨1、垂直对齐方式

🎈1.1、认识基线

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

    

🎈1.2、文字对齐问题

场景：解决行内/行内块元素垂直对齐问题
问题：当图片和文字在一行中显示时，其实底部不是对齐的

🎈1.3、垂直对齐方式

属性名：vertical-align
属性值：

✨2、光标类型

场景：设置鼠标光标在元素上时显示的样式
属性名：cursor
常见属性值：

✨3、边框圆角

场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
属性名：border-radius
常见取值：数字+px 、百分比
原理：

                
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！

✨4、overflow溢出部分显示效果

溢出部分：指的是盒子 内容部分 所超出盒子范围的区域
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条......
属性名：overflow
常见属性值：

✨5、元素本身隐藏

场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏
常见属性：
        1. visibility：hidden
        2. display：none
区别：
        1. visibility：hidden 隐藏元素本身，并且在网页中 占位置
        2. display：none 隐藏元素本身，并且在网页中 不占位置
注意点：
        • 开发中经常会通过 display属性完成元素的显示隐藏切换
        • display：none；（隐藏）、 display：block；（显示）

（拓展）元素整体透明度

场景：让某元素整体（包括内容）一起变透明
属性名：opacity
属性值：0~1之间的数字
        • 1：表示完全不透明
        • 0：表示完全透明
注意点：
        • opacity会让元素整体透明，包括里面的内容，如：文字、子元素等......

🔶🔶🔶🔶🔶 我是华丽的分割线 🔶🔶🔶🔶🔶

🍓二、选择器拓展

✨1、链接伪类选择器

场景：常用于选中超链接的不同状态
选择器语法：

注意点：
        • 如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写
        • 其中 :hover伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态

✨2、焦点伪类选择器

场景：用于选中元素获取焦点时状态，常用于表单控件
选择器语法：

效果：
        • 表单控件获取焦点时默认会显示外部轮廓线

✨3、属性选择器

场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签
选择器语法：