calc函数中的100%是什么

Question

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

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

Answer 1

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

Answer 2

what is 100% means

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

what is the equivalent in 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);"

Answer 3

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

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

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

Answer 4

100% 与宽度有关属性。

宽度属性设置元素的宽度。

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

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

Answer 5

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

但是有用吗？过去，我曾绞尽脑汁想出明显有用的案例。不过肯定有一些。

这是一个基本示例。

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

<div> <span>calc(100% - 150px) </span></div>

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

中的值

What is 100% in calc function