CSS3中的calc( )属性--可以计算的属性

最新推荐文章于 2025-10-07 11:12:15 发布

原创最新推荐文章于 2025-10-07 11:12:15 发布 · 5.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css3

CSS3 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了CSS3中的calc()函数，它允许开发者通过简单的数学运算动态地设置元素的尺寸和位置，例如宽度、边距、填充等。文章还提供了实际应用场景的例子，包括三局平均分布布局和绝对定位元素的居中。

语法：
calc() = calc(四则运算)
说明：
（1）calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。
（2）任何长度值都可以使用calc()函数进行计算；
（3）calc()函数支持 “+”, “-“, “*”, “/” 运算；
（4）calc()函数使用标准的数学运算优先级规则；
（5）但需要注意的是 + - 必须用空格隔开;

width: calc(100% -8px);     // 这样会出错,结果为0
width: calc(100% - 8px);    //当 + -  符号用空格隔开时,运算成功

兼容性：
这里写图片描述
使用
calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算。
比如三局平均分布的布局，中间间距为5像素。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>btn</title>
    <style>
        *{ margin: 0; padding: 0; }
        .box{ 
            width: calc(100%/3 - 5px); 
            float: left; 
            margin-right: calc(5px*3 /2);
            background: #aaa;
            color: #333;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        .box:nth-child(3){
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</body>
</html>

calc()还是比较用的,比如说想居中一个绝对定位的元素,一般都是left:50%;top:50%;然后再margin-left/margin-top值为-50%;现在.运用calc()也可以实现居中。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>btn</title>
    <style>
        .box{
            width: 100px; height: 100px;
            background: #aaa;
            position: absolute;
            left: calc( 50% - 50px );
            top: calc( 50% - 50px );
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>