什么是 100% 的计算函数答案

【问题标题】：What is 100% in calc function什么是 100% 的计算函数
【发布时间】：2016-05-20 14:36:31
【问题描述】：

在css calc() 函数中，100% 指的是什么，JavaScript 中的等效代码是什么？

#div1 {
   width: calc(100% - 100px);
}

【问题讨论】：

这100%就像你写的没有calc函数一样。
该页面上的示例似乎不太好 - 如果您将 width: calc(100% - 100px) 更改为 right: 50px 以实现与描述相同的效果，黄色框最终会变窄 - 即它们没有拿出一个完全准确的演示。
@JamesThorpe 实际上它是准确的。如果没有指定box-sizing，这里的width 是元素的inner 宽度——即排除了padding 和border 的宽度。 left 和 right 完全忽略 border 和 padding，因此当同时应用 left 和 right 时，元素会变大 12px（2 * 5px 填充 + 2* 1px 边框）
@JamesDonnelly 确实 - 但我的意思是准确的措辞。没有“div的两边和窗口的边缘之间有50px的间隙”
感谢大家的快速解答

【解决方案1】：

100% 指的是父元素宽度的 100%。此计算使当前元素的宽度比其父元素窄 100 像素。

【讨论】：

【解决方案2】：

100% 与 width 属性有关。

width 属性设置元素的宽度。

注意：width 属性不包括内边距、边框或边距；它设置元素的内边距、边框和边距内区域的宽度！

% 运算符将宽度定义为包含块的百分比。因此，在示例中，100% 是页面主体的 100%，减去 div 的填充、边框和边距的宽度。然后计算从中再减去 100px。

【讨论】：

【解决方案3】：

100% 是指包含元素宽度的百分比。因此，100% 意味着与容器的宽度相同。

在引用的示例中，<body> 是包含元素，因此 100% 指的是<body> 的宽度。从 calc() 中减去 100 个像素以达到渲染大小。

计算出的宽度响应于包含元素宽度的变化；如果您调整页面大小，您将看到 <div> 做出相应响应。

【讨论】：

【解决方案4】：

100% 是什么意思

它是父级宽度的百分比。在这种情况下，它指的是父元素的 100% 宽度。

javascript中的等价物是什么

假设您的意思是 100%-75 将在 javascript/jquery 中实现

$(window).on("resize",function(){
   $('#element').css("width", ( $('#element').parent().width()-75 ) + "px");
});

或者只是这个

$('#element').css("width","calc(100% - 75px)");

简单的javascript等价物

element.style.cssText = "width: calc(100% - 75px);"

【讨论】：

【解决方案5】：

calc() 是一种原生 CSS 方式，可以在 CSS 中直接进行简单的数学运算，以替代任何长度值（或几乎任何数值）。它有四个简单的数学运算符：加 (+)、减 (-)、乘 (*) 和除 (/)。能够在代码中进行数学运算非常好，并且是对数量相当多的语言的一个受欢迎的补充。

但它有用吗？过去，我一直在努力思考明显有用的案例。不过肯定有一些。

这是一个基本的例子。

div{
  background: green;
  width: 70%;
}
span{
  width: calc(100% - 150px);
  background: red;
  display: block;
  color: white;
}

&lt;div&gt; &lt;span&gt;calc(100% - 150px) &lt;/span&gt;&lt;/div&gt;

当不能用其他值计算%时，如px、em、cm等。上面的例子你可以在JavaScript中完成，但是calc()将有助于计算CSS中的值.

欲了解更多信息，请在谷歌中查看或请参阅此处https://css-tricks.com/a-couple-of-use-cases-for-calc/

【讨论】：