甚么是calc()?
calc()从字面大家能够把他了解为1个涵数function。实际上calc是英文单词calculate(测算)的缩写，是css3的1个新增的作用，用来特定元素的长度。例如说，你可使用calc()给元素的border、margin、pading、font-size和width等特性设定动态性值。为什么说是动态性值呢?由于大家应用的表述式来获得的值。但是calc()最大的益处便是用在流体合理布局上，能够根据calc()测算获得元素的宽度。
英语的语法
calc() = calc(4则运算)
比如：
.elm {
width: calc(expression);
}
在其中"expression"是1个表述式，用来测算长度的表述式
表明
用于动态性测算长度值。
适配性
简易的事例：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf⑻" />
<title>calc()涵数_CSS参照手册_web前端开发开发设计参照手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe, www.doyoe.com" />
<style>
.test {
width: calc(100% - 50px);
background: #eee;
}
</style>
</head>
<body>
<div class="test">我的宽度为100% - 50px</div>
</body>
</html>
下面就来说解下最常见的这个：完成翻转条出現网页页面不颤动的运用
当网页页面內容动态性载入，刚开始沒有翻转条，內容增多后出現翻转条，这时候应用固定不动宽度垂直居中对齐合理布局会向左偏位1个翻转条宽度。处理方式能够给內容所有加上overflow-y:scroll;或是依据內容用css填充好再填补內容。本文详细介绍的是calc来测算翻转条宽度，当有翻转条时，內容外界也给它仿真模拟1个翻转条宽度，因此就不容易偏位了。·
很简易，要是1行编码就搞定了：
.wrap-outer {
margin-left: calc(100vw - 100%);
}
或：
.wrap-outer {
padding-left: calc(100vw - 100%);
}
最先，.wrap-outer指的是垂直居中定宽行为主体的父级，假如沒有，建立1个（应用行为主体也是能够完成相近实际效果，但是本着宽度分离出来标准，不强烈推荐）；
随后，calc是css3中的测算，IE10+访问器适用，IE9访问器基础适用(不可以用在background-position上)；
最终，100vw相对访问器的window.innerWidth，是访问器的內部宽度，留意，翻转条宽度也测算在内！而100%是能用宽度，是不含翻转条的宽度。
因而，calc(100vw - 100%)便是访问器翻转条的宽度尺寸（假如有，假如沒有翻转条则是0）！上下都有1个翻转条宽度（或全是0）被占有，行为主体內容便可以始终垂直居中访问器啦，从而沒有任何颤动！
总结
以上所述是网编给大伙儿详细介绍的CSS3 Calc完成翻转条出現网页页面不颤动难题，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
Copyright © 2002-2020 小游戏源代码_互动小游戏微信_自制小游戏_html5游戏_制作游戏大概多少钱 版权所有 （网站地图） 粤ICP备10235580号