css3的calc()

在这里插入图片描述

css3的calc()

MDN calc() https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

CSS3 的 calc() 函数是一个用于动态计算表达式的工具。它允许你在 CSS 属性值中执行基本的数学运算，从而可以创建响应式的布局和设计。calc() 函数在处理不同单位和计算尺寸时特别有用，尤其是在流体布局和响应式设计中。

例如

<main>
	<div style="position:absolute; left:calc(50% - 10vw); top:calc(50% - 5vh); width:calc(100px*2 + 10%); height:calc(600px/6 + 10em); background:black; color:blue;">加减要空格<br/>乘除的空格可有可无</div>
</main>

calc是计算的意思, 是calculate的简写

MDN calc() https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android
`calc()`	Full support Chrome 26 more Toggle history	Full support Edge 12 Toggle history	Full support Firefox 16 footnote more Toggle history	Full support Opera 15 Toggle history	Full support Safari 7 more Toggle history	Full support Chrome Android 28 Toggle history	Full support Firefox for Android 16 footnote more Toggle history	Full support Opera Android 14 Toggle history	Full support Safari on iOS 7 more Toggle history	Full support Samsung Internet 1.5 Toggle history	Full support WebView Android 37 more Toggle history
Gradient color stops support	Full support Chrome 19 Toggle history	Full support Edge 12 Toggle history	Full support Firefox 19 Toggle history	Full support Opera 15 Toggle history	Full support Safari 6 Toggle history	Full support Chrome Android 28 Toggle history	Full support Firefox for Android 19 Toggle history	Full support Opera Android 15 Toggle history	Full support Safari on iOS 6 Toggle history	Full support Samsung Internet 1.5 Toggle history	Full support WebView Android 37 Toggle history
Nested `calc()` support	Full support Chrome 51 Toggle history	Full support Edge 16 Toggle history	Full support Firefox 48 Toggle history	Full support Opera 38 Toggle history	Full support Safari 11 Toggle history	Full support Chrome Android 51 Toggle history	Full support Firefox for Android 48 Toggle history	Full support Opera Android 41 Toggle history	Full support Safari on iOS 11 Toggle history	Full support Samsung Internet 5.0 Toggle history	Full support WebView Android 51 Toggle history
`<number>` value support	Full support Chrome 31 Toggle history	Full support Edge 12 Toggle history	Full support Firefox 48 Toggle history	Full support Opera 18 Toggle history	Full support Safari 6 Toggle history	Full support Chrome Android 31 Toggle history	Full support Firefox for Android 48 Toggle history	Full support Opera Android 18 Toggle history	Full support Safari on iOS 6 Toggle history	Full support Samsung Internet 2.0 Toggle history	Full support WebView Android 4.4.3 Toggle history

CSS3中的跨单位运算函数 calc()

calc()是英文单词calculate(计算)的缩写

是css3的一个新增的功能，calculate函数可跨单位进行加减乘除计算，例如百分比和像素。还可以使用小括号建立运算顺序

它可以用在如下场合：<length>、<frequency>, <angle>、<time>、<number>、或<integer>。

要注意的是：

1.乘法，乘数中至少要有一个是 <number> 类型的

2.除法，除数（/右面的数）必须是 <number> 类型的

3.用 0 作除数会让 HTML 解析器抛出异常.

4.+ 和 - 运算符的两边必须始终要有空白符。比如 calc(50% -8px) 会被解析成为一个无效的表达式：一个百分比后跟一个负数长度值。而 calc(8px + -50%) 会被解析成为一个长度后跟一个加号再跟一个负百分比。

5.* 和 / 运算符不需要空白符，但考虑到统一性，仍然推荐加上空白符。

6.涉及自动和固定布局表中的表列，表列组，表行，表行组和表单元格的宽度和高度百分比的数学表达式可视为已指定auto。

基本语法

calc() 函数的基本语法如下：

width: calc(expression);

这里的 expression 是一个数学表达式，可以是加法、减法、乘法和除法。需要注意的是，calc() 函数中的加减运算符周围必须有空格，否则表达式将不会被正确解析。

示例

简单的数学运算：

width: calc(100% - 20px); /* 宽度为容器宽度的100%减去20像素 */
height: calc(50vh + 10em); /* 高度为视口高度的50%加上10em */

混合单位：

