CSS 【详解】CSS 函数(含 calc,min,max,clamp,cubic-bezier,env,steps 等)
| 函数 | 描述 | CSS 版本 |
|---|---|---|
| attr() | 返回选择元素的属性值。 | 2 |
| calc() | 允许计算 CSS 的属性值,比如动态计算长度值。 | 3 |
| cubic-bezier() | 定义了一个贝塞尔曲线(Cubic Bezier)。 | 3 |
| hsl() | 使用色相、饱和度、亮度来定义颜色。 | 3 |
| hsla() | 使用色相、饱和度、亮度、透明度来定义颜色。 | 3 |
| linear-gradient() | 创建一个线性渐变的图像 | 3 |
| radial-gradient() | 用径向渐变创建图像。 | 3 |
| repeating-linear-gradient() | 用重复的线性渐变创建图像。 | 3 |
| repeating-radial-gradient() | 类似 radial-gradient(),用重复的径向渐变创建图像。 | 3 |
| rgb() | 使用红®、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。 | 2 |
| rgba() | 使用红®、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。 | 3 |
| var() | 用于插入自定义的属性值。 | 3 |
calc() 计算
-
不能使用当前CSS属性不支持的数据类型。
-
运算符前后带单位或者带百分号的值只能进行加减运算,不能进行乘除运算
-
除法运算斜杠右侧必须是不为0的数值类型
-
加号和减号左右两边一定要有空格,乘法和除法符号两侧无须空格
-
可以嵌套使用
width: calc(calc(100% - 2rem) / 6);
【实战】自适应布局
width: calc(100% - 20px);
【实战】根据设备屏幕设定根字号大小
html {font-size: calc(16px + 2 * (100vw - 375px) / 39);
}
【实战】无法除尽的等比分配
width: calc(100% / 6);
【实战】制作进度条
https://demo.cssworld.cn/new/4/5-1.php
min() 最小值
实际效果是限制最大值,适用于弹性布局
如:网页在桌面端浏览器中的宽度为1024px,在移动端的宽度为100%
width: min(1024px, 100%);
max() 最大值
实际效果是限制最小值,适用于弹性布局
width: max(10vw, 5em, 80px);
clamp() 区间值
clamp(MIN, VAL, MAX)
返回一个区间范围的值,等同于max(MIN, min(VAL, MAX)),适用于弹性布局
-
如果VAL在MIN~MAX范围内,则使用VAL作为函数返回值;
-
如果VAL大于MAX,则使用MAX作为返回值;
-
如果VAL小于MIN,则使用MIN作为返回值。
【实战】字体大小随浏览器宽度变化
html {font-size: 16px;font-size: clamp(16px, calc(16px + 2 * (100vw - 375px) / 39), 20px);
}
cubic-bezier() 贝塞尔曲线
https://blog.csdn.net/weixin_41192489/article/details/120732220
env() 环境变量
https://blog.csdn.net/weixin_41192489/article/details/120985761
steps() 跳跃动画
https://blog.csdn.net/weixin_41192489/article/details/120732404
相关文章:
CSS 【详解】CSS 函数(含 calc,min,max,clamp,cubic-bezier,env,steps 等)
函数描述CSS 版本attr()返回选择元素的属性值。2calc()允许计算 CSS 的属性值,比如动态计算长度值。3cubic-bezier()定义了一个贝塞尔曲线(Cubic Bezier)。3hsl()使用色相、饱和度、亮度来定义颜色。3hsla()使用色相、饱和度、亮度、透明度来定义颜色。3linear-grad…...
简单理解Lua 协程(coroutine)
也许更好的阅读体验 协程简单理解为可以暂停的线程,但是同一时刻只有一个协程可以处于运行状态。 文章目录 coroutine.create()coroutine.resume()coroutine.wrap()coroutine.yield()coroutine.resume()参数传递resume和yield之间互换数据 coroutine.create() lua…...
(day18) leetcode 204.计数质数
描述 给定整数 n ,返回 所有小于非负整数 n 的质数的数量 。 示例 1: 输入:n 10 输出:4 解释:小于 10 的质数一共有 4 个, 它们是 2, 3, 5, 7 。示例 2: 输入:n 0 输出:0示例 3…...
SadTalker数字人服务器部署
一、单独SadTalker部署 git clone https://github.com/OpenTalker/SadTalker.gitcd SadTalker conda create -n sadtalker python3.8conda activate sadtalkerpip install torch1.12.1cu113 torchvision0.13.1cu113 torchaudio0.12.1 --extra-index-url https://download.pyto…...
Python实现一对多WebSocket发送给指定多个客户端
在一对多的WebSocket场景下,如果你想要向特定的多个客户端发送消息,而不是广播给所有客户端,你需要维护一个能够标识每个客户端的方式,比如使用用户名或者客户端ID。这样,你就可以根据需要选择向哪些客户端发送消息。 …...
Power BI 工具介绍
Power BI是一款商业智能(BI)软件,由微软开发,旨在帮助用户将复杂的数据转化为视觉化的交互式见解。Power BI提供了一套完整的工具,包括数据连接、数据准备、数据建模、数据分析和数据可视化等功能,使用户能…...
银河麒麟高级服务器操作系统V10加固操作指南
1:检查系统openssh安全配置: 2:检查是否设置口令过期前警告天数: 3:检查账户认证失败次数限制: 修改/etc/pam.d/system-auth文件中deny的参数即可 4:检查是否配置SSH方式账户认证失败次数限制:...
(leetcode学习)15. 三数之和
给你一个整数数组 nums ,判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ,同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意:答案中不可以包含重复的三元组。 示例 1&a…...
算法训练 | 图论Part8 | 117. 软件构建、47. 参加科学大会
目录 117. 软件构建 拓扑排序法 47. 参加科学大会 dijkstra法 117. 软件构建 题目链接:117. 软件构建 文章讲解:代码随想录 拓扑排序法 代码一:拓扑排序 #include <iostream> #include <vector> #include <queue> …...
编程从零基础到进阶(更新中)
题目描述 依旧是输入三个整数,要求按照占8个字符的宽度,并且靠左对齐输出 输入格式 一行三个整数,空格分开 输出格式 输出它们按格式输出的效果,占一行 样例输入 123456789 -1 10 样例输出 123456789-1 10 #include "stdio.…...
MySQL运维实战之ProxySQL(9.6)SQL黑名单
作者:俊达 利用mysql_query_rules表中的error_msg字段,可以实现SQL黑名单的功能。如果规则设置了error_msg,当SQL语句匹配这条规则时,proxysql会直接将error_msg的内容返回给客户端。 当遇到一些大查询严重影响数据库性能时&…...
深入了解MySQL中的innodb_lock_wait_timeout
引言 在数据库管理中,确保数据的一致性和完整性是至关重要的。MySQL的InnoDB存储引擎通过行级锁定机制来实现这一点。然而,当多个事务同时操作数据库时,可能会出现锁等待的情况。了解并合理配置innodb_lock_wait_timeout参数,对于…...
102.qt qml-最全Table交互之多列固定、行列拖拽、自定义委托、标题交互使用教程
自定义实现的Table控件,支持跨qt版本,兼容qt5,qt6! 截图如下所示: 黑色风格如下所示: 视频演示入口:Qt QML QianWindowV2.5(新增曲线综合示例、QML最全Table交互示例、支持qt5/qt6)_哔哩哔哩_bilibili 1.示例页面入口…...
文章管理小程序的设计
管理员账户功能包括:系统首页,个人中心,作者管理,文章管理,文章分类管理,论坛,系统管理 微信端账号功能包括:系统首页,文章,论坛,我的 开发系统…...
Ubuntu22.04安装NIVIDIA显卡驱动总结
1.首先在安装驱动时需要判断系统有无GPU以及GPU的型号 可以参考这篇文章: https://blog.51cto.com/u_13171517/8814753#:~:textubuntu%20%E7%B3%BB%E7%BB%9F%20%E6%80%8E%E4%B9%88%E5%88%A4%E6%96%AD%E7%B3%BB%E7%BB%9F%E6%9C%89%E6%B2%A1%E6%9C%89GPU%201%20%E6%…...
Redis的配置优化、数据类型、消息队列
文章目录 一、Redis的配置优化redis主要配置项CONFIG 动态修改配置慢查询持久化RDB模式AOF模式 Redis多实例Redis命令相关 二、Redis数据类型字符串string列表list集合 set有序集合sorted set哈希hash 三、消息队列生产者消费者模式发布者订阅者模式 一、Redis的配置优化 redi…...
数据结构之初始二叉树(2)
找往期文章包括但不限于本期文章中不懂的知识点: 个人主页:我要学编程(ಥ_ಥ)-CSDN博客 所属专栏:数据结构(Java版) 二叉树的前置知识(概念、性质、、遍历) 通过上篇文章的学习,我们…...
如何预防最新的baxia变种勒索病毒感染您的计算机?
引言 在当今数字化时代,网络安全威胁层出不穷,其中勒索病毒已成为企业和个人面临的重大挑战之一。近期,.baxia勒索病毒以其高隐蔽性和破坏性引起了广泛关注。本文将详细介绍.baxia勒索病毒的特点、传播方式,并给出相应的应对策略…...
git列出提交记录的文件路径
一、如何列出某次提交记录中修改过/新增的文件? 方法1:使用 git diff-tree 命令来查看某个提交记录中修改过/新增的文件。具体来说,你可以使用以下命令: git diff-tree --no-commit-id --name-only -r <commit-hash>命令解…...
微信小程序密码 显示隐藏 真机兼容问题
之前使用type来控制,发现不行,修改为password属性即可 <van-fieldright-icon"{{passwordType password? closed-eye:eye-o}}"model:value"{{ password }}"password"{{passwordType password ? true: false}}"borde…...
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...
Appium+python自动化(十六)- ADB命令
简介 Android 调试桥(adb)是多种用途的工具,该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利,如安装和调试…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
【2025年】解决Burpsuite抓不到https包的问题
环境:windows11 burpsuite:2025.5 在抓取https网站时,burpsuite抓取不到https数据包,只显示: 解决该问题只需如下三个步骤: 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
反射获取方法和属性
Java反射获取方法 在Java中,反射(Reflection)是一种强大的机制,允许程序在运行时访问和操作类的内部属性和方法。通过反射,可以动态地创建对象、调用方法、改变属性值,这在很多Java框架中如Spring和Hiberna…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
scikit-learn机器学习
# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...
在 Spring Boot 项目里,MYSQL中json类型字段使用
前言: 因为程序特殊需求导致,需要mysql数据库存储json类型数据,因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...
LangChain 中的文档加载器(Loader)与文本切分器(Splitter)详解《二》
🧠 LangChain 中 TextSplitter 的使用详解:从基础到进阶(附代码) 一、前言 在处理大规模文本数据时,特别是在构建知识库或进行大模型训练与推理时,文本切分(Text Splitting) 是一个…...
uni-app学习笔记三十五--扩展组件的安装和使用
由于内置组件不能满足日常开发需要,uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件,需要安装才能使用。 一、安装扩展插件 安装方法: 1.访问uniapp官方文档组件部分:组件使用的入门教程 | uni-app官网 点击左侧…...
