登陆可实现PC、移动端同步进度.
calc 计算属性
calc
这个属性可以达到什么效果呢?通过计算函数,可以在不刷新浏览器的情况下,实时的让属性值发生变化,我们一起看看 calc
的使用吧。
1. 官方定义
calc()
函数用于动态计算长度值。
2. 慕课解释
calc()
可以按照我们写的公式,在浏览器中进行计算,使用的时候,要注意:运算符的前后都需要保留一个空格,例如:width: calc(100% - 20px);
中,-
号前后要有一空格。- 它支持 “+”, “-”,“*”,“/” 运算;
- calc() 函数使用标准的数学运算优先级规则。
3. 语法
.demo{
/* property: calc(expression) */
width: calc(100% - 80px);
}
解释: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: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">
慕课网:计算函数学习
</div>
</div>
</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果
- 使 demo 的宽度、高度为父元素的 1/3。
.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">
慕课网:计算函数学习
</div>
</div>
</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果
- 使 demo 的宽度、高度为父元素的 (100% + 200px) /3。
.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">
慕课网:计算函数学习
</div>
</div>
</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果
6. 经验分享
calc
的用法非常简单,它的出现给我们带来了很多方便。它多用于在父级元素大小变动时候内部子元素的大小展示,例如上面的例子。
在使用它的时候,如果遇到复杂的运算,我们可以人为的去先处理下,来减少内部的( )
,例如 3 中 :
calc( (100% + 200px) /3)
我们可以写成 :
calc( 100%/3 + 200px/3)
- 要注意,calc 中的运算符的前后都需要保留一个空格,这一点千万不要忘记得了,如果遇到问题不要慌,打代码调试器看看问题到底出在哪里了。
- 还没有人评论,欢迎说说您的想法!