font-size: calc(1em + 1vw); /* 字体大小为1em加上视口宽度的1% */
padding: calc(5% + 10px); /* 内边距为容器宽度的5%加上10像素 */

在布局中使用：

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: calc((100% - 1200px) / 2); /* 当容器宽度小于1200px时，左侧内边距会增加 */
    padding-right: calc((100% - 1200px) / 2); /* 同理，右侧内边距也会增加 */
}

注意事项

calc() 函数中的表达式必须被解析为一个有效的 CSS 长度、百分比、角度、时间、频率或数字（取决于使用它的上下文）。
在 calc() 函数中使用的数学运算符（+、-、*、/）周围必须有空格。
乘法和除法具有更高的优先级，但可以通过使用括号来改变计算顺序。
当在 calc() 函数中使用百分比时，它是相对于包含块的相应维度（对于宽度是宽度，对于高度是高度）来计算的。
当在 calc() 中使用不同单位时，必须至少有一个边或值具有相对单位（如百分比、视口单位等），因为 CSS 无法在纯粹的绝对单位（如像素与毫米）之间进行数学运算。
在一些旧的浏览器版本中，可能需要添加浏览器前缀（如 -webkit-calc()），但在现代浏览器中，calc() 已经是标准且不需要前缀了。

CSS3 的 calc() 函数是一个非常有用的工具，允许你进行动态的长度计算。通过这个函数，你可以在样式中使用数学表达式来调整元素的大小、位置等属性。

语法

property: calc(expression);

其中，property 是你想要调整的 CSS 属性，如 width、height、margin、padding 等。expression 是一个数学表达式，可以使用加法、减法、乘法、除法等基本算术操作符。

示例

动态宽度：你可以使用 calc() 来根据窗口大小动态调整元素的宽度。

div {
  width: calc(100% - 20px);
}

动态边距：你可以根据元素的大小动态调整边距。

div {
  margin-left: calc(50% - 10px);
}

动态边框宽度：根据元素的大小动态调整边框宽度。

div {
  border-width: calc(1px * ((100vw - 500px) / 2));
}

动态内边距：根据元素的大小动态调整内边距。

div {
  padding: calc(10px + 5%);
}

动态字体大小：根据视口宽度动态调整字体大小。

h1 {
  font-size: calc(1em + 2vw);
}

注意点

calc() 表达式中的单位必须清晰，例如不能出现像 calc(10px + 5em) 这样的表达式。单位必须在整个表达式之前或者之后明确。正确的形式应该是 calc(10px + 5em) 或 calc((10px + 5em) / 2)。
当使用 calc() 时，浏览器会进行值解析和计算，这可能会导致性能影响，特别是在移动设备上。因此，当可能时，尽量减少使用复杂的表达式或避免使用 calc()。

CSS3的calc()函数是用来设置元素的动态属性值的。它可以在CSS中进行数学运算，例如加法、减法、乘法和除法，以便根据不同的条件来计算元素的属性值。

以下是两个使用calc()函数的例子：

为头部添加自适应的宽度和内边距：

#header {
  background: #f60;
  padding: 20px;
  width: 984px; /* Fallback for browsers that don't support the calc() function */
  width: -moz-calc(100% - 40px);
  width: -webkit-calc(100% - 40px);
  width: calc(100% - 40px);
}

在这个例子中，元素的宽度被设置为984px，但是如果浏览器支持calc()函数，它会根据父元素的宽度减去40px来计算宽度。

为主内容添加左浮动和自适应的宽度：

#main {
  border: 8px solid #B8C172;
  float: left;
  margin-bottom: 20px;
  margin-right: 20px;
  padding: 20px;
  width: 704px; /* Fallback for browsers that don't support the calc() function */
  width: -moz-calc(75% - 20px * 2 - 8px * 2);
  width: -webkit-calc(75% - 20px * 2 - 8px * 2);
  width: calc(75% - 20px * 2 - 8px * 2);
}

在这个例子中，元素的宽度被设置为704px，但是如果浏览器支持calc()函数，它会根据父元素的宽度减去一些边距和边框的宽度来计算宽度。

CSS3的calc()函数是一个强大的工具，它允许在CSS属性值中进行数学计算。使用calc()，你可以动态地计算长度值，从而更容易地实现响应式设计和复杂的布局。

基本语法

calc()函数的基本语法如下：

property: calc(expression);

