-
未登录
热门文章
calc 这个属性可以达到什么效果呢？通过计算函数，可以在不刷新浏览器的情况下，实时的让属性值发生变化，我们一起看看 calc 的使用吧。
calc() 函数用于动态计算长度值。
calc()可以按照我们写的公式，在浏览器中进行计算，使用的时候，要注意：运算符的前后都需要保留一个空格，例如：width: calc(100% - 20px)； 中，- 号前后要有一空格。.demo{
/* property: calc(expression) */
width: calc(100% - 80px);
}
解释：demo 的宽度 = 父元素总体宽度 - 80px 。
| IE | Edge | Firefox | Chrome | Safari | Opera | ios | android |
|---|---|---|---|---|---|---|---|
| 11 | 12+ | 16+ | 19+ | 6+ | 15+ | 6.1+ | 81 |
.out-box{
border:1px solid #ccc;
width: 200px;
height: 200px;
}
.demo{
border:1px solid #ccc;
height:100px;
width: calc(100% - 20px);
}
效果图：
<!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:1px solid #ccc; width: 200px; height: 200px; } .demo{ border:1px solid #ccc; height:100px; width: calc(100% - 20px) ; } </style>
</head>
<body>
<div class="out-box">
<div class="demo">
xx网：计算函数学习
</div>
</div>
</body>
</html>
.out-box{
border:1px solid #ccc;
width: 200px;
height: 200px;
}
.demo{
border:1px solid #ccc;
height: calc(100% /3);
width: calc(100% /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:1px solid #ccc; width: 200px; height: 200px; } .demo{ border:1px solid #ccc; height: calc(100% /3) ; width: calc(100% /3) ; } </style>
</head>
<body>
<div class="out-box">
<div class="demo">
xx网：计算函数学习
</div>
</div>
</body>
</html>
.out-box{
border:1px solid #ccc;
width: 200px;
height: 200px;
}
.demo{
border:1px solid #ccc;
height: calc( (100% + 200px) /3);
width: calc( (100% + 200px) /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:1px solid #ccc; width: 200px; height: 200px; } .demo{ border:1px solid #ccc; height: calc( (100% + 200px) /3) ; width: calc( (100% + 200px) /3) ; } </style>
</head>
<body>
<div class="out-box">
<div class="demo">
xx网：计算函数学习
</div>
</div>
</body>
</html>
calc 的用法非常简单，它的出现给我们带来了很多方便。它多用于在父级元素大小变动时候内部子元素的大小展示，例如上面的例子。（ ），例如 3 中 ：calc( (100% + 200px) /3)
我们可以写成 ：
calc( 100%/3 + 200px/3)