CSS函数: 实现数据限阈的数字函数

CSS函数中提供了几个比较实用的数字函数,它可以帮助我们实现一定的数学计算功能。常见的数字函数目前提供了五个:calc()max()min()clamp()函数。其基本实现功能如下:

  • calc():允许在声明 CSS 属性值时执行一些计算。
  • max():以从一个逗号分隔的表达式列表中选择最大(正方向)的值作为属性的值。其计算使用属性基本和calc()支持属性格式单位一致。
  • min():允许从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值。其计算使用属性基本和calc()支持属性格式单位一致。
  • minmax():定义了一个长宽范围的闭区间,它与CSS 网格布局一起使用。
  • clamp():把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。它接收三个参数:最小值、首选值、最大值。

calc()函数之前的文章已经做了介绍,本篇文章主要介绍其他四个CSS数字函数。

max()函数

max()函数可以让我们获取所有参数表达式中最大的值作为属性的值。参数表达式支持的单位大小属性:<length><angle><time><percentage><integer>,其基础支持单位可以参考:CSS中如何使用calc()函数。其格式如下:

/* property: max(expression [, expression]) */
width: max(10vw, 4em, 80px);

其中expression 可以为具体的长度数值,也可以是一个表达式单位,表达式基础支持:加法、减法、除法、乘法、取模等。示例代码如下:

    <style>html,body {font-size: 14px;}.container {font-size: 20px;}.max {color: red;font-size: max(3vw,2em, 2rem, 18px);}</style><div class="container"><h3>Max()函数使用示例</h3><p class="max">Max()函数实现设置字体最大大小</p></div>

如下为实现结果,可以通过改变窗口实现字体的大小:

min()函数

min()函数其实现基本与max()函数一致,唯一不同的是max()求取最大值,min()函数求取最小值。其格式如下:

/* property: min(expression [, expression]) */
width: min(1vw, 4em, 80px);

示例代码如下:

<style> html, body {font-size: 14px;}.container {font-size: 20px;}     .min {color: gold;font-size: min(3vw,2em, 2rem, 18px);}
</style>
<div class="container"><h3>Min()函数使用示例</h3><p class="min">Min()函数实现设置字体最大大小</p>
</div>

 

minmax()函数

minmax()函数一般与网格布局一起使用,通常与fit-content()、repeat()函数被统称为网格函数。其使用格式如下:

/* <inflexible-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)/* <fixed-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)/* <inflexible-breadth>, <fixed-breadth> values */
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)

需要注意的是如上的长度设置需要为非负数值,其使用数据格式如下:

  • <percentage>:相对于列轨道中网格容器的内联大小的非负百分比,以及行轨道中网格容器的块长宽。如果网格容器的长宽取决于其轴的长宽,则<percentage> 必须取值为auto
  • <flex>:单位为fr的非负维度,指定轨道弹性布局的系数值。每个<flex>长度的轨道都以其系数值比例均分剩余空间。
  • max-content:表示网格的轨道长度自适应内容最大的那个单元格。
  • min-content:表示网格的轨道长度自适应内容最小的那个单元格。
  • auto:作为最大值时,等价于 max-content。作为最小值时,它表示轨道中单元格最小长宽 (由min-width/min-height) 的最大值。

示例代码:

<style>
#container {display: grid;grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;grid-gap: 5px;box-sizing: border-box;height: 200px;width: 100%;background-color: #8cffa0;padding: 10px;
}#container>div {background-color: #8ca0ff;padding: 5px;
}</style><h3>minmax()函数使用示例</h3><div id="container"><div>与内容一样宽,<br />但是最多300px</div><div>最少200px,占有其他空余空间宽度</div><div>固定150px宽度</div></div>

clamp()函数

clamp()函数是实现将一个值限制在一个上限、下限区域范围内,当这个值超过最小值和最大值范围时,在最小和最大值之间选择一个值使用。接收三个参数:最小值、首选值、最大值。格式如下:

clamp(MIN, VAL, MAX)
// 实现功能等同于
max(MIN, min(VAL, MAX))

三个参数使用规则如下:

  • 首选值比最小值要小时,则使用最小值。
  • 首选值介于最小值和最大值之间时,用首选值。
  • 首选值比最大值要大时,则使用最大值。

一般这样我们可以设置固定最大最小值,然后通过表达式方式设置首选值实现动态值得设置。示例代码如下:

<style>html,body {font-size: 14px;}.container {font-size: 20px;}.clamp {color: blue;font-size: clamp(1.8rem, 2.5vw, 2.8rem);}</style><div class="container"><h3>clamp()函数使用示例</h3><p class="clamp">clamp()函数实现设置字体大小,不会小于设置的最小值,也不会超过设置的最大值</p></div>