这里的property是你想要设置的CSS属性，而expression是一个数学表达式，可以包含加法(+)、减法(-)、乘法(*)和除法(/)运算。

示例

简单的数学运算：

假设你想要一个元素的宽度是其父元素宽度的一半，你可以这样写：

.element {
  width: calc(50% - 0px);
}

虽然在这个例子中减去0看起来是多余的，但calc()函数允许你进行任何数学运算，包括减去一个值。

使用像素值和百分比：

你可以在同一表达式中混合使用像素值和百分比：

.element {
  padding: calc(10px + 5%);
}

这将元素的内边距设置为10像素加上父元素宽度的5%。

使用加法进行边距调整：

假设你有一个固定的左边距，并想根据视口宽度动态调整右边距以保持总宽度不变：

.container {
  width: 100%;
  margin-left: 50px;
  margin-right: calc(100% - 100% - 50px);
}

在这个例子中，calc()用于计算右边距，以确保容器总宽度等于视口宽度，即使左边距是固定的。

使用min()和max()函数：

calc()还可以与min()和max()函数结合使用，以设置属性的最小值和最大值。例如，你可以限制一个元素的最小宽度：

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

这将确保元素的宽度至少是其父元素宽度减去200像素。

注意事项

运算符和空格：在calc()中，运算符两边必须有空格，否则表达式可能不会被正确解析。例如，calc(50%-10px)是无效的，而calc(50% - 10px)是有效的。
浏览器兼容性：虽然现代浏览器普遍支持calc()，但在一些较旧的浏览器中可能不受支持。在使用calc()时，最好检查你的目标浏览器的兼容性。
回退方案：对于不支持calc()的浏览器，你可以提供一个回退值，但请注意，这不是一个完美的解决方案，因为回退值可能不适用于所有情况。
性能考虑：虽然calc()通常不会对性能产生显著影响，但在复杂的布局中过度使用它可能会导致性能下降。因此，建议仅在必要时使用calc()。

英文单词-计算:Calculate与Compute的区别是什么

compute 源自法语；calculate 源自拉丁语。在使用上，calculate 使用得更为广泛
calculate侧重人的分析，而compute侧重机器的运算。
calculator是“计算器”，而computer是“计算机”

英文单词“Calculate”与“Compute”在含义和用法上存在一些微妙的区别。

首先，从词性的角度来看，“Compute”既可以作动词，也可以作名词，而“Calculate”则只能作动词。不过，当它们都作为动词使用时，两者都表示“计算”。

其次，从侧重点上来看，“Calculate”更偏向于指要求细致精确和复杂的计算，以解决疑难问题，多用于自然科学、生产部门或要求专门计算的场合。它通常涉及更为复杂的运算或预测，需要使用特定的方法或公式。而“Compute”则更偏向于指简单的数理运算，或者是由机器处理的、能够用规则式的流程去大规模计算的场景。它通常与计算机或电子设备的使用紧密相关，强调利用技术手段进行计算。

此外，“Calculate”和“Compute”在词源上也有所不同。“Calculate”源自拉丁语，而“Compute”则源自法语。这可能也反映了它们在用法和语境上的一些差异。

“Calculate”和“Compute”这两个英文单词在表示“计算”时，主要有以下几方面的区别：

词性不同：“Compute”既可以作动词也可以作名词，而“Calculate”则主要作动词使用。
侧重点不同：“Calculate”更侧重于指要求细致精确和复杂的计算，以解决疑难问题，多用于自然科学、生产部门或要求专门计算的场合。它可能涉及更为复杂的运算或预测，需要使用特定的方法或公式。相对地，“Compute”则更偏向于简单的数理运算，或者用于描述可以由机器处理、能够用规则式流程去大规模计算的场景。它经常与计算机或电子设备的使用紧密相关，强调利用技术手段进行计算。
使用语境不同：“Calculate”在某些情况下可以表示“估算”，含有一定的预测或推测成分，而“Compute”则更倾向于表示一种程式化、规则化的计算过程。因此，“Calculate”可能更常用于需要人类思考和分析的复杂计算场景，而“Compute”则更适用于可以由机器自动完成的计算任务。

Calculate与Compute的区别是什么

在英文中，calculate和compute都有“计算”的意思，calculator是“计算器”，而computer是“计算机”，二者非常相似。但是，你是否知道它们的“计算”是有区别的呢？又如何正确使用它们呢？

