一些css属性学习

一、vertical-align

在学习这个属性之前我们先了解一下父元素和子元素基线的概念：

1、子元素的基线（Baseline of Child Elements）：

子元素的基线是指子元素内文本的底部边缘，特别是字母的底部边缘。在包含文本的元素中，每个字母都有一个基线，这个基线决定了文本的垂直对齐方式。例如，字母 "x" 的基线就是 "x" 字母底部的那条线。如下图：

对于y、p、q这类占有下位格的，基线定义时并不考虑底下突出部位。

2、父元素的基线（Baseline of Parent Element）：

父元素的基线是指父元素内所有子元素的基线中的最低点。在一个容器中，如果包含多个子元素（例如文字行或内联元素），它们的基线会在父元素内形成一个基线。这个父元素的基线通常用于将多个文本行或内联元素垂直对齐到一个共同的基准线上，以实现一致的文本排列效果。

这里aw...基线低于1，故父元素基线如图所示以aw..为准。

基本概念：

下面开始学习vertical-align:

vertical-align用来指定行内元素（inline）或表格单元格（table-cell）以及图片的垂直对齐方式。++对于块级元素，vertical-align是不起作用的。++

它有如下几种类型的值：

属性属性值

线类如 baseline、top、middle、bottom

文本类如 text-top、text-bottom

上标下标类如 sub、super

数值百分比类如 px、em、%等

baseline: 元素基线与父元素基线对齐（默认值）

top: 元素顶部与行框顶部对齐

middle: 元素中部与父元素基线上方 0.5ex 处对齐

bottom: 元素底部与行框底部对齐

text-top: 元素顶部与父元素字体顶部对齐

text-bottom: 元素底部与父元素字体底部对齐

sub: 元素作为下标显示

super: 元素作为上标显示

<length>: 使用具体长度值调整垂直位置

<percentage>: 相对于 line-height 的百分比值

属性	属性值
线类	如 baseline、top、middle、bottom
文本类	如 text-top、text-bottom
上标下标类	如 sub、super
数值百分比类	如 px、em、%等

使用示例：

1、vertical-align:top，让元素顶部与行框顶部对齐。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .b2{
            margin-top: 50px;
            height: 100px;
            border-radius: 12px;
            min-width: 100px;
            padding: 10px;
            font-size: 18px;
        }
        span{
            vertical-align: top;
            margin-left: 10px;
            font-size: 14px;
        }
    </style>
</head>
<body style="display: flex;justify-content: center;align-items: center;padding: 0;flex-direction: column;">
    <div class="b2"> 
        awdawdawdawdawdwad<span style="font-size: 14px;">1</span>
    </div>
</body>
</html>

2、vertical-align:bottom，让元素顶部与行框底部对齐。

3、vertical-align:middle，元素中部与父元素基线上方 0.5ex 处对齐,用与不同inline元素居中

使用场景：

一行内文字、图片这类inline的垂直方向对其，下面有几个使用该属性解决一些样式痛点。

1、解决label与textarea无法顶部对齐的问题：

默认情况下是vertical-align:baseline对齐方式，即所有基线以最底部基线为准对齐，当label和textarea都为inline时，会出现以下情况：

预期1和textarea顶部应该对齐，但为底部对齐

修改代码，设置vertical-align为top:

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body style="display: flex;justify-content: center;align-items: center;padding: 0;flex-direction: column;">
    <div class="b3">
        <label for="text1">1</label>
        <textarea name="text1" style="width: 100px;height: 100px;vertical-align: top;" id="text1"></textarea>
    </div>
</body>
</html>

效果：

二、禁用复制

为了不让用户复制内容，使用下面的属性禁止选择

html 复制代码

<div unselectable="on" onselectstart="return false;">
        <!-- countent... -->
</div>

三、filter滤镜

核心作用是对元素（包括其内容、背景、子元素）施加图形学滤镜效果，比如模糊、变色、对比度调整等。

语法格式：

css 复制代码

/* 单个滤镜 */
filter: <filter-function>;

/* 多个滤镜（按顺序叠加，前一个效果会作用于后一个的输入） */
filter: <filter-function1> <filter-function2> ...;

/* 无滤镜（默认值） */
filter: none;