浏览器兼容性

浏览器

Chrome

Edge

Firefox

Opera

Safari

Chrome Android

Firefox for Android

Opera Android

Safari on iOS

Samsung Internet

WebView
Android

minmax()

支持
57

支持
16

支持
52

支持
44

支持
10.1

支持
57

支持
52

支持
43

支持10.3

支持
6.0

支持
57

clamp()

支持
79

支持
79

支持
75

支持
66

支持
13.1

支持
79

支持
79

支持
57

支持
13.4

支持
12.0

支持
79

min()

支持
79

支持
79

支持
75

支持
66

支持
11.1

支持
79

支持
79

支持
57

支持
11.3

支持
12.0

支持
79

max()

支持
79

支持
79

支持
75

支持
66

支持
11.1

支持
79

支持
79

支持
57

支持
11.3

支持
12.0

支持
79

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/848135.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

eNSP学习——配置RIPv2认证

目录 主要命令 原理概述 实验目的 实验内容 实验拓扑 实验编址 实验步骤 1、基本配置 2、搭建RIP网络 3、模拟网络攻击 4、配置RIPv2简单验证 5、配置RIPv2 MD5密文验证 需要eNSP各种配置命令的点击链接自取&#xff1a;华为&#xff45;NSP各种设备配置命令大全PD…

通过LabVIEW提升生产设备自动化水平

现代制造业对生产设备的自动化水平提出了越来越高的要求。使用LabVIEW这一强大的图形化编程环境&#xff0c;可以显著提升生产设备的自动化程度&#xff0c;改善生产效率和产品质量。本文将详细分析如何通过LabVIEW改善生产设备的自动化水平&#xff0c;并提供具体的实施策略与…

SpringBoot社区配送服务系统小程序-计算机毕业设计源码88705

摘要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;社区当然也不例外。社区配送服务系统小程序是以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#xff0c;采…

alist配合onlyoffice 实现在线预览

alist配合onlyoffice 实现在线预览 文章目录 alist配合onlyoffice 实现在线预览一、安装onlyoffice二、增加view.html文件三、安装nginx&#xff0c;并增加conf配置文件四、alist预览配置增加 一、安装onlyoffice 我是采用docker安装&#xff0c;采用的版本是7.2&#xff0c; …

Python 中有效地管理包和模块导入

Python 中有效地管理包和模块导入 核心原则Python项目目录结构参考资料 核心原则 在Python中有效地管理包和模块导入&#xff0c;遵循以下可确保代码的组织性、可读性和可维护性&#xff1a; 项目结构规划&#xff1a;项目应采用清晰的层次化结构&#xff0c;其中入口脚本所在…

Linux 环境安装 运行 python

在Linux环境中安装和运行Python通常是一个相对简单的过程。Python是一种解释型语言&#xff0c;这意味着你可以在安装后直接运行Python代码。以下是在Linux上安装和运行Python的基本步骤&#xff1a; 1. 检查是否已经安装了Python 首先&#xff0c;你可以通过在终端中输入pyt…

安装Acunetix

Acunetix是一个自动化的Web应用程序安全测试工具&#xff0c;可以扫描任何可通过Web浏览器访问的和遵循HTTP/HTTPS规则的Web站点和Web应用程序&#xff0c;提供全面的漏洞扫描服务&#xff0c;并生成响应的报告 # 1. 安装 代码语言&#xff1a;javascript 复制 [rootwhcode…

Shell-监控主机存活状态

1、ping命令 ping -c指定ping的次数 通过ping主机ip的方式来看主机是不是开启的&#xff0c;用于同一个局域网中的网络检测和开关机状态 2、脚本编写ping.sh #!/bin/bash #check host activeIP_LIST"10.67.68.85 10.67.48.4" for IP in $IP_LIST; doNUM1while [ …

高效管理近30万稳定运力,科技物流企业万联易达这样做

万联易达物流科技有限公司&#xff08;以下简称“万联易达”&#xff09;&#xff0c;是由中泽集团投资设立的创新型物流科技企业。为提高平台数智化服务水平&#xff0c;提升业务开展效率&#xff0c;达到运输全场景合规化管理&#xff0c;万联易达平台引用法大大电子合同&…

在iPad上恢复丢失数据的3方法

iPad概览 iPad不仅可以用来看电影&#xff0c;还可以用来工作和学习。使用 Apple Pencil&#xff0c;您可以在 iPad 上做笔记、画画、制作音乐、编辑视频和在课堂上教学等。同时&#xff0c;由于体积小&#xff0c;您可以在商务旅行中轻松随身携带。因此&#xff0c;iPad已成为…

