Home / Questions / 88255
Accepted
fedorqui
Asked: 2020-07-21 02:46:02 +0800 CST 2020-07-21 02:46:02 +0800 CST

什么情况下可以在 CSS 中使用 calc()？

  • 772

我已经阅读了文档calc()并理解了语法，但是在 CSS 中，没有执行任何代码，我不知道什么时候应该使用它。

这个典型的例子对我来说听起来很简单，我不知道它是否很有用：

/* property: calc(expression) */
width: calc(100% - 80px);

是否有使用的规范案例calc()？你能举一个例子，在这个例子中它对于一个真实案例的解决方案是实用的吗？

我看到它在浏览器中的使用非常广泛（93% 根据Can I use...）。推荐如何使用它，对于不支持它的浏览器（IE 8 及更早版本，IE 9 存在一些问题）来说，它的等价物是什么？

css

4 Answers

  1. Best Answer

    我知道它的使用不规范的几种情况，但calc它比任何其他方式都更容易做到。

    背景图像的定位

    定位背景图像非常容易

    .ejemplo {
  width: 500px; 
  height: 500px;
  border: 1px solid black;
  background-image: url('https://i.imgur.com/W51iG94.png');
  background-repeat: no-repeat;
  background-position: 150px 50px;
}
    <div class="ejemplo"></div>

    但是，当我们想要将背景图像相对于右侧和底部定位并且我们事先不知道包含元素的大小时会发生什么？用calc是最简单的。

    .ejemplo {
      width: 100%; 
      height: 500px;
      border: 1px solid black;
      background-image: url('https://i.imgur.com/W51iG94.png');
      background-repeat: no-repeat;
      background-position: calc(100% - 150px) calc(100% - 50px);
    }
    <div class="ejemplo"></div>

    这样容易多了。

    创建 GRID 系统

    想象一下，您想设计自己的 GRID 系统，比如说 7 列。

    这将导致在 CSS 代码中我们会有难以阅读和理解的十进制数字：

    .col-1 {

  border: 1px solid black;
  width: 14.2857%;
  height: 50px;

}

.col-5 {

  border: 1px solid black;
  width: 71.4285%;
  height: 50px;

}

.col-3 {

  border: 1px solid black;
  width: 42.8517%;
  height: 50px;

}
    <div class="col-1"></div>
<div class="col-5"></div>
<div class="col-3"></div>

    我们可以通过使用calc.

    .col-1 {

      border: 1px solid black;
      width: calc(100% / 7);
      height: 50px;

    }

    .col-5 {

      border: 1px solid black;
      width: calc(100% / 7 * 5);
      height: 50px;

    }

    .col-3 {

      border: 1px solid black;
      width: calc(100% / 7 * 3);
      height: 50px;

    }
    <div class="col-1"></div>
<div class="col-5"></div>
<div class="col-3"></div>

    同样，这样做似乎更容易。

    定位和标注浮动元素。

    想象一下，您必须将 2 个浮动元素放置在一个可变（和未知）宽度的容器中，保持它们之间的纵横比，并在它们之间保持固定的间距（边距）。

    .rojo {
  width: 40%;
  float: left;
  height: 100%;
  margin-right: 1em;
  padding: 30px;
  background: red;
  color: white;
}

.azul {
  width: calc(60% - 1em);
  float: right;
  height: 100%;
  padding: 30px;
  color: white;
  background: blue;
}

html, body {
  height: 100%;
  background: #ccc;
  padding: 20px;
}
body {
  padding: 20px;
  background: white;
}

* {
  box-sizing: border-box;
}
    <div class="rojo">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div>

<div class="azul">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div>

    需要考虑的因素

    句法

    尊重calc:的语法是很重要的，calc(100%[espacio]-[espacio]50px) 喜欢calc(100%[espacio]-50px)或calc(100%-50px)不会在所有浏览器中工作。

    备份规则

    尽管大多数浏览器都支持calc，但最好对不支持的浏览器使用后备规则：

    .respaldo {
  width: 85%; /* Valor aproximado, para navegadores que no lo soporten */
  width: calc(100% - 100px);
}

    您可以在https://css-tricks.com/a-couple-of-use-cases-for-calc/找到这些和其他用例

    • 27

  2. 伙计，这样说，当你想将一个容器分成相等的部分时，我可以想到用途，而不必计算它有多少 px。

    .contenedor{
    width: 300px;
}
/** Divido el tamaño del contenedor en 10 partes usando elementos en su interior **/
.contendor .elemento{
    display: flex;
    flex-direction: row;
    width: calc(0.1 * 300px);
}

    真的是你能想到的。但在我看来，也许最好的选择是结合一些Less或Sass类型的语言，您可以在其中将值存储在变量中。而且，随着您逐步阅读代码，您可能并不真正关心它有什么价值。例如：

    @tam: 300px;

