CSS 中calc()神技

Posted 2023-04-18

参考技术A

众所周知，CSS有一个特殊的calc()函数，用于做基本的数学运算。

demo：

让我们来详细的学习一下这个功能吧:

calc()函数只能在值中使用。
demo:

也可以在部分属性的内部作为单独的值使用.
demo:

它甚至可以成为构成属性一部分的另一个功能的一部分！例如，这里的calc() 用于渐变的色标中.

demo:

calc() 可以将不同的单位混合在一起 .

demo:(在sass中)

例如：假设我们需要写定一个父盒子的7分之一的宽度的盒子；

calc() 中可以使用加减乘除 , 但他们在使用方法上有所不同。
加法(+)和减法(-)要求这两个数都是长度

除法(/)要求第二个数字是无单位的

calc() 在 CSS 中不计算，浏览器中的差异 [重复]

【中文标题】calc() 在 CSS 中不计算，浏览器中的差异 [重复]

【英文标题】：calc() doesn't calc in CSS, differences in browsers [duplicate]

【发布时间】：2015-11-11 05:55:16

【问题描述】：

我创建了两个表，我想根据第一个表的大小设置右侧 3 列的 width。我试过calc((100% - 200px)/3)，但它不适用于所有浏览器：Firefox 40 失败，IE11 失败，Chrome 44 似乎做得对。我该怎么做才能让所有浏览器都能理解calc()？还是我应该忘记它？

我创建了一个更简单的版本，但同样失败了。

<table class="tableauTable">
<thead>
    <tr class="tableauRow first">
        <th colspan="3" rowspan="2" class="tableauCell first"><span class="xspTextComputedField">Objet - Acteurs</span>
        </th>
        <th class="tableauCell header col3"><span class="xspTextComputedField">Julien GARDIN</span>
        </th>
        <th class="tableauCell header col3"><span class="xspTextComputedField">Justine VINCLAIR</span>
        </th>
        <th class="tableauCell header col3"><span class="xspTextComputedField">Marcel COMMAS</span>
        </th>
    </tr>
</thead>
<tfoot>
    <tr class="tableauRow first">
        <th colspan="3" header="" class="tableauCell first"></th>
        <th class="tableauCell header col3"><span class="xspTextComputedField">Julien GARDIN</span>
        </th>
        <th class="tableauCell header col3"><span class="xspTextComputedField">Justine VINCLAIR</span>
        </th>
        <th class="tableauCell header col3"><span class="xspTextComputedField">Marcel COMMAS</span>
        </th>
    </tr>
</tfoot>
</table>

同样，calc():

<table class="tableauTable">
<thead>
    <tr class="tableauRow first">
        <th colspan="3" rowspan="2" class="tableauCell first"><span class="xspTextComputedField">Objet - Acteurs</span>
        </th>
        <th class="tableauCell header col3x"><span class="xspTextComputedField">Julien GARDIN</span>
        </th>
        <th class="tableauCell header col3x"><span class="xspTextComputedField">Justine VINCLAIR</span>
        </th>
        <th class="tableauCell header col3x"><span class="xspTextComputedField">Marcel COMMAS</span>
        </th>
    </tr>
</thead>
<tfoot>
    <tr class="tableauRow first">
        <th colspan="3" header="" class="tableauCell first"></th>
        <th class="tableauCell header col3x"><span class="xspTextComputedField">Julien GARDIN</span>
        </th>
        <th class="tableauCell header col3x"><span class="xspTextComputedField">Justine VINCLAIR</span>
        </th>
        <th class="tableauCell header col3x"><span class="xspTextComputedField">Marcel COMMAS</span>
        </th>
    </tr>
</tfoot>

CSS：

    .tableauTable 
        width:100%;
        border-spacing: 1px;
    
    .tableauRow.first .tableauCell 
        background: #d2d2d2 none repeat scroll 0 0 !important;
        text-align: center;
    
    .tableauCell.first 
        width: 150px;
    
    .tableauCell.col3 
        width: 30%;
    
    .tableauCell.col3x 
        width: calc(30%);
    
    .tableauCell.first 
        background: #d2d2d2 none repeat scroll 0 0 !important;
        text-align: center;
    
    .tableauCell 
        background: #eee none repeat scroll 0 0;
        border: 2px solid white;
        color: black;
    

见http://jsfiddle.net/sjefb/19vrf52o/

【问题讨论】：

似乎不是浏览器兼容性问题though

您能否更具体地了解“失败”的含义？它没有按照您的预期布局？布局被忽略？浏览器崩溃了？根据caniuse.com/#feat=calc 的说法，可能是不同浏览器处理亚像素的方式引起的。

你打开小提琴了吗？您会看到，当 col3 宽度设置为 30% 时，所有浏览器都正常运行，而当宽度设置为 calc(30%) 时，似乎只有 Chrome 可以工作。

@D.Bugger 我已经为你更新了我的答案。这有帮助吗？

【参考方案1】：

你为什么要计算单个值？ calc(30%);

calc 对语法非常挑剔，尤其是资源值之间的差距。 您需要添加空格：

width: calc((100% - 200px) / 3);
                 ^^^^    ^^^^^   

编辑：这似乎不是问题，而是将宽度值 is 应用于单元格（因为萤火虫显示它是），但根据单元格内容而有所不同，所以这个显示宽度值被覆盖，所以尝试设置一些其他值：

在表格和单元格CSS定义集：

box-sizing: border-box;
margin:0;

【讨论】：

谢谢，但这不相关：减号周围有空格，斜线不需要它们。正如我所说，我提出了一个更简单的版本，带有一个微不足道的 calc 表达式，即使这样也会出错。

@D.Bugger Firebug 显示正在应用您的宽度值 (30%)，但也许您应该尝试将 min-width 设置为 30%。因为宽度值可以被层次结构中的其他元素覆盖

我将尝试使用 table-layout: fixed

是的。使用table-layout:fixed时，“表格和列的宽度由table和col元素的宽度或第一行单元格的宽度设置”。因此，在您的用例中，您必须使用固定布局（除了上面 Martin 所说的）。您还需要考虑2px 边框和1px 边框间距。总体而言，它将产生11px 的差异。然后，它工作得很好：jsfiddle.net/abhitalks/19vrf52o/6（检查开发工具）

【参考方案2】：

我使用 table-layout: fixed 解决了我的问题，并且为了固定列大小，我使用了 colgroup 和 col 标签。现在 calc() 似乎表现出来了，也就是说：最左边的列有一个固定的宽度，而所有其他列的大小都是一样的。

感谢大家和我一起思考！

【讨论】：

很高兴你把它整理好了。