问题标签 [css-calc]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - CSS 供应商特定计算
我遇到了以下css代码。它为 css calc 函数使用供应商前缀。据我所知，供应商前缀用于样式定义的左侧，基本上它们是浏览器中新功能的供应商特定属性，但尚未标准化。我认为我说以下不正确是正确的。
因为 -webkit-calc 在右边。
css - 响应式字体大小 Calc() 错误
我正在尝试使用以下 css 将我的字体大小在 0.875rem 和 1.3rem 之间缩放，媒体宽度为 20rem 到 40rem，它在 Firefox 和 Chrome 中运行良好，但不是 Safari，其中 calc() 返回的值太大。
任何想法如何使它工作或我可以采取不同的方法？
https://jsfiddle.net/larsenwork/gjhc9bzp/2/
编辑：添加了 sass 版本
html - css计算有多快？
假设我有一个占据整个空间的块，并且在其中有一个固定宽度的块，以这样的方式居中：
如果我要尽量减少页面上元素的嵌套，那么下面的解决方案会更慢吗？
我试图做基准测试，但我从来没有做过，所以我可能在某个地方搞砸了：http: //jsperf.com/css3-calc-test/14
它表明 calc 版本的速度要快得多。
css - 有没有办法让 CSS calc() 永远不会是负值？
我有以下代码，它非常适合将我的内容居中，直到vh小于650px。我想知道是否有办法让这个值永远不会低于0只使用 CSS calc。
css - 行高计算 vh 单位
我有一点复杂的问题。我需要通过单位line-height差异vh和CSS 来设置。我的想法是通过这段代码来设置它pxcalc
这听起来很容易，但行不通。CSS Calc Viewport Units Workaround中描述了为什么使用这些单位进行计算不起作用？这是通过修改边距和填充来解决height属性的，但它不能用于行高属性。
我看到这个问题在 Chrome、IE 和 Edge 中得到了解决，但我也需要在 Firefox 上这样做。在 Firefox 中，它显示在开发人员工具中
无效的属性值。
任何想法？（JavaScript 不是我的解决方案）
html - CSS calc() 是否被广泛支持？
自从我学会了如何calc在 CSS 中使用之后，我发现了许多它对我有用的实例。
但是，我想知道它如何跨浏览器和设备执行。
它是否得到足够广泛的支持而无需担心使用？
演示：
css - css calc - 以小数点后两位向下取整
我有以下情况：
在上下文中，100%=1440px和9.09px是在数学中使用 sass 生成的。
结果是：94.55px，因为向上calc舍入，但我需要（向下舍入）。94.54px
我怎样才能四舍五入到最接近的百分位？
编辑：示例。
css - 用于反向宽度的 CSS calc() 不起作用
我有一个元素想要增加，width因为它的父元素减少了width
方程应该类似于：
但至少在 Chrome 中，每当我尝试除以百分比宽度时，它都会说该属性无效。
这可能吗？（替代方案calc()是可以接受的）
编辑 我添加了空格（没有意识到这一点）。用各种单位尝试过，还没有运气。
思考过程：
固定宽度 (150px) 加上 500 除以当前父宽度。
所以如果父母是500px：
150 + 500/500 -> 150 + 1 = 151
父级为 100px
150 + 500/100 -> 150 + 5 = 155
父级为 20px
150 + 500/20 -> 150 + 100 = 250
css - 我可以在 CSS 中的 Transform:Scale 函数中使用 Calc 吗？
我正在尝试计算正确的比例以应用于父母内部的孩子，但我不能calc()在transform: scaleCSS 函数中使用。我已经用 javascript 完成了这个功能，但我对纯 CSS 解决方案感兴趣，以避免尽可能多地使用脚本使页面膨胀。
示例： CSS
此定义返回无效的属性值。其他用途，如翻译：
工作没有问题。无论如何我可以使用 calc 仅使用 CSS 计算 div 的正确比例吗？
编辑：为了更好地解释它，在计算中找到一个介于 0 和 1 之间的值不是问题。如果我使用百分比，我只会得到无效的属性值。
测试 1 我尝试使用 CSS3 变量，但在 Scale 函数中没有结果
它似乎接受 chrome 中的值，但不操作比例。
ZOOM CSS 属性似乎只能在 chrome 中正常工作。这工作正常。
工作示例：
在 Url: MiWeb 中，具有类：class="cs_6c537e46d973809bcbd9abb882d9c7db cssprite" 的 DIV 具有 background-image 属性，因为它使用 sprite 作为源。 CSS
现在原始图像大于可见 div (height:250px aprox)，我想仅使用 CSS 来缩放图像，因为我想避免使用 JS 以更好地与 JS 被阻止的浏览器兼容。
我想将该背景图像缩放到正确的大小，正确的值是 250px / 490px ( scale(calc(100% / 490) )。CSS 是在输出之前和 CMS 的其他部分生成的，所以我不能知道生成css规则时父DIV的实际大小。