标签: css-calc

我有以下CSS:

body {
  width: calc(700px + 2 * 4rem);
}

.someclass {
  margin: calc(2rem - 2px) 0;
}

当我通过W3C CSS验证运行时,我得到了

值错误:宽度分析错误+ 2*4rem)
值错误:margin Parse Error - 2px)0

是什么导致了这个？我使用的所有单位calc()都是长度单位,calc()应该能够处理它.

由于我已经学会了如何calc在CSS中使用,我发现了许多对我有用的实例.

但是,我想知道它如何跨浏览器和设备执行.

是否广泛支持使用而不用担心？

演示:

.element {
  width: calc(100% - 25px);
}

header::before在这个例子中，我试图将伪元素拉伸到整个页面宽度。

100vw 为伪元素提供屏幕的宽度，到目前为止还不错。

但是左侧位置left: -100%;将伪元素向左推得太远了。是否可以计算出正确的左侧位置？

.wrapper {
  width: 70%;
  max-width: 800px;
  margin: 0 auto;
}

header {
  background: pink;
  position: relative;
  z-index: 0;
}

header::before {
  background: lightblue;
  position: absolute;
  z-index: -1;
  content: "";
  height: 100%;
  width: 100vw;
  /* full page width */
  left: -100%;
  /* left positioning */
}

main {
  background: wheat;
}

<div class="wrapper">
  <header>Header</header>
  <main>Main content</main>
</div>

Codepen 链接：https ://codepen.io/anon/pen/yZGzPO

所需的结果应如下所示：

尝试在 Safari (v12+) 和 Firefox (v84+) 中使用calc()该stroke-dashoffset属性会导致浏览器呈现该值而0px不是预期值。Chrome 的行为符合预期。

在下面的示例中，两个 SVG 应该看起来相同，线条的笔划延伸到正方形的一半。

svg {
  border: 1px solid red;
}
.withCalc line,
.withoutCalc line {
  stroke-dasharray: 190;
}
.withCalc line {
  stroke-dashoffset: calc(190 / 2);
}
.withoutCalc line {
  stroke-dashoffset: 95;
}

<svg class="withCalc" viewBox="0 0 200 200" width="200" height="200">
  <line x1="5" y1="100" x2="195" y2="100" stroke="black"/>
</svg>
<svg class="withoutCalc" viewBox="0 0 200 200" width="200" height="200">
  <line x1="5" y1="100" x2="195" y2="100" stroke="black"/>
</svg>

这是 Safari 和 Firefox …

我有一个 CSS 变量--size，它是用 javascript 设置的。它的值将为 0 或任何整数。

我希望使用该calc函数创建一个新的 CSS 变量。我希望这个新变量的值为 0 或 1。

• 如果--size= 0 那么新变量 = 0
• 如果--size> 0 那么新变量 = 1

我可以使用下面的代码来实现这一点：

--new: calc(var(--size)/(var--size))

但是当--size= 时0，这不起作用。

有没有办法可以根据变量的值调整我的计算以达到 0 或 1？

为什么这样calc(100vw/4)做有效，但以下两个都不起作用？

1. calc(100vw/4-(10-4))
2. calc(100vw/4-(10px-4))
3. calc(100vw/4-(10px-4px))
4. calc(100vw/4-calc(10px-4px))

如何管理在SASS循环calc(100vw/x-(10px-x))中x被替换的表达式起作用？

我在我的应用程序中遇到 CSS 布局问题，并使用jsFiddle重现它。

基本上，它非常简单，如下所示：

html,body {
    height: 100%;
}
.header {
   background: yellow;
   height: 50px;
}
.main {
   background: green;
   height: calc(100% - 50px);
}

<div class="header">Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</div>
<div class="main"></div>

标题 div 设置为固定高度50px，我希望主 div 可以占据剩余的高度，所以我使用calc(100% - 50px).

但结果对我来说有点奇怪。生成的高度不准确，生成了垂直滚动条。我已经检查了边距或填充，没问题。

我想要的结果是整个页面分为两部分。并且没有产生滚动条。

我需要制作一个基于屏幕宽度的正方形元素。为了将高度设置为与宽度相同，我尝试使用JS，但似乎有点错误。这是一个例子

var square = document.getElementById('square');
square.style.height = square.clientWidth + 'px';

#square {
  background-color: blue;
  width: calc(20vw - 16px);
  padding: 8px;
}

<div id="square">Element</div>

上方的蓝色“正方形”不是正方形。能解释为什么吗？而不是clientWidth，我已经尝试过scrollWidth并offsetWidth得到类似的结果。我也没有style.width给出正确的数字。

即使您在Chrome上检查了蓝色正方形，您也会得到一个高度和宽度近似但仍然非常不同的数字。