在我们开发中，经常用到一个给定的div宽度，剩余的自动充满占全，但是，为了适应不同的屏幕的显示大小，我们不能给定值宽度，所以就需要动态的获取，那么，就要采用calc() 函数进行计算。
实例
使用 calc() 函数计算 <div> 元素的宽度:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<style>
.test {
width: calc(100% - 50px);
background: #eee;
}
</style>
</head>
<body>
<div class="test">我的宽度为100% - 50px</div>
</body>
</html>语法：
calc() = calc(四则运算)
定义与用法
calc() 函数用于动态计算长度值。
- 需要注意的是，运算符前后都需要保留一个空格，例如：
width: calc(100% - 10px)； - 任何长度值都可以使用calc()函数进行计算；
- calc()函数支持 "+", "-", "*", "/" 运算；
- calc()函数使用标准的数学运算优先级规则；
兼容性：
浅绿 = 支持
红色 = 不支持
粉色 = 部分支持
1058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
