我可以将 auto 值与 calc() 属性一起使用吗？答案

【问题标题】：Can I use the auto value with the calc() property?我可以将 auto 值与 calc() 属性一起使用吗？
【发布时间】：2014-02-12 01:49:49
【问题描述】：

我想使用calc() 将margin 设置为auto 加上一些像素量，但我的代码似乎不起作用。

selector {
    margin: calc(auto + 5px);
}

我可以将calc() 设置为自动边距加上固定值吗？像这样的：

【问题讨论】：

向我们展示您的 html 或给我们一个小提琴，以便我们为您解决问题..
jsfiddle.net/jP7mN
我尝试定义百分比，但它不会因为我的 div 可能变小或变大而消失。
@C-link 考虑使用margin: auto 绑定一个容器中的所有元素，然后扣除我在示例中展示的边距
所以我必须为不同的 div 设置不同的边距，但我想使用一次。

标签： css css-calc

【解决方案1】：

来自MDN：

calc() CSS 函数可以在<length>、<frequency>、 <angle>、<time>、<number> 或 <integer> 是必需的。使用 calc()，你可以执行计算以确定 CSS 属性值。

您不能在此处使用 auto，因为它不是calc() 的有效值。

calc() 的语法

term
  : unary_operator?
    [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
      TIME S* | FREQ S* ]
  | STRING S* | IDENT S* | URI S* | hexcolor | function | math
  ;

更多信息，请参考Docs

正如您评论的那样，您希望将div 居中，但您还希望在right 上使用5px margin，而不是您可以通过在父元素上使用text-align: center; 来实现它并使子元素@ 987654342@元素转display: inline-block;

Demo

输出

div.wrap {
    text-align: center;
}

div.wrap div {
    display: inline-block;
    height: 100px;
    width: 100px;
    color: #fff;
}

div.wrap div.with_margin {

    margin-right: 5px;
    background: #f00;
}

div.wrap div.without_margin { 
    background: #000;
}

【讨论】：

哦！也有功能。我怎样才能使自动+ 5px？
@C-link 这没有任何意义，当你在右边添加5px margin 时，它怎么会是自动的？你能展示一种你所期望的代表性方式吗？
尝试理解比较这些演示：jsfiddle.net/jP7mN/1 jsfiddle.net/jP7mN/2。无论 div 宽度是多少，它都会将 margin-right 设置为 25%，但我想表现得像两边自动，但加上右侧的一些宽度边距。

【解决方案2】：

今天看到我自己的问题，我感到很惭愧，为什么我不能正确地思考它？基本上，自动边距是左边距 50% 减去 div 的宽度。在此基础上，我们可以这样布局元素：

margin-left: calc(50% + 5px);
transform: translateX(-50%);

使用前面的代码相当于calc(auto + 5px);。因为， calc 不支持 auto 我们需要用实际的翻译概念来欺骗。这意味着我们也可以使用50% - half of width 的概念进行绝对位置布局，但为了简单起见，我更喜欢这里的transform。

请看下面的演示：

.parent{
  position: relative;
}
.child{
  border: 2px solid green;
  width: 25%;
  height: 50px;
  margin: 10px auto;
}
.right{
  margin-left: calc(50% + 20px);
  transform: translateX(-50%);
}
.left{
  margin-left: calc(50% - 20px);
  transform: translateX(-50%);
}
#border{
  height: 100%;
  border: 1px solid yellow;
  width: 25%;
  margin: auto;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
}

<div class="parent">
  <div id="auto" class="child">
    auto margin
  </div>
  <div id="auto-right" class="child right">
    auto + pushed to right
  </div>
  <div class="child left">
    auto + pushed to left
  </div>
  <div id="border"></div>
</div>

增加或减少左右的正负值才能正确理解。

注意：使用下面的代码

.right{
  margin-left: calc(50% + 20px);
  transform: translateX(-50%);
}

与使用相同：

.right{
  margin-right: calc(50% - 20px);
  transform: translateX(-50%);
}

对于这个概念。

另请注意，该问题与某个百分比计算加上减去所需的偏移有关。所以在这个答案中，它同时使用了 calc 和 transform 。如果您确实需要在中间移动，那么我们可以使用（没有左边距或右边距）：

transform: translateX(-20px)

答案提供了 50% 的计算，但问题需要使用一些百分比，例如 calc(20% - 20px)。

【讨论】：