CSS函数:fit-content与matrix的使用

网格函数

fit-content()属于网格函数,除此之外的网格函数还有:CSS函数: 实现数据限阈的数字函数。顾名思义,这三个函数只能在网格布局中使用。fit-content()函数主要是用于给定布局可用大小,适应内容,其功能等同于:min(maximum size, max(minimum size, argument))。函数格式如下:

/* <length> values */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)/* <percentage> value */
fit-content(40%)

fit-content()接收一个参数,可以是长度值或者是百分比值,当为长度值时支持各种格式的固定长度,如:pxcmvwch等。当参数为百分比值,相对于给定轴中可用空间的百分比。在网格属性中,它与列轨道中网格容器的内联大小和行轨道中网格容器的块大小相关。否则,它与布局框的可用内联大小或块大小相关,具体取决于书写模式。

浏览器兼容性

使用示例

如下通过示例来理解fit-content()函数具体的使用方式和布局配置理解。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>fit-content函数实现内容自适应示例</title><style>#container {display: grid;grid-template-columns: fit-content(300px) fit-content(300px) 1fr;grid-gap: 5px;box-sizing: border-box;height: 200px;width: 100%;background-color: #8cffa0;padding: 10px;}#container>div {background-color: #8ca0ff;padding: 5px;}</style>
</head><body><div id="container"><div>与内容等宽.</div><div>根据给定内容,当内容小于300px,则宽度与内容等宽,当内容大于300px,则宽度为300px.</div><div>弹性宽度</div></div></body></html>

展示样式:

从上方的示例可以看出,当给定的内容大于设置宽度,则容器宽度等于设置宽度,内容自动换行,当给定内容小于设置宽度则容器宽度等于内容宽度

示例源码:fit-content函数实现内容自适应示例

转换函数

CSS函数matrix()应用于transform设置转换动画,matrix提供六个参数实现一个3*3的矩阵镜像坐标转换成2D坐标。其语法格式如下:

matrix(a, b, c, d, tx, ty)

如上,该函数需要接收六个参数来实现2D坐标的转换:

  • a b c d:用于描述线性变换
  • tx:用于描述x轴上的线性平移
  • ty:用于描述y轴上的线性平移

matrix()的特殊值可以通过设置特殊值设置效果:缩放、旋转、移动、倾斜功能。matrix转换的矩阵:

根据上述举证,我们对比常用的缩放、旋转、移动、倾斜功能的矩阵格式如下:

