时间戳

首页 > 解决方案 > CSS 中的 left 和 right 属性是否可以使用“calc”？

html - CSS 中的 left 和 right 属性是否可以使用“calc”？

问题描述

我尝试使用left:calc(width:/2);但没有用。有没有办法使用“calc”来控制左右css属性？

我也尝试过使用 webkit，但它没有用。

标签： htmlcss

解决方案

这根本不是 calc 的工作方式，并且应该被使用。calc 用于计算基于多个单位的数量，而不是基于多个 css 属性。

例如，您不能直接根据宽度计算左侧。

但是，您可以做的是例如这样的事情：

element {
  width: 78%;
  left: calc(78% / 2);
}

在这里，您只需手动复制宽度的值并将其除以 2，但由于它始终为 78%，您不妨将其替换为：

element {
  width: 78%;
  left: 39%;
}

这可能会让你感到困惑，因为那时真的不需要 calc() 但是 calc 有一个非常重要的特性，它很有用。

该功能是能够计算像 px 这样的绝对单位以及像 % 或 vw 这样的相对单位

一个实际的例子：

假设您有一个包含 2 个垂直放置在彼此之上的 div 的站点。顶部是标题，底部可能是页面的内容。

假设您希望标题始终为 50px 高，然后您可以像这样定义标题：

#header {
  height: 50px
}

然后你希望内容是页面的其余部分，这将是窗口高度（100vh）减去标题所取的 50px，内容元素的高度应该是 100vh - 50px，可以使用 calc 计算（） 像这样：

#content {
  height: calc(100vh - 5px);
}

简单地说：您的 css 不起作用的原因是因为您误解了 css calc() 的用途和用途。

注意：请记住始终在 calc 函数中的运算符周围放置空格，否则它将根本不起作用。

所以这将起作用：

calc(100% - 50px);

但这不起作用：

calc(100%-50px);

推荐阅读