【uniapp】CSS3 的 calc() 函数使用表达式动态计算
前言
- css3 中增加了 calc() 函数
- calc() 函数语法：
property: calc(expression) - expression 表达式为： “+”、 “-”、"*"、"/" 表达式
- “+”、 “-“符号前后必须为空格，比如：
calc(50% - 8px)。”*”、"/"符合无此要求。 - expression 表达式中允许嵌套函数（
var 函数可以获取css变量），例如：.foo {--widthA: 100px;--widthB: calc(var(--widthA) / 2);--widthC: calc(var(--widthB) / 2);width: var(--widthC); }
浏览器兼容情况
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
应用：将播放按钮放到视频中间
需求：
思路：
- 播放按钮采用 absolute 定位（前提：父级元素为 relative 定位）
- 播放按钮宽高为 50px
- 播放按钮在 x 轴剧中，则 left 的值应为 ： 50% - 25px
- 播放按钮在 y 轴剧中，则 top 的值应为 ： 50% - 25px
相关代码
vue代码：
<view class="item-wrapper" v-for="(item,index) in flowList" :key="index"><view class="image-wrapper"><image class="coverImage" :src="item.image" mode="widthFix" /><image class="play" src="../../static/play.png" mode="widthFix" /></view><view class="title">{{item.title}}</view>
</view>
css：
.image-wrapper {position: relative;padding: 0 15px;
}
.image-wrapper .coverImage {width: 100%;
}
.image-wrapper .play {position: absolute;left: calc(50% - 25px);top: calc(50% - 25px);width: 50px;height: 50px;
}
参考
http://www.daqianduan.com/6183.html
https://osvaldas.info/imitating-calc-fallback-fixed-width-sidebar-in-responsive-layout
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
https://hacks.mozilla.org/2010/06/css3-calc/
【uniapp】CSS3 的 calc() 函数使用表达式动态计算相关推荐
- CSS3运算 calc()函数是怎么实现计算
CSS3运算 calc()函数是怎么实现计算 CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作.例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和. .foo ...
- css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏
最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{position: relative;margin-left: 24px;margin- ...
- CSS3属性calc函数（CSS3）
CSS3属性calc函数(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charse ...
- web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
- CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
先了解一下CSS3的相对长度单位和绝对长度单位(参考详细教程) : 相对长度单位 相对长度单位指定了一个长度相对于另一个长度的属性.对于不同的设备相对长度更适用. 单位 描述 em 它是描述相对于应用 ...
- CSS3中的calc()函数以及在less中的使用
1. calc()函数 在CSS3中我们可以通过calc()函数来动态计算长度值,如: #div {width: calc(100% - 100px); } 它的语法是 calc(expression ...
- CSS3 calc() 函数，height: calc(100% - 70px)；
今天做练习的时候遇到了这样一行代码:height: calc(100% - 70px);,100%的高度减去70px???这是什么函数?竟然支持不同单位之间的运算?! 通过查阅资料,我终于认识了这个函 ...
- 【CSS】calc 函数（动态计算长度值）
文章目录 基本用法 基本用法 calc() 函数用于动态计算长度值. 需要注意的是: 1. 运算符前后都需要保留一个空格,例如: width: calc(100% - 10px): 2. 任何长度值都 ...
- css calc()函数 动态根据屏幕宽度计算宽度
今天写移动端H5页面,mui按钮在layer mobile 弹窗 html类型的时候,mui按钮宽度设置为100%的时候,mui按钮宽度会超出屏幕,听同事建议,使用 css calc()函数计算得以解 ...
最新文章
- 2000年考研英语阅读理解文章一
- python 接口 、继承、重载运算符
- 渗透测试 已学课时 1 个_我14岁上创业课时学到的东西
- 单目可见光静默活体检测 Binary or Auxiliary Supervision论文解读
- 大数据之-Hadoop之HDFS的API操作_查看文件的详情---大数据之hadoop工作笔记0061
- linux各路径(目录)的解释(转载)
- 数字孪生数据中心机房，智能 IDC 高阶运维
- 软考 - 软件设计师 - 完整知识点笔记 - 按考频整理
- VS Code插件安装位置
- vmware之centos7 删除分区
- 中南财经政法大学2014-2015学年学生奖励汇总表
- pandas task-08
- win10虚拟机dhcp服务器设置,win10 配置dhcp服务器设置
- kjb文件 解析_在Linux上使用lnav监控和分析Apache日志文件工具
- 在线客服功能介绍-了解常见在线客服系统的功能点
- 画一幅山水画，有庐山，日出，牛
- 按键精灵移动端系列 - 按键精灵IOS版 之 网络已断开,请检查网络连接.解决方案.
- c++ placement new
- 域名过期和域名赎回的知识介绍
- C语言：判断一个数是否为素数
热门文章
- Android Studio Linking an external C++ project 时候 报Invalid file name. Expected: CMakeLists.txt
- C#面向对象设计模式纵横谈——6.Prototype 原型模式(创建型模式)
- 项目正式环境是双机，对外的访问地址是虚拟地址，在登录门户的时候，会等待15秒，才能进入门户...
- 使用Word宏替换Header、Footer等中的文本
- 如何设计通用的网站模板
- php模块memcache和memcached区别分析
- mysql使用索引为什么查询速度变快很多？
- promise使用promise进行判断网络状态
- PHP随机数：mt_rand更快
- Mysql水平分表-后端代码