Calculate与Compute的定义

了解一个英语单词，首先要看它在词典中的定义。我们来看一下calculate和compute在剑桥词典中的定义是什么：

| Calculate: to judge the number or amount of something by using the information that you already have, and adding, taking away, multiplying, or dividing numbers.

| Compute: to calculate an answer or amount by using a machine.

从上面的定义来看，calculate和compute都是计算某个事物的数量、总量，不过从方法来看，calculate没有限定是用什么方法，但compute往往是用机器得到结果。但是在方法这个层面也不是一定的，所以在大多数情况下，二者都可以互换。

比如，下面的几个例子中calculate和compute可以互换：

| Compute/Calculate the ratio of the object's height to its weight. 计算一下物体的长宽比

| We tried to calculate/compute how fast he was moving when the car crashed. 我们努力计算当汽车撞车时他移动得多快。

| The government uses the household survey to calculate/compute the monthly unemployment rate. 政府利用家庭调查来计算每月的失业率。

从上面的例子可以看到，涉及一般的、简单的数学运算时，二者是完全等价的。所以说在数学论文、计算机论文上，我们一般可以看到二者是混用的。

Calculate与Compute的区别

尽管大多数情况下二者等价，但也有一些比较特殊的场景是尤其要注意区分的，这主要体现在它们的侧重点不同。calculate更偏向于不能用规则描述、计算，涉及较为复杂的人类思考的场景；而compute更偏向可以由机器处理的，能够用规则式的流程去大规模计算的场景。

比如，下面的例子calculate和compute一般就不能互换：

在这个意义上，calculate更像是“估算”，而compute就是程式化的计算，这是二者最大的不同。或者说，calculate侧重人的分析，而compute侧重机器的运算。

在这里插入图片描述

`calculator`是“计算器”，而`computer`是“计算机”

在英语中，“calculator”和“computer”的区别主要体现在功能和复杂性上。

“calculator”指的是计算器，它是一种用于进行数学运算的电子设备。计算器通常具有基本的加减乘除等功能，有些高级的计算器还可以进行更复杂的数学和科学计算。但它的功能相对较为有限，主要用于执行特定的计算任务。

而“computer”则指的是计算机，它是一种功能更为强大和复杂的电子设备。计算机不仅可以进行各种数学运算，还可以处理各种类型的数据，运行各种软件应用程序，存储和检索信息，以及与其他计算机进行网络通信等。计算机具有更广泛的功能和用途，可以满足人们在各种领域的需求。

此外，从词源上来看，“calculator”源自拉丁语，而“computer”则是在英语中创造的词。这也反映了两者在功能和用途上的不同。

总的来说，“calculator”和“computer”在功能和复杂性上存在明显的区别。计算器主要用于执行数学运算，而计算机则具有更广泛的功能和用途，可以满足人们在各种领域的需求。

calculate相关

“calculate”是一个英语动词，其基本含义是进行数学计算或估算。它通常用于描述对数值、数据或结果进行慎重、准确的运算或预测。除了基本的计算意义外，“calculate”还可以表示计划、打算或预测未来的事件或趋势。

与“calculate”相关的词汇包括“calculation”（计算、估算）、“calculator”（计算器）以及“computed”（计算得到的）。此外，“calculate”也常与其他词汇搭配使用，如“calculate the cost”（计算成本）、“calculate the probability”（计算概率）等。

在计算机科学领域，“calculate”也常用于描述计算机程序中的计算操作。例如，在编程语言中，可以使用各种函数和算法来进行计算，并将结果存储在变量中。这些计算可能涉及简单的数学运算，也可能涉及更复杂的统计分析、模拟预测等。

此外，“calculate”还可以与其他词缀组合形成新的词汇，如“calculable”（可计算的）、“calculative”（计算的、精明的）等。这些派生词在特定的语境中可能具有不同的含义和用法。

css的calc()

在css中, calculate的简写calc是一个函数calc()
用法如:

 width: calc(100% - 80px);

可参考 calc() - https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

css3的calc()

css3的calc()

基本语法

示例

注意事项

语法

示例

注意点

基本语法

示例

注意事项

英文单词-计算:Calculate与Compute的区别是什么

calculator是“计算器”，而computer是“计算机”

calculate相关

css的calc()

compute相关

`calculator`是“计算器”，而`computer`是“计算机”