CSS基础篇--CSS3 calc实现滚动条出现页面不跳动
Posted 前端程序人生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS基础篇--CSS3 calc实现滚动条出现页面不跳动相关的知识，希望对你有一定的参考价值。
什么是calc()?
calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。
语法
calc() = calc(四则运算)
例如：
.elm {
width: calc(expression);
}
其中"expression"是一个表达式，用来计算长度的表达式
说明
用于动态计算长度值。
* 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
* 任何长度值都可以使用calc()函数进行计算；
* calc()函数支持 "+", "-", "*", "/" 运算；
* calc()函数使用标准的数学运算优先级规则；
兼容性
简单的例子：
<!DOCTYPE html>
<
html
lang
=
"zh-cmn-Hans"
>
以上是关于CSS基础篇--CSS3 calc实现滚动条出现页面不跳动的主要内容，如果未能解决你的问题，请参考以下文章