calc 计算属性
calc 这个可以达到什么呢？通过计算，可以在不刷新浏览器的情况下，实时的让值发生变化，我们一起看看 calc 的使用吧。
calc() 用于动态计算长度值。
.demo{
/* property: calc(expression) */
width: calc( - px);
}
解释：demo 的宽度 = 父元素总体宽度 - 80px 。
.out-@R_540_2@{
border:px solid #ccc;
width: px;
height: px;
}
.demo{
border:px solid #ccc;
height:px;
width: calc( - px);
}
图：
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.out-@R_540_2@{
border:px solid #ccc;
width: px;
height: px;
}
.demo{
border:px solid #ccc;
height:px;
width: calc( - px) ;
}
</style>
</head>
<body>
<div class="out-@R_540_2@">
<div class="demo">
网：计算学习
</div>
</div>
</body>
</html>
.out-@R_540_2@{
border:px solid #ccc;
width: px;
height: px;
}
.demo{
border:px solid #ccc;
height: calc( /);
width: calc( /);
}
图：
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.out-@R_540_2@{
border:px solid #ccc;
width: px;
height: px;
}
.demo{
border:px solid #ccc;
height: calc( /) ;
width: calc( /) ;
}
</style>
</head>
<body>
<div class="out-@R_540_2@">
<div class="demo">
网：计算学习
</div>
</div>
</body>
</html>
.out-@R_540_2@{
border:px solid #ccc;
width: px;
height: px;
}
.demo{
border:px solid #ccc;
height: calc( ( + px) /);
width: calc( ( + px) /);
}
图：
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.out-@R_540_2@{
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-@R_540_2@">
<div class="demo">
网：计算学习
</div>
</div>
</body>
</html>
calc( ( + px) /)
我们可以写成 ：
calc( / + px/)
602392714
清零编程群