/* 继承父元素滤镜 */
filter: inherit;

可选函数：

函数	作用	取值规则	踩坑点
`blur(<length>)`	高斯模糊	取值为长度单位（px/em/rem，不能用 %），数值越大越模糊	1. 模糊会扩展元素的点击 / 交互区域（比如 `blur(10px)` 后，元素可点击范围比原尺寸大 10px）；2. 大数值模糊（如 `blur(50px)`）会显著增加性能开销，移动端建议控制在 20px 内
`brightness(<number> / <percentage>)`	调整亮度	数值 / 百分比：- 1/100%：原亮度；- <1：变暗；>1：变亮；- 0：全黑	百分比带 % 符号，数值无单位（如 `brightness(1.5)` = `brightness(150%)`）
`contrast(<number> / <percentage>)`	调整对比度	取值规则同 brightness：- 1/100%：原对比度；- 0：全灰；>1：对比度提升	高对比度（如 >2）可能导致图片细节丢失，文字易糊
`grayscale(<number> / <percentage>)`	灰度化	取值 0~1/0%~100%：- 0：原色；1/100%：完全灰度	常用于 "hover 恢复彩色" 交互（默认灰度，hover 设 0）
`opacity(<number> / <percentage>)`	透明度	取值 0~1/0%~100%，效果类似 `opacity` 属性	区别：1. `filter: opacity()` 会触发 GPU 加速，性能优于原生 `opacity`；2. 原生 `opacity` 会影响子元素的交互透明度，而 `filter: opacity()` 虽视觉效果一致，但层叠上下文逻辑不同
`saturate(<number> / <percentage>)`	饱和度	取值规则同 brightness：- 1/100%：原饱和度；- 0：灰度（等效 grayscale (1)）；>1：饱和度提升	高饱和度（如 >3）易出现色彩溢出，文字可读性下降
`hue-rotate(<angle>)`	色相旋转	取值为角度（deg/rad/grad/turn），如 `hue-rotate(90deg)`	旋转基于 HSL 色相环（0deg = 红，120deg = 绿，240deg = 蓝），仅改变色相，不影响亮度 / 饱和度
`invert(<number> / <percentage>)`	颜色反转	取值 0~1/0%~100%：- 1/100%：完全反转（白变黑、红变青）	对图片 / 纯色背景生效，对文字反转后需注意可读性
`drop-shadow(<offset-x> <offset-y> <blur-radius> <color>)`	投影效果	语法类似 `box-shadow`，但有核心区别：- `drop-shadow` 是 "基于元素 Alpha 通道的投影"（仅对非透明区域加阴影）；- `box-shadow` 是 "基于元素盒模型的投影"（不管内容，给整个盒子加阴影）	1. 不支持 `inset` 内阴影；2. 无 "扩展半径" 参数（box-shadow 第四个参数）；3. 性能优于 box-shadow（尤其模糊大时）
`sepia(<number> / <percentage>)`	褐色调（老照片效果）	取值 0~1/0%~100%：1/100% 完全褐色	常与 `brightness` 配合调整老照片质感

基本示例：

1、blur()

blur函数传递的参数值越大越模糊：

|-------------------|----------------------------------------------------------------------------|
| 当blur(0px)时： | |
| 当blur(5px)时： | |
| 当blur(20px)时： | |

2、brightness()

brightness函数传递的参数越大亮度越大，默认100%
html 复制代码
<div style="width: 100px;height: 100px;background-color: skyblue;border-radius: 12px;filter:brightness(20%);margin-top: 50px;"></div>
|------|----------------------------------------------------------------------------|
| 150% | |
| 100% | |
| 70% | |
| 20% | |

3、saturate饱和度

**saturate**函数传递的参数越大饱和度越大(即越鲜艳)，默认100%
html 复制代码
<div style="width: 100px;height: 100px;background-color: greenyellow;border-radius: 12px;filter:saturate(30%);margin-top: 50px;"></div>
|------|----------------------------------------------------------------------------|
| 150% | |
| 100% | |
| 70% | |
| 30% | |

总的来说可以通过filter属性调整颜色、透明度等的元素显示效果，适当的设置可以提高用户体验。