【成品设计】基于华大hc32F005c6ua的读取NFC卡

《基于华大hc32F005c6ua的读取NFC卡》 整体功能&#xff1a; 单片机:华大hc32F005c6ua 1、支持单片机spi接口读取nfc读卡器芯片rc522读写数据 2、读取到的数据可以通过单片机uart接口通信&#xff0c;上报给上位机&#xff08;485主机&#xff09; 3、uart接口支持modbus协议…

【运维项目经历|030】自动化运维任务调度系统:CronMaster

🍁博主简介: 🏅云计算领域优质创作者 🏅2022年CSDN新星计划python赛道第一名 🏅2022年CSDN原力计划优质作者 🏅阿里云ACE认证高级工程师 🏅阿里云开发者社区专家博主 💊交流社区:CSDN云计算交流社区欢迎您的加入! 目

IntelliJ IDEA智能编程插件AI Assistant

IntelliJ IDEA集成开发工具最新版本提供了人工智能AI编程助手的插件&#xff0c;AI Assistant使用手册的文档地址是AI Assistant | IntelliJ IDEA Documentation AI Assistant提供以下的编程能力以及工具特性&#xff1a; 与AI Assistant聊天&#xff0c;提问与项目相关或者与…

门外汉一次过软考中级(系统集成项目管理工程师)秘笈,请收藏!

24上软考考试已经结束&#xff0c;24下软考备考又要开启了&#xff01;今年软考发生了改革&#xff0c;很多考试由一年考两次变成了一年考一次&#xff0c;比如高级信息系统项目管理师&#xff0c;比如中级系统集成项目管理工程师&#xff0c;这两科是高、中级里相对简单&#…

每周算法:01分数规划

题目链接 观光奶牛 题目描述 给定一张 N N N 个点、 M M M 条边的有向图&#xff0c;每个点都有一个权值 p i p_i pi​&#xff0c;每条边都有一个权值 w i w_i wi​。 求图中的一个环&#xff0c;使“环上各点的权值之和”除以“环上各边的权值之和”最大。 输出这个最…

【运维项目经历|029】NTP精准时间同步系统优化项目

🍁博主简介: 🏅云计算领域优质创作者 🏅2022年CSDN新星计划python赛道第一名 🏅2022年CSDN原力计划优质作者 🏅阿里云ACE认证高级工程师 🏅阿里云开发者社区专家博主 💊交流社区:CSDN云计算交流社区欢迎您的加入! 目

YOLOv8+PyQt5非洲动物检测(可以重新训练,yolov8模型,从图像、视频和摄像头三种路径识别检测)

效果视频&#xff1a;非洲动物检测yolo检测&#xff08;https://mbd.pub/o/bread/mbd-ZpaYk51q&#xff09;_哔哩哔哩_bilibili 资源包含可视化的非洲动物检测系统&#xff0c;基于最新的YOLOv8训练的非洲动物检测模型&#xff0c;和基于PyQt5制作的可视化非洲动物检测系统&am…

免费的维吾尔语翻译器:维汉翻译通App,最近新增了什么功能呢?让我们一起来看看!好用的维语翻译工具支持语音评分功能、支持汉语查拼音等等。

“阿拉伯语是知识&#xff0c;波斯语是糖&#xff0c;印度语是盐&#xff0c;而维吾尔语则是艺术。” 这是一句流传在西域的古老谚语&#xff0c;它不仅道出了维吾尔语言的独特魅力&#xff0c;也表达了人们对语言艺术的无限热爱。 而今&#xff0c;我们带着这份热爱&#x…

厉害了!ATFX登上南非主流报刊《The Citizen》头条

时隔三个月后&#xff0c;ATFX再次登上国际知名报刊头版头条&#xff0c;并迅速成为各大媒体关注焦点。继1月强势登陆《日本时报》经济与商业版面&#xff0c;2月在中东知名媒体CNBC Arabia留下深刻印记后&#xff0c;5月ATFX受邀参展2024年南非峰会并接受媒体采访见证了品牌的…

【成品设计】基于物联网的停车管理系统设计与实现

《基于物联网的停车管理系统设计与实现》 整体功能&#xff1a; 本次课题中&#xff0c;主要设计的是一款基于物联网技术的校园停车的管理系统&#xff0c;该系统能更方便得让管理员对停车场进行管理&#xff0c;同时也能够满足和方便用户使用。针对此种现象&#xff0c;就需…