CSS计算函数calc()

最新推荐文章于 2025-04-30 11:50:00 发布

liuyan1106_

最新推荐文章于 2025-04-30 11:50:00 发布

阅读量881

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS/CSS3 文章标签： css css3

本文链接：https://blog.youkuaiyun.com/liuyan1106_/article/details/108304559

CSS/CSS3 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了CSS中calc()函数的定义和用法，通过实例展示了如何使用该函数动态计算长度值，包括加减乘除运算及数学运算优先级规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div {
    width: calc(100% - 100px);
}

一、定义和用法

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

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

二、举例

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>测试calc（）</title> 
<style>
.word {
    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 class="word">一些文本...</div>
</body>
</html>