calc 计算 属性
calc 这个 属性 可以达到什么 效果 呢？通过计算 函数 ，可以在 不刷新浏览器 的情况下，实时的让 属性 值发生变化，我们一起看看 calc 的使用吧。
1. 官方定义
calc() 函数 用于动态计算长度值。
2. 解释
calc() 可以按照我们写的公式，在浏览器中进行计算，使用的时候，要注意： 运算符 的前后都需要保留 一个 空格 ，例如： width: calc(100% - 20px)； 中， - 号前后要有一空格。 它 支持 “+”， “-”，“*”，“/” 运算； calc() 函数 使用标准的数学运算优先级规则。
3. 语法
.demo {
/* property: calc(expression) */
width : calc ( - px ) ;
}
解释：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 ) ;
}
效果 图：
宽度比父级宽度小 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 >
使 demo 的宽度、高度为父元素的 1/3。
.out- Box {
border : px solid #ccc ;
width : px ;
height : px ;
}
.demo {
border : px solid #ccc ;
height : calc ( / ) ;
width : calc ( / ) ;
}
效果 图：
宽度、高度为父元素的 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 >
使 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 ) / ) ;
}
效果 图：
宽度、高度为父元素的 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 >
6. 经验 分享
calc 的 用法 非常简单，它的出现给我们带来了很多方便。它多用于在父级元素大小变动时候内部子元素的大小展示，例如上面的例子。
在使用它的时候，如果遇到复杂的运算，我们可以人为的去先处理下，来减少内部的 （ ） ，例如 3 中 ：
calc ( ( + px ) / )
我们可以写成 ：
calc ( / + px/ )
要注意，calc 中的 运算符 的前后都需要保留 一个 空格 ，这一点千万不要忘记得了，如果遇到问题不要慌，打 代码 调试器看看问题到底出在哪里了。
CSS3教程 ?nth 类型元素选择器