css3中calc的用法是什么-前端问答-PHP中文网

css3中calc的用法是什么

WBOY

发布： 2022-04-18 16:34:23

原创

2813人浏览过

在css3中，calc()函数用于动态计算长度值，参数可以设置为一个数学表达式，结果将采用运算后的返回值；任何的长度值都可以使用calc()函数进行计算，并且使用标准的数学运算优先级规则，语法为“长度属性:calc(长度数学表达式)”。

css3中calc的用法是什么

本教程操作环境：windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css3中calc的用法是什么

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

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

任何长度值都可以使用calc()函数进行计算；

立即学习“前端免费学习笔记（深入）”；

calc()函数支持 "+", "-", "*", "/" 运算；

calc()函数使用标准的数学运算优先级规则；

语法为：

TP-COUPON 导购系统免费版

自从百度屏蔽淘宝客网站、淘宝抛弃淘宝客之后，个人站长集体陷入了恐慌之中。此时，什么值得买网的异军突起引起了广大个人站长的极大关注。做一个什么值得买一样的导购网站成了众多个人站长的一致心愿！ TP-COUPON 导购系统即是让个人站长实现此心愿的绝佳选择！欢迎个人站长选用。V1.1版更新记录：1.修正请求时查询淘宝店铺错误的bug2.删除一些无用的代码

查看详情

calc(expression)

登录后复制

expression 必须，一个数学表达式，结果将采用运算后的返回值。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</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>

登录后复制

输出结果：