超碰人人人人人,色婷婷综合久久久久中文一区二区,国产-第1页-浮力影院,欧美老妇另类久久久久久

數(shù)學(xué)函數(shù)可以用來做什么？

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

靈活運用 CSS 中的數(shù)學(xué)函數(shù)，可以拋棄很多原本需要 JS 才能實現(xiàn)的布局場景。

calc()

最基礎(chǔ)的四則運算函數(shù)，對頭，就是用來做小學(xué)就學(xué)過的加、減、乘、除。

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

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

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

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

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

注意：

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

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

乘法中：乘號（*）兩邊必須有一個數(shù)字。原因：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) {
  /* 復(fù)雜的四則運算 */
  width: calc((((40vw + 20px) * 3) - 500px) / 5);
}
</style>

效果：

min()

min() 用于獲取一組數(shù)值中的最小值。通常用于比較不同單位之間的最小值，比如 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() 用于獲取一組數(shù)值中的最大值。與 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()

此函數(shù)是 min() 和 max() 的結(jié)合體，可以同時指定最小值和最大值以及限定值，使用方式：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，直接應(yīng)用了 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>

效果：

一個組合應(yīng)用例子

<div class="box">
  <div class="child">組合應(yīng)用</div>
  <div class="child">組合應(yīng)用</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 函數(shù)可以嵌套 min、calc、max 函數(shù)，calc 函數(shù)也可以可以嵌套使用 min 函數(shù)，max 函數(shù)也可以使用 calc 的計算結(jié)果。

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

效果：

其他數(shù)學(xué)函數(shù)

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

階躍值函數(shù)

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

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

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

三角函數(shù)

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

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

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

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

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

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

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

指數(shù)函數(shù)

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

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

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

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

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

符號函數(shù)

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

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

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

寫在最后

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

?轉(zhuǎn)自https://www.cnblogs.com/linx/p/18863718