css calc函数用法_calc（）函数以及CSS中的示例

最新推荐文章于 2024-06-25 17:44:25 发布

「已注销」

最新推荐文章于 2024-06-25 17:44:25 发布

阅读量974

点赞数

文章标签： python 人工智能 css js java ViewUI

原文链接：https://www.includehelp.com/code-snippets/calc-function-with-example-in-css.aspx

版权

css calc函数用法

Introduction:

介绍：

Dealing and appending functions to our HTML/CSS code has become a daily feat but not everyone is a pro when it comes to developing websites or web pages. Therefore, one must never stop learning and keep looking for sources from where you can acquire new knowledge.

在我们HTML / CSS代码中处理和附加功能已成为日常工作，但在开发网站或网页时并不是每个人都是专家。因此，一个人必须永远停止学习，并继续寻找可以从中获得新知识的资源。

Same is the case with functions, there are numerous functions out there for HTML/CSS which you can use while developing a website or web pages. If you are thinking that you can’t happen to know all the functions, well that is only correct because no one can know all the functions as new functions are being developed as time passes by. So, keep learning about new functions and properties that would prove to be very helpful when you start developing websites or web pages. Now, let us move forward and talk about one very specific function known as calc() Function.

函数也是如此，有许多HTML / CSS函数，您可以在开发网站或网页时使用它们。如果您认为不可能碰巧知道所有功能，那是正确的，因为随着时间的流逝，随着新功能的开发，没人会知道所有功能。因此，请继续学习有关新功能和属性的知识，这些功能和属性在您开始开发网站或网页时将非常有用。现在，让我们继续讨论一个非常具体的函数，称为calc()函数。

Definition and usage:

定义和用法：

Well, first and foremost let us have a look at the definition of this function.

好吧，首先让我们看看这个函数的定义。

As the name suggests, this function is used for calculation when appended in your CSS code, this function helps in performing calculation as a property. The calc() function allows mathematical expressions with +,-,* and /. Well as easy as the definition sounds, so is the implementation of this function. For a better understanding of this function, why don’t we have a look at the syntax of this function:

顾名思义，此函数在添加到CSS代码中时用于计算，该函数有助于将计算作为属性执行。 calc()函数允许使用+，-，*和/的数学表达式。 定义听起来很容易，此功能的实现也是如此。为了更好地了解此功能，为什么不看一下此功能的语法：

Syntax:

句法：

    element{
        width : calc(length %-length px);
    }

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        img {
            position: relative;
            width: calc(80% - 80px);
            padding: 30px;
        }
    </style>
</head>

<body>
    <img src="img_forest.jpg" width="240" height="184" />
</body>

</html>

Output

输出量

After resizing the screen size:

调整屏幕大小后：

In the above example, calc() function is applied to the width of the image.

在上面的示例中， calc()函数应用于图像的宽度。

As you can see from the syntax the implementation is quite easy and not much line of codes are required when appending this property. Functions like these prove to be very useful when we want to avoid long lines of codes that in turn helps in code optimization. The code does not take many lines which makes it easier for a third person to understand your code. You should make use of such functions as it is a very good practice and it also shows how much knowledge you have regarding web development and how well you can implement it. A good developer is one who makes use of all the available knowledge and that knowledge is reflected in his/her project.

从语法中可以看到，实现非常简单，并且追加此属性时不需要太多代码。当我们想要避免冗长的代码行进而有助于代码优化时，此类函数非常有用。该代码不需要很多行，这使第三方更容易理解您的代码。您应该利用这些功能，因为这是一种很好的做法，它还显示了您对Web开发有多少了解以及如何很好地实现。优秀的开发人员是指利用所有可用的知识，并且知识会反映在他/她的项目中。

Conclusion:

结论：

So, why wait? Go ahead and start using your new learned function and don't hesitate to try it with new values so that you can get to understand this function much more clearly and you will be able to imply this function to your code with ease. Never stop learning new values, properties, and functions if you want to be a good professional developer.

那么，为什么要等待呢？继续并开始使用新学习的函数，不要犹豫，尝试使用新值，这样您就可以更清楚地了解此函数，并且可以轻松地将此函数隐含到代码中。如果您想成为一名优秀的专业开发人员，请不要停止学习新的价值，属性和功能。

If you need a helping hand, our team of skilled developers is always there to help you at https://ask.includehelp.com/.

如果您需要帮助，我们经验丰富的开发人员团队将随时在https://ask.includehelp.com/上为您提供帮助。