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

作者：盐析白兔 | 2024-02-29 05:09:15

踩

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);    //当 + -  符号用空格隔开时,运算成功1
2

兼容性：
这里写图片描述
使用
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果如下：
这里写图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/163816