【CSS】calc 函数（动态计算长度值）

文章目录

基本用法

基本用法

calc() 函数用于动态计算长度值。

需要注意的是:
1. 运算符前后都需要保留一个空格，例如： width: calc(100% - 10px)；
2. 任何长度值都可以使用calc()函数进行计算；
3. calc()函数支持 "+", "-", "*", "/" 运算；
4. calc()函数使用标准的数学运算优先级规则；

示例：react 示例

<div stytle={{width: 'calc(100vh - 2px)'}}><div/>
等价于：
<div stytle={{width: `${window.innerHeight - 2}px`}}><div/>

示例：html 示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现div居中显示</title>
<style>
#div1 {position: absolute;left: 50px;width: calc(100% - 100px);border: 1px solid black;background-color: yellow;padding: 5px;text-align: center;
}
</style>
</head><body>
<p>创建一个横跨屏幕的div，div 两边有 50px 的间隙：</p>
<div id="div1">一些文本...</div>
</body>
</html>

允许结果：当屏幕左右拉伸时，div两边都是50px的间隙

【CSS】calc 函数（动态计算长度值）相关推荐

css calc()函数动态根据屏幕宽度计算宽度
今天写移动端H5页面,mui按钮在layer mobile 弹窗 html类型的时候,mui按钮宽度设置为100%的时候,mui按钮宽度会超出屏幕,听同事建议,使用 css calc()函数计算得以解 ...
css 中动态获取宽度,css中的calc动态计算长度值
1 场景 css的样式中,存在动态计算长度的需求. 2 方案使用css中的calc函数动态计算css中的长度值. 语法: calc(expression) 参数说明: 值描述 expression ...
CSS calc()函数与单位vh 常见height：100vh
calc() 函数属于CSS3版本内容,用于动态计算长度值.例如:width: calc(100% - 10px):需要注意的是,运算符前后都需要保留一个空格.calc()函数支持 "+&q ...
CSS calc()函数
一.calc()函数介绍 calc() 函数用于动态计算长度值需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函 ...
CSS calc() 函数
CSS calc() 函数 width: calc(100% - 100px); calc()是一个css运算函数,上述表示在继承的父级100%宽度的情况下动态减去了100px 需要注意的是,运算符前 ...
微信小程序中可以使用calc 函数用于动态计算长度值。
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函数进行计算: calc()函数支持 "+", ...
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
先了解一下CSS3的相对长度单位和绝对长度单位(参考详细教程) : 相对长度单位相对长度单位指定了一个长度相对于另一个长度的属性.对于不同的设备相对长度更适用. 单位描述 em 它是描述相对于应用 ...
web前端CSS之“ calc() 函数”
1.定义 calc() 函数用于动态计算长度值. 2.用法需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函数进 ...
使用css的calc() 函数计算宽高
茫茫人海中我还是只看到了你. 什么是calc()? calc() 函数用于动态计算长度值. 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长 ...

【CSS】calc 函数（动态计算长度值）

文章目录

基本用法

【CSS】calc 函数（动态计算长度值）相关推荐

最新文章

热门文章