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的简写, compute也是计算, getComputedStyle(element) 获取样式的方法
clac():计算CSS(加减乘除各种高宽等) ;calculator:计算器getComputedStyle():计算元素的CSS,style ,computer:计算机
MDN calc() https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
calc()
|
Chrome 26
|
Edge 12
|
Firefox 16
|
Opera 15
|
Safari 7
|
Chrome Android 28
|
Firefox for Android 16
|
Opera Android 14
|
Safari on iOS 7
|
Samsung Internet 1.5
|
WebView Android 37
|
|
Gradient color stops support
|
Chrome 19
|
Edge 12
|
Firefox 19
|
Opera 15
|
Safari 6
|
Chrome Android 28
|
Firefox for Android 19
|
Opera Android 15
|
Safari on iOS 6
|
Samsung Internet 1.5
|
WebView Android 37
|
|
Nested calc() support
|
Chrome 51
|
Edge 16
|
Firefox 48
|
Opera 38
|
Safari 11
|
Chrome Android 51
|
Firefox for Android 48
|
Opera Android 41
|
Safari on iOS 11
|
Samsung Internet 5.0
|
WebView Android 51
|
|
Chrome 31
|
Edge 12
|
Firefox 48
|
Opera 18
|
Safari 6
|
Chrome Android 31
|
Firefox for Android 48
|
Opera Android 18
|
Safari on iOS 6
|
Samsung Internet 2.0
|
WebView Android 4.4.3
|
CSS3中的跨单位运算函数 calc()
calc()是英文单词calculate(计算)的缩写
是css3的一个新增的功能，calculate函数可跨单位进行加减乘除计算，例如百分比和像素。还可以使用小括号建立运算顺序
它可以用在如下场合：
要注意的是：
1.乘法，乘数中至少要有一个是
2.除法，除数（/右面的数）必须是
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