日本xxxx18视频在线观看-日本xxxx1819-日本xxxwww在线观看-日本xxx-日本xx-日本www在线视频

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

CSS 中的數學函數
freeflydom
2025年5月8日 8:44 本文熱度 93

數學函數可以用來做什么？

最基礎的當然是用來進行四則運算了，再進一步可以用來平方，對數，冪，絕對值，取余等，當然還可以用來計算三角函數。

靈活運用 CSS 中的數學函數，可以拋棄很多原本需要 JS 才能實現的布局場景。

calc()

最基礎的四則運算函數，對頭，就是用來做小學就學過的加、減、乘、除。

比如有這么一個需求：子元素占用寬度是父元素的一半多20像素！

這個需求，如果用常規的布局思路來看，父元素如果寬度固定 200px，還能簡單的算出來，子元素寬度是 120px。

但如果父元素的寬度不固定呢？還能計算出來嗎？如果沒有 calc 函數，那么唯一的辦法就只有拿出 40 米的 JS 大刀了~。

使用 calc 函數，就可以輕松解決這個問題：

.box {
  width: 100%;
}
.box .child {
  width: calc(50% + 20px);
}

注意：

加法(+)、減法(-) 運算符左右兩邊必須要有空格！原因是如果沒有空格字符串，-20px 是表示的負數，而不是減法。

除法中：除數（除號 / 右面的數）必須是一個數字（如：1，1.1，+2，-2.3，1e4），不能是帶有單位的值（如：2px，50%，3vw，2em）。與以前學過的除法一樣，0 不能作為除數！

乘法中：乘號（*）兩邊必須有一個數字。原因：calc(20px * 20px) 表示的像素平方，在瀏覽器中無法解析這種值！！

calc() 的各種使用方式：

<div class="box">
  <div class="child">calc(50% + 20px)</div>
  <div class="child">calc(12 * 20px)</div>
  <div class="child">calc(100% / 3)</div>
  <div class="child">calc(10em + 40px)</div>
  <div class="child">calc(var(--child-width) + 40px - 20px)</div>
  <div class="child">calc((((40vw + 20px) * 3) - 500px) / 5)</div>
</div>
<style>
.box {
  margin: 20px 0;
  width: 400px;
  border: var(--base-border, 2px solid rgba(255, 71, 87,0.3));
}
.box .child {
  margin: 10px;
  border: 1px solid #ffa947;
  padding: 10px;
}
.box .child:nth-of-type(1) {
  /* 加法 */
  width: calc(50% + 20px);
}
.box .child:nth-of-type(2) {
  /* 乘法 */
  width: calc(12 * 20px);
}
.box .child:nth-of-type(3) {
  /* 除法 */
  width: calc(100% / 3);
}
.box .child:nth-of-type(4) {
  /* 不同的單位加法 */
  width: calc(10em + 40px);
}
.box .child:nth-of-type(5) {
  /* 使用 CSS 變量 */
  --child-width: 16vw;
  width: calc(var(--child-width) + 40px - 20px);
}
.box .child:nth-of-type(6) {
  /* 復雜的四則運算 */
  width: calc((((40vw + 20px) * 3) - 500px) / 5);
}
</style>

效果：

min()

min() 用于獲取一組數值中的最小值。通常用于比較不同單位之間的最小值，比如 min(400px, 50%, 20em, 10vw)

使用示例：

<div class="box">
  <div class="child">min(230px, 220px)</div>
  <div class="child">min(50%, 220px)</div>
  <div class="child">min(20vw, 20em, 1000px)</div>
  <div class="child">min(var(--child-width), 100em, calc(100% * 0.85))</div>
</div>
<style>
.box {
  margin: 20px 0;
  width: 400px;
  border: var(--base-border, 2px solid rgba(255, 71, 87,0.3));
}
.box .child {
  margin: 10px;
  border: 1px solid #ffa947;
  padding: 10px;
}
.box .child:nth-of-type(1) {
  /* 相同單位比較 */
  width: min(230px, 220px);
}
.box .child:nth-of-type(2) {
  /* 不同單位比較 */
  width: min(50%, 220px);
}
.box .child:nth-of-type(3) {
  /* 多個不同單位比較 */
  width: min(20vw, 20em, 1000px);
}
.box .child:nth-of-type(4) {
  /* 使用 var 和 calc */
  --child-width: 26vw;
  width: min(var(--child-width), 100em, calc(100% * 0.85));
}
</style>

效果：

max()

max() 用于獲取一組數值中的最大值。與 min() 類似，作用相反取最大值，比如 max(400px, 50%, 20em, 10vw)

使用示例：

<div class="box">
  <div class="child">max(230px, 220px)</div>
  <div class="child">max(50%, 220px)</div>
  <div class="child">max(20vw, 20em, 300px)</div>
  <div class="child">max(var(--child-width), 6em, calc(100% * 0.9))</div>
</div>
<style>
.box {
  margin: 20px 0;
  width: 400px;
  border: var(--base-border, 2px solid rgba(255, 71, 87,0.3));
}
.box .child {
  margin: 10px;
  border: 1px solid #ffa947;
  padding: 10px;
}
.box .child:nth-of-type(1) {
  /* 相同單位比較 */
  width: max(230px, 220px);
}
.box .child:nth-of-type(2) {
  /* 不同單位比較 */
  width: max(50%, 220px);
}
.box .child:nth-of-type(3) {
  /* 多個不同單位比較 */
  width: max(20vw, 20em, 300px);
}
.box .child:nth-of-type(4) {
  /* 使用 var 和 calc */
  --child-width: 6vw;
  width: max(var(--child-width), 6em, calc(100% * 0.9));
}
</style>

效果：

clamp()

此函數是 min() 和 max() 的結合體，可以同時指定最小值和最大值以及限定值，使用方式：clamp(min, value, max)。

