前言

• 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() 函数使用表达式动态计算的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。