CSS Calc Function

The calc() function is a powerful tool that allows you to perform mathematical operations within CSS values. It supports addition, subtraction, multiplication, and division.

Here's an example of using the calc() function to calculate the font size of an element based on the viewport width:

      font-size: calc(16px + 2  (100vw - 400px) / 40);
    

This code calculates the font size based on the viewport width. The font size will be 16px for viewports up to 400px wide, and will increase by 2px for each additional 40px of viewport width.

Here's an example of using the calc() function to calculate the width of an element:

      width: calc(50% + 10px);
    

This code calculates the width of the element to be 50% of the parent element's width, plus 10px.

CSS Min Function

The min() function returns the smallest value in a list of expressions. Here's an example:

      width: min(100px, 230px, 20px);
    

In this example, the width property will be set to 20px, which is the smallest value in the list.

CSS Max Function

The max() function returns the largest value in a list of expressions. Here's an example:

      width: max(100px, 230px, 20px);
    

In this example, the width property will be set to 230px, which is the largest value in the list.

CSS Clamp Function

The clamp() function returns a value that is within a specified range. Here's an example:

      width: clamp(200px, 50px, 600px);
    

In this example, the width property will be set to 200px if the viewport width is less than 200px, 50px if the viewport width is between 200px and 600px, and 600px if the viewportwidth is greater than 600px.

css样式变形如何实现?常用的变形函数有？

变形-旋转 ratate()函数

通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这

个值为负值，元素相对原点中心逆时针旋转。

transform:rotate(-20deg) 如下图：

css3中的calc是不是可以用于表示除不尽的数

学习calc()之前，我们有必要先知道calc()是什么？只有知道了他是个什么东东？在实际运用中更好的使用他。

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

calc()能做什么？

calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。

calc()语法

calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：