通过上述,我们可以梳理特殊效果的matrix()设置方式:

  • scale(x):等同于matrix(x,0,0,x,0,0),x轴和y轴同等缩放
  • scaleX(x):等同于matrix(x,0,0,1,0,0),x轴缩放
  • scaleY(y):等同于matrix(1,0,0,y,0,0),y轴缩放
  • translate(x,y):等同于matrix(1,0,0,1,x,y),位移转换,x代表x轴位移,y代表y轴位移
  • translateX(x):等同于maxtrix(1,0,0,1,x,0),位移动画,x轴位移
  • translateY(y):等同于maxtrix(1,0,0,1,0,y),位移动画,y轴位移
  • skew(x,y):等同于maxtrix(1,tan(x),tan(y),1,0,0),倾斜,x轴和y轴倾斜的角度
  • skewX(x):等同于maxtrix(1,tan(x),0,1,0,0),x轴倾斜
  • skewY(y):等同于maxtrix(1,0,tan(y),1,0,0),y轴倾斜
  • rotate(x):等同于maxtrix(cos(x),-sin(x),sin(x),cos(x),0,0),顺时针旋转x(如30deg

下面通过一个示例来了解下如何使用。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS matrix函数使用</title><style>body {text-align: center;}h1 {color: green; // 设置颜色}.matrix {transform-origin: 0 0;transform: matrix(.4,0,0,2,0,0);font-size: 26px;font-weight: bold;width: 250px;padding: 20px;background: green;color: white;font-family: sans-serif;}</style>
</head><body><h1>CSS matrix函数使用</h1><br><br><div class="matrix">Matrix转换区块(x缩小为0.4,y放大为2倍)</div>
</body></html>

效果如下:

示例源码:CSS matrix()函数使用

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

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

相关文章

MySQL事务与MVCC

文章目录 事务和事务的隔离级别1.为什么需要事务2.事务特性1_原子性&#xff08;atomicity&#xff09;2_一致性&#xff08;consistency&#xff09;3_持久性&#xff08;durability&#xff09;4_隔离性&#xff08;isolation&#xff09; 3.事务并发引发的问题1_脏读2_不可重…

基于小波域优化Savitzky–Golay滤波器的脑电图信号的运动伪影去除方法(MATLAB R2018A)

在获取或采集数据的过程中&#xff0c;不可避免地将噪声引入到数据中&#xff0c;噪声的存在使得原始数据发生变异&#xff0c;对数据的处理及分析产生严重地影响。常用的去噪模型有平滑去噪、均值去噪。其中&#xff0c;平滑去噪又包括移动平均平滑法和Savitzky-Golay卷积平滑…

一周学会Django5 Python Web开发 - Django5内置Auth认证系统-用户注册实现

锋哥原创的Python Web开发 Django5视频教程&#xff1a; 2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~共计57条视频&#xff0c;包括&#xff1a;2024版 Django5 Python we…

keil下载及安装(社区版本)

知不足而奋进 望远山而前行 目录 文章目录 前言 Keil有官方版本和社区版本&#xff0c;此文章为社区版本安装&#xff0c;仅供参考。 1.keil MDK 2.keil社区版介绍 3.keil下载 (1)打开进入登录界面 (2)点击下载,跳转到信息页面 (3)填写个人信息,点击提交 (4)点击下载…

韩国Neowine推出第三代强加密芯片ALPU-CV

推出第三代加密芯片&#xff1b;是ALPU系列中的高端IC&#xff1b;是一款高性能车规级加密芯片&#xff1b;其加密性更强、低耗电、体积小&#xff1b;使得防复制、防抄袭板子的加密性能大大提升&#xff0c;该芯片通过《AEC-Q100》认证&#xff0c;目前已经在国产前装车辆配件…

VMware Workstation虚拟机安装 CentOS 7.9 后ping ip地址出现错误:Network is unreachable

VMware Workstation虚拟机安装 CentOS 7.9 后ping ip地址出现错误&#xff1a;Network is unreachable 解决步骤&#xff1a; 进入目录 进入/etc/sysconfig/network-scripts/&#xff0c; cd /etc/sysconfig/network-scripts/修改文件 vi ifcfg-ens33变更项 ONBOOTyes保存…

算法学习笔记(7.6)-贪心算法(霍夫曼编码)

目录 1.什么是霍夫曼树 2.霍夫曼树的构造过程 3.霍夫曼编码 3.1具体的作用-频率统计 ##实战题目 1.什么是霍夫曼树 给定N个权值作为N个叶子结点&#xff0c;构造一棵二叉树&#xff0c;若该树的带权路径长度达到最小&#xff0c;称这样的二叉树为最优二叉树&#xff0c;也…

ast.js是什么?

在devtools分析网站时&#xff0c;出现了ast.js的页面。那么&#xff0c;什么是ast.js?它有什么用&#xff1f; 经查询&#xff0c;AST是抽象语法树&#xff08;Abstract Syntax Tree&#xff09;也称为AST语法树&#xff0c;指的是源代码语法所对应的树状结构。也就是说&…

vue3+uniapp

1.页面滚动 2.图片懒加载 3.安全区域 4.返回顶部&#xff0c;刷新页面 5.grid布局 place-self: center; 6.模糊效果 7.缩放 8.微信小程序联系客服 9.拨打电话 10.穿透 11.盒子宽度 12.一般文字以及盒子阴影 13.选中文字 14.顶部安全距离 15.onLoad周期函数在setup语法糖执行后…

论文阅读:Neural Scene Flow Prior

目录 概要 Motivation 整体架构流程 技术细节 小结 论文地址:

基于GTX 8B10B编码的自定义PHY上板测试(高速收发器十四)

前文整理了GTX IP&#xff0c;完成了自定义PHY协议的收发模块设计&#xff0c;本文将通过光纤回环&#xff0c;对这些模块上板测试&#xff0c;首先需要编写一个用于生成测试数据的用户模块。 1、测试数据生成模块 本模块用于生成自定义PHY协议的测试数据&#xff0c;通过axi_…

期望18K,4年前端Cvte 视源股份一面挂

一面 1、自我介绍&#xff1f;毕业的时候一直在 xx 公司&#xff0c;你基本都在做什么项目&#xff1f; 2、你讲一下你主要负责哪一块的&#xff1f;balabala 3、你们的 json 是怎么定义组件间的联动的&#xff1f; 4、怎么确定区分两个 input&#xff1f; 5、你们是怎么触…

软件三班20240605

文章目录 1.创建工程和模块2.添加 web支持3.创建前端代码4.添加servlet 依赖5. 代码6.案例2 1.创建工程和模块 2.添加 web支持 方法1 方法2 3.创建前端代码 4.添加servlet 依赖 5. 代码 <!DOCTYPE html> <html lang"en"> <head><meta c…

Spring Boot中的JDK 线程池以及Tomcat线程池使用与配置

Spring Boot中的线程池使用与配置 一、引言 在Java开发中&#xff0c;特别是在高并发场景下&#xff0c;线程池是一个非常重要的概念。合理地使用线程池可以优化系统性能&#xff0c;避免线程频繁创建和销毁带来的性能开销。Spring Boot作为当前最流行的Java框架之一&#xf…

VBA模拟题库生成器

VBA模拟题库生成器 Option ExplicitDim intXZ As Integer 选择题数 Dim intPD As Integer 判断题数 Dim intTK As Integer 填空题数 Dim intWD As Integer 问答题数 Dim intNon As Integer 未知题数 Dim intCount As Integer 题库行数 Dim intCol As Integer …

【Nacos源码分析02-服务配置】

文章目录 服务配置Nacos Config入门Nacos服务端配置发布源码Nacos 服务端监控源码 服务配置 服务配置中心介绍 首先我们来看一下,微服务架构下关于配置文件的一些问题&#xff1a; 配置文件相对分散。在一个微服务架构下&#xff0c;配置文件会随着微服务的增多变的越来越多&…

8.22 PowerBI系列之DAX函数专题-盈亏平衡分析

需求 实现 一、用参数设置固定成本&#xff0c;单位变动成本&#xff0c;与毛利率 1 单位变动成本 generateseries(0,100,1) 2 固定成本 generateseries(0,50000,1) 3 毛利率 generateseries(0,0.4,0.01) 二、度量值 1 总变动成本 [单位变动成本 值]*[销量 值] 2 总成本…

各类电机数学模型相关公式总结 —— 集成芯片驱动

0、背景技术概述 永磁直流电机&#xff08;PMDC&#xff09;、永磁同步电机&#xff08;PMSM&#xff09;、无刷直流电机&#xff08;BLDC&#xff09;以及混合式两相步进电机在小功率应用场景中多采用集成芯片驱动&#xff08;如二合一、三合一驱动芯片&#xff09;的原因主要…

深度学习之非极大值抑制NMS介绍

1. 基本介绍 非极大值抑制&#xff08;Non-Maximum Suppression&#xff0c;NMS&#xff09;是深度学习中一种常用的目标检测算法&#xff0c;用于在检测结果中去除冗余的边界框。 在目标检测任务中&#xff0c;通常会使用候选框&#xff08;bounding boxes&#xff09;来表示可…