calc 计算属性

calc@H_502_7@ 这个属性可以达到什么效果呢？通过计算函数，可以在不刷新浏览器的情况下，实时的让属性值发生变化，我们一起看看 calc@H_502_7@ 的使用吧。



1. 官方定义


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



2. 解释



calc()@H_502_7@可以按照我们写的公式，在浏览器中进行计算，使用的时候，要注意：运算符的前后都需要保留一个空格，例如：width: calc(100% - 20px)；@H_502_7@ 中，-@H_502_7@ 号前后要有一空格。

它支持 “+”， “-”，“*”，“/” 运算；
calc() 函数使用标准的数学运算优先级规则。


3. 语法


.demo{
    /* property: calc(expression) */
    width: calc( - px);
}
@H_502_7@@H_502_78@


解释：demo 的宽度 = 父元素总体宽度 - 80px 。


4. 兼容性



IE
Edge
Firefox
Chrome
Safari
Opera
ios
android


11
12+
16+
19+
6+
15+
6.1+
81



5. 实例


让 demo 的宽度比父级宽度小 200px。


.out-Box{
    border:px solid #ccc;
    width: px;
    height: px;
}
.demo{
    border:px solid #ccc;
    height:px;
    width: calc( - px);
}
@H_502_7@@H_502_78@


效果图：





宽度比父级宽度小 200px 效果图




 
<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .out-Box{
            border:px solid #ccc;
            width: px;
            height: px;
        }
       .demo{
            border:px solid #ccc;
            height:px;
            width: calc( - px) ;
        }
    </style>
</head>
<body>
    <div class="out-Box">
        <div class="demo">
            网：计算函数学习
        </div>
    </div>    
</body>
</html>
@H_502_7@@H_502_78@
  


使 demo 的宽度、高度为父元素的 1/3。


.out-Box{
    border:px solid #ccc;
    width: px;
    height: px;
}
.demo{
    border:px solid #ccc;
    height: calc( /);
    width: calc( /);   
}
@H_502_7@@H_502_78@


效果图：



宽度、高度为父元素的 1/3 效果图




 
<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .out-Box{
            border:px solid #ccc;
            width: px;
            height: px;
        }
        .demo{
            border:px solid #ccc;
            height: calc( /) ;
            width: calc( /) ;   
        }
    </style>
</head>
<body>
    <div class="out-Box">
        <div class="demo">
            网：计算函数学习
        </div>
    </div>    
</body>
</html>
@H_502_7@@H_502_78@
  


使 demo 的宽度、高度为父元素的 (100% + 200px) /3。


.out-Box{
    border:px solid #ccc;
    width: px;
    height: px;
}
.demo{
    border:px solid #ccc;
    height: calc( ( + px) /);
    width: calc( ( + px) /);   
}
@H_502_7@@H_502_78@


效果图：



宽度、高度为父元素的 1/3 效果图




 
<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .out-Box{
            border:px solid #ccc;
            width: px;
            height: px;
        }
        .demo{
            border:px solid #ccc;
            height: calc( ( + px) /) ;
            width: calc( ( + px) /) ;   
        }
    </style>
</head>
<body>
    <div class="out-Box">
        <div class="demo">
            网：计算函数学习
        </div>
    </div>    
</body>
</html>
@H_502_7@@H_502_78@
  


6. 经验分享



calc@H_502_7@ 的用法非常简单，它的出现给我们带来了很多方便。它多用于在父级元素大小变动时候内部子元素的大小展示，例如上面的例子。

在使用它的时候，如果遇到复杂的运算，我们可以人为的去先处理下，来减少内部的 （ ）@H_502_7@，例如 3 中 ：



calc( ( + px) /)
@H_502_7@@H_502_78@


我们可以写成 ：


calc( / + px/)
@H_502_7@@H_502_78@


要注意，calc 中的运算符的前后都需要保留一个空格，这一点千万不要忘记得了，如果遇到问题不要慌，打代码调试器看看问题到底出在哪里了。

IE	Edge	Firefox	Chrome	Safari	Opera	ios	android
11	12+	16+	19+	6+	15+	6.1+	81



        CSS3教程◄ nth 类型元素选择器