跳转到帖子
在手机APP中查看

一个更好的浏览方法。了解更多。
OKCCN - XenForo & IPS Plugin Marketplace

主屏幕上的全屏APP，带有推送通知、徽章等。

在iOS和iPadOS上安装此APP
  1. 在Safari中轻敲分享图标
  2. 滚动菜单并轻敲添加到主屏幕。
  3. 轻敲右上角的添加按钮。
在安卓上安装此APP
  1. 轻敲浏览器右上角的三个点菜单 (⋮) 。
  2. 轻敲添加到主屏幕或安装APP。
  3. 轻敲安装进行确认。
  • 选择语言

CSS Math Functions

Cavalry
在 教程

推荐的帖子

  • 行政经理

CSS Math Functions

CSS Math Functions

CSS math functions allow mathematical expressions to be used as property values.

In this chapter, we will explain the following math functions:

  • calc()
  • max()
  • min()
  • clamp()

The CSS calc() Function

The calc() function performs a mathematical calculation that will be used as the property value.

The calc() function supports addition (+), subtraction (-), multiplication (*), and division (/), and can combine different units, like pixels and percentages.

CSS Syntax

calc(expression)
Value Description
expression Required. A mathematical expression. The result will be used as the value

Let us look at an example:

Example

Use calc() to calculate the width and the height of a <div> element:

#div1 {
  margin: auto;
  width: calc(100% - 100px);
  height: calc(30vh + 50px);
  border: 1px solid black;
  padding: 10px;
}
Try it Yourself »

The CSS max() Function

The max() function takes a comma-separated list of values, and uses the largest value from the list as the property value.

CSS Syntax

max(value1, value2, ...)
Value Description
value1, value2, ... Required. A list of comma-separated values

Let us look at an example:

Example

Use max() to set the width of #div1 to whichever value is largest, 50% or 300px:

#div1 {
  height: 100px;
  width: max(50%, 300px);
  border: 1px solid black;
  padding: 10px;
}
Try it Yourself »

The CSS min() Function

The min() function takes a comma-separated list of values, and uses the smallest value from the list as the property value.

CSS Syntax

min(value1, value2, ...)
Value Description
value1, value2, ... Required. A list of comma-separated values

Let us look at an example:

Example

Use min() to set the width of #div1 to whichever value is smallest, 50% or 300px:

#div1 {
  height: 100px;
  width: min(50%, 300px);
  border: 1px solid black;
  padding: 10px;
}
Try it Yourself »

The CSS clamp() Function

The clamp() function is used to set a value that will adjust responsively between a minimum value and a maximum value depending on the size of the viewport.

The clamp() function has three parameters: a minimum value, a preferred value, and a maximum value. If the preferred value is smaller than the minimum value or larger than the maximum value, the preferred value is used.

CSS Syntax

clamp(min, preferred, max)
Value Description
min Optional. Specifies the smallest allowed value
preferred Required. Specifies the preferred value
max Optional. Specifies the largest allowed value

Let us look at an example:

Example

Set the <h2> element's minimum font-size to 2rem, and the maximum font-size to 3.5rem. Also, set the <p> element's minimum font-size to 1rem, and the maximum font-size to 2.5rem:

h2 {
  font-size: clamp(2rem, 2.5vw, 3.5rem);
}

p {
  font-size: clamp(1rem, 2.5vw, 2.5rem);
}
Try it Yourself »

CSS Functions Reference

For a complete list of all CSS functions, visit our CSS Functions Reference.


  • 引用

    • 参与讨论

    你可立刻发布并稍后注册。 如果你有帐户，立刻登录发布帖子。

    游客
    回帖…
    转到主题列表

    帐户

    导航

    搜索

    搜索

    配置浏览器推送通知
    Chrome (安卓)
    1. 轻敲地址栏旁的锁形图标。
    2. 轻敲权限 → 通知。
    3. 调整你的偏好。
    Chrome (台式电脑)
    1. 点击地址栏中的挂锁图标。
    2. 选择网站设置。
    3. 找到通知选项并调整你的偏好。