.contenedor{
  width: @tam;
  height: @tam;
  .elemento{
    width: calc(0.5 * @tam);
  }
}

    这个例子非常小，也许潜力并没有真正被欣赏，但是想象一个有 500-700 行 Less 的文件，你知道一个容器的大小是 500px，你想要两个在里面，每个都是一半，但你不知道第一个容器的真正价值是多少。通过结合 Less 和函数calc()，您可以获得 less 变量值的一半。（一半，三分之一，随便你……）

    但这就像几乎所有事情一样，就您的想象而言。

    • 10

  3. 最小控制是另一个直接应用calc()，一个实际的例子可以看到字体或排版。

    假设我想根据视口的宽度调整我的字体大小，为此我将使用单位vw：

    .contenido {
  font-size: 3vw;
}
    <div class="contenido">
  Icing topping gummies sesame snaps cotton candy dragée cookie wafer. Oat cake tootsie roll dessert carrot cake cake marzipan. Toffee biscuit gummies biscuit. Donut chocolate cupcake tart halvah sweet roll wafer. Lollipop halvah dessert croissant pie. Dragée cotton candy bear claw gummi bears caramels caramels tiramisu. Wafer cheesecake pie brownie powder.
</div>

    到目前为止一切顺利，3% 的宽度适用于我的网络应用程序，但我想确保字体大小至少为 0.7rem，无论分辨率如何，并且字体大小仍然“适应”。虽然我可以使用媒体查询和 a 来做到这一点，但(max-width: ...)使用 calc 我可以维护一种适应所有分辨率的字体：

    .contenido {
  font-size: calc(0.7rem + 1vw);
}
    <div class="contenido">
  Icing topping gummies sesame snaps cotton candy dragée cookie wafer. Oat cake tootsie roll dessert carrot cake cake marzipan. Toffee biscuit gummies biscuit. Donut chocolate cupcake tart halvah sweet roll wafer. Lollipop halvah dessert croissant pie. Dragée cotton candy bear claw gummi bears caramels caramels tiramisu. Wafer cheesecake pie brownie powder.
</div>

    总而言之，如果使用某些媒体查询calc()并保持尺寸可适应而不会失去美感，则可以消除它。

    • 10

  4. 由于您已经获得了几个有趣的使用示例，并且我认为我在这方面无法做出更多贡献，因此我将尝试回答其他问题。

    尽管 MDN 文档非常好，但始终建议您查看规范中的内容，在这种情况下https://www.w3.org/TR/css3-values/#calc-notation解释了语法和特性详细介绍这个功能。

    你举的例子来说明这个问题：width: calc(100% - 80px);它可能看起来简单而无用，因为它是一个看似简单的数学计算，但如果我们更仔细地观察，我们会发现有两种不同的测量单位：百分比和像素；这就是 的魔力calc()，它通过从元素的当前宽度中减去 80 个像素来实时计算，如果修改了这个大小，它将重新计算新的宽度。

    动态使用不同单位进行计算的可能性是calc()最有用和最有趣的品质之一。

    的支持calc()非常广泛，但是当您要求替代时，我想到了几个选项：

    • 如果完成的计算是对相同类型的数字或单位的运算，则可以将计算结果直接放入属性的值中，或者使用 SASS、Less、Stylus 等预处理器。它可以为您计算。

    用计算（） 

       width: calc((75px + 25px) / 3);

    没有计算（） 

       width: 33.33333px;
    • 如果您混合不动态变化的单位，您也可以自己进行计算，或者使用预处理器创建一个函数来在单位之间进行转换并为您计算。

    用计算（） 

       width: calc(1em + 10px);

    没有 calc()
    假设我们将字体大小设置为 16px

       width: 26px;
    • 例如，对于示例中混合了在调整浏览器大小时可以更改的相对和固定单位的情况，唯一完全适合的选择是使用 JavaScript。

    用计算（） 

       width: calc(100% - 10px);

    没有 calc()
    就不可能只用 css 给出一个精确的值。使用 jQuery，您可以执行以下操作：

    $(window).resize(function(){
  $('#midiv').css('width', '100%').css('width', '-=10px');
});
    • 8