比如 clamp(400px, 50%, 20em) 表示如果 50% 小于 400px，則取 400px，如果 50% 大于 20em，則取 20em，否則取 50%。

使用示例：

<div class="box">
  <div class="child">clamp(180px, 50%, 100px)</div>
  <div class="child">clamp(100px, 60%, 320px)</div>
  <div class="child">clamp(20vw, 20em, 300px)</div>
  <div class="child">clamp(var(--child-width), 20em, calc(100% * 0.9))</div>
</div>
<style>
.box {
  margin: 20px 0;
  width: 400px;
  border: var(--base-border, 2px solid rgba(255, 71, 87,0.3));
  resize: both;
  overflow: auto;
}
.box .child {
  margin: 10px;
  border: 1px solid #ffa947;
  padding: 10px;
}
.box .child:nth-of-type(1) {
  /* 最小值180px 大于了 最大值 100px，直接應用了 180px */
  width: clamp(180px, 50%, 100px);
}
.box .child:nth-of-type(2) {
  /* 子元素大小必在 100px ~ 320px 之間 */
  width: clamp(100px, 60%, 320px);
}
.box .child:nth-of-type(3) {
  /* 子元素大小必在 10% ~ 90% 之間 */
  width: clamp(10%, 20em, 90%);
}
.box .child:nth-of-type(4) {
  /* 也可使用 var 和 calc */
  --child-width: 6vw;
  width: clamp(var(--child-width), 20em, calc(100% * 0.9));
}
</style>

效果：

一個組合應用例子

<div class="box">
  <div class="child">組合應用</div>
  <div class="child">組合應用</div>
</div>
<style>
.box {
  margin: 20px 0;
  width: 400px;
  border: var(--base-border, 2px solid rgba(255, 71, 87,0.3));
  resize: both;
  overflow: auto;
}
.box .child {
  margin: 10px;
  border: 1px solid #ffa947;
  padding: 10px;
}
.box .child:nth-of-type(1) {
  --base-width: 10%;
  width: clamp(min(20px, 10rem), calc(var(--base-width) * 6), max(100%, 100vw));
}
.box .child:nth-of-type(2) {
  --base-width: 10%;
  width: clamp(min(20px, var(--base-width)), calc(min(var(--base-width) * 4, 300px)), max(calc(var(--base-width) * 9), 100vw));
}
</style>

可以看到上面例子中，clamp 函數可以嵌套 min、calc、max 函數，calc 函數也可以可以嵌套使用 min 函數，max 函數也可以使用 calc 的計算結果。

套娃一樣的用法，可以組合出各種復雜的運算場景！！

效果：

其他數學函數

對于 CSS 布局而言，四個基本的數學函數已經完全足夠了，但在一些 3D 和動畫場景中，您可能會用到一些其他數學運算函數，目前 CSS 支持的數學運算函數如下：

階躍值函數

round() 實驗性 根據舍入策略計算一個舍入的數字。

mod() 實驗性 計算一個數除以另一個數的模（與除數的符號相同）。

rem() 實驗性 計算一個數字除以另一個數字的余數（與被除數的符號相同）。

三角函數

sin() 計算一個數的三角函數正弦值。

cos() 計算一個數的三角函數余弦值。

tan() 計算一個數的三角函數正切值。

asin() 計算一個數的三角函數反正弦值。

acos() 計算一個數的三角函數反余弦值。

atan() 計算一個數的三角函數反正切值。

atan2() 計算平面內兩個數字的三角函數反正切值。

指數函數

pow() 計算基數的冪次方值。

sqrt() 計算一個數的平方根。

hypot() 計算其參數平方之和的平方根。

log() 計算一個數的對數值。

exp() 計算一個數的 e 次方值。

符號函數

abs() 實驗性 計算一個數的絕對值。

sign() 實驗性 計算一個數的符號值（正值或負值）。

對于高級運算函數有興趣可以參閱 MDN 文檔：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions

寫在最后

在響應式布局中，靈活運用數學函數，可以簡化很多不必要的代碼，也許您都可以放棄部分非必要的 媒體查詢 代碼。

?轉自https://www.cnblogs.com/linx/p/18863718


該文章在 2025/5/8 8:44:55 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved

主站蜘蛛池模板： 精品国产人成在线 | 亚洲视频一区二区 | 欧美自拍偷拍一区二区三区 | 3男s调| 欧美亚洲一区二区三区 | 日韩欧美成末人一区二 | 欧美私人情侣网站 | 国产精品福利在线观看免费不 | 国产视频在线一二区精品分类 | 日产日韩在线亚洲欧 | 精品国产亚洲一区二区在线另类 | 成人www视频网站免费观看 | 欧美日韩综合aⅴ图片 | 国产日韩a在线观看免费视频 | 国产又爽又黄又爽又刺激 | 国产精华液和欧美的精华液 | 国产乱人免费视频 | 欧美日韩在线成综合 | 国产黄大 | 欧美黑人又大又粗xxxⅹ | 国产精品对白刺激音频在线观看 | 717午夜伦 | 91平台| 日韩在线视频网址 | 国产午夜福利在线观看红一片 | 国产亚洲欧美日韩综合在线 | 国产中文字幕玖玖 | 日韩国产一区二区三区在线 | 国产精品人成在线观看 | 日韩视频观看一区二区 | 国产一区人妖综合 | 精品国产一区二区三区免费 | 欧美激情区一区二 | 国产仑乱老女人露脸的 | 97国产精华最好的产品亚洲 | 精品视频app | 37pao国产成视频 | 欧美性猛交xxxx黑人猛交 | 国产韩国日本欧美在线观看 | 国产又粗又大又硬又爽91传 | 欧美日韩动漫亚洲 |