Question

在css calc()函数中，100%引用了什么以及JavaScript中的等效代码是什么？

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

JSFiddle：https://jsfiddle.net/xoufnm6v/

Answer 1

什么是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);"

Answer 2

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

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

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

Answer 3

100％指的是父元素宽度的100％。此计算为当前元素提供比其父元素窄100像素的宽度。

应该注意support for calc is somewhat limited，如果您需要跨浏览器实现，通常不应该依赖它。

Answer 4

100％与宽度属性有关。

width属性设置元素的宽度。

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

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

http://www.w3schools.com/cssref/pr_dim_width.asp

Answer 5

calc()是一种原生的CSS方式，可以在CSS中进行简单的数学运算，作为任何长度值（或几乎任何数值）的替代。它有四个简单的数学运算符：add（+），subtract（ - ），multiply（*）和divide（/）。能够在代码中进行数学运算是很好的，并且是一种相当重要的语言的受欢迎的补充。

但它有用吗？我过去一直在努力想到明显有用的案例。肯定有一些。

这是一个基本的例子。

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等。以上示例您可以在JavaScript中完成，但calc（）将有助于计算CSS中的值。

有关详细信息，请访问谷歌或请参阅https://css-tricks.com/a-couple-of-use-cases-for-calc/

什么是钙功能的100％

5 个答案: