CSS calc() 使用指南

你聽說過或使用過 CSS 的 calc() 函數(shù)嗎？也許你聽說過它，但從未嘗試過，或者嘗試過使用它，但在使用過程中遇到了一些問題。這篇指南可以幫助你。

CSS calc() 是一個很好的工具，可以幫助你優(yōu)化你的網(wǎng)頁。在本文中，我們將研究 CSS calc() 函數(shù)，為什么它很有用，以及如何在項目中使用它。

1. 什么是 CSS calc() 函數(shù)？

calc() 函數(shù)允許在指定 CSS 屬性值時執(zhí)行計算。它對于計算 length、 percentage、 time、 numbers、integers、frequencies 和 angles 等特別有用。


CSS calc() 函數(shù)的一個強大功能是能夠組合不同的單位。這個函數(shù)可以執(zhí)行預(yù)處理器不能執(zhí)行的數(shù)學計算。

CSS 中的預(yù)處理器只能組合具有固定關(guān)系的單位，如角度單位、時間單位、頻率單位、分辨率單位和特定長度單位。

現(xiàn)在讓我們看一下 CSS 的 calc() 語法：

calc( Expression)

calc() 函數(shù)接受一個表達式作為參數(shù)。然后將表達式的結(jié)果用作值。它可以采用任何形式并使用以下任何運算符，遵循標準運算符優(yōu)先規(guī)則。
calc() 函數(shù)使用了四個基本運算符:

• 加法 +：

calc(50px + 50px)

• 減法 -：

calc(100% - 30px)

• 除法 /：

calc(100% / 2)

• 乘法

calc(100vh * 2)

讓我們來看一些使用 CSS calc() 函數(shù)的基本示例。然后，我們將探討關(guān)于這個函數(shù)需要注意的一些事情，然后我們將深入研究一些更復(fù)雜的例子。

2. 使用 calc() 在 CSS 中進行單位轉(zhuǎn)換

使用 CSS calc() 函數(shù)，我們可以將一個沒有單位的值轉(zhuǎn)換為一個有單位的值，方法是將該值乘以要轉(zhuǎn)換的單位類型。這對 CSS 變量很有用，如下例所示：

.class {
  --fav-num: 3;
  width: calc(var(--fav-num) * 1px); // 3px
}

在本例中，我們將數(shù)字 3（它沒有附加單位）賦值為 CSS 變量 --fav-num。然后我們用它來得到一個新的寬度值，用一個單位乘以 1px 變成 3px。

3. 使用 calc() 轉(zhuǎn)換字體大小

假設(shè)有這樣一個場景，我們希望段落的字體在桌面屏幕上很大，但在移動屏幕上很小。當然，CSS 媒體查詢是可以的，但是 calc() 函數(shù)也可以，所以我們不需要使用媒體查詢。

讓我們看看它是如何實現(xiàn)的：

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(10px + 5vw);
}

這將允許我們的字體在移動視圖中變小，當我們增加屏幕大小或在桌面視圖中恢復(fù)正常。

請注意，如果你的字體大小對于桌面視圖來說已經(jīng)很小，則不應(yīng)該使用這種方法，在這種情況下，讓移動視圖的字體尺寸更小是沒有意義的。

4. 關(guān)于 CSS calc() 函數(shù)有幾點需要注意

現(xiàn)在讓我們看看在使用 CSS calc() 函數(shù)時需要注意的幾件事。

首先，在編寫 calc() 函數(shù)語法時，必須在每個操作之間包含空格，特別是在使用 + 和 - 操作符時，否則表達式將無效。考慮下面的例子：

calc(50% -4px)

上面的表達式無效，因為在運算符和長度之間沒有包含空格，使得長度顯示為負數(shù)。為了糾正這個表達式，我們需要這樣寫：

calc(50% - 4px)

注意，盡管 * 和 / 操作符不需要空格，但包含空格是允許的。因此，為了保持一致性，建議包含空格。

關(guān)于 CSS calc() 函數(shù)還有一些需要注意的地方：

• 當應(yīng)用于媒體查詢時，它不能工作
• 當除 0 時，HTML 解析器會生成一個錯誤
• 可以嵌套 calc() 函數(shù)

讓我們深入研究更多的例子。

5. 示例

5.1 使用 calc() 在 CSS 中調(diào)整位置和長度

為了理解如何使用 CSS calc() 函數(shù)調(diào)整位置和長度，讓我們首先制作一些卡片并將它們放入容器中。

你將需要以下的HTML：

<div class="container">
   <div class="card"><p>card 1</p></div>
   <div class="card"><p>card2</p></div>
   <div class="card"><p>card3</p></div>
   <div class="card"><p>card4</p></div>
   <div class="card"><p>card4</p></div>
</div>

你的 CSS 代碼應(yīng)該如下所示：

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.container{
  position: relative;
  display: flex;
  width: 1000px;
  height: 200px;
  background:#ccc
}
 .card{
  position: relative; 
  min-width: 200px;
  height: 200px;
  background:#FF0000;
  margin: 10px 10px 10px 10px;
  color: white;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

結(jié)果如下：

你注意到我們的紅卡片和灰色容器是不對齊的嗎？現(xiàn)在讓我們引入 CSS calc() 函數(shù)，在我們的卡片的 min-width 和 height 上使用它：

min-width: calc(calc(100% / 5) - 20px);
height: calc(100% - 20px);

對于 min-width，我們在一個 calc() 函數(shù)中嵌套了一個 calc() 函數(shù)。嵌套的 CSS 函數(shù)用于將屏幕的全寬度（100%）除以 5，然后將結(jié)果減去 20px，以得到我們的最小寬度的最終值。

對于我們的高度，我們從 100% 的高度減去頂部和底部 margin 的總值（20px），結(jié)果是一個完美對齊的方框。

結(jié)果如下：

正如你所看到的，紅色卡片現(xiàn)在完美地放置在我們的容器中。

5.2 使用 calc() 函數(shù)和 CSS 變量

使用帶有 CSS 變量的 calc()，我們可以定義一個值一次，并使用數(shù)學方法修改它，以便獲得一個對我們有用的新值。讓我們看一個例子。

假設(shè)我們有兩個按鈕，每個按鈕都有自己的類，像這樣：

<div class="container">
  <button class="success">button 1</button> 
  <button class="danger">button2</button>
</div>

我們可以使用 CSS 變量定義一種顏色，然后使用 CSS calc() 函數(shù)派生另一種顏色。讓我們?yōu)榘粹o創(chuàng)建一個顏色變量。我們將使用 hsl 表示，它接受變量（色調(diào)，飽和度，亮度）來指定顏色值：

:root{
  --hue:180;
}
.success{
	background-color: hsl(calc(var(--hue)), 100%, 50%);
}
.danger{
  background-color: hsl(calc(var(--hue) - 180), 100%, 50%);
}

結(jié)果如下：

通過給根色調(diào)指定一個特定的值，你可以看到我們可以使用 hsl 表示法中的 calc() 函數(shù)為第二個按鈕派生另一種顏色。如果更改根色調(diào)的值，則為第二個按鈕派生出另一種顏色。

5.3 CSS calc() 應(yīng)用于動畫

當然，我們可以使用 CSS calc() 函數(shù)來制作動畫。

讓我們創(chuàng)建一個示例，從以下 HTML 開始：

<section>
  <div class="animate-loading">
    <div class="block" style="--i: 1"></div>
    <div class="block" style="--i: 2"></div>
    <div class="block" style="--i: 3"></div>
    <div class="block" style="--i: 4"></div>
    <div class="block" style="--i: 5"></div>
    <div class="block" style="--i: 6"></div>
    <div class="block" style="--i: 7"></div>
    <div class="block" style="--i: 8"></div>
    <div class="block" style="--i: 9"></div>
    <div class="block" style="--i: 10"></div>
    <div class="block" style="--i: 11"></div>
    <div class="block" style="--i: 12"></div>
    <div class="block" style="--i: 13"></div>
    <div class="block" style="--i: 14"></div>
    <div class="block" style="--i: 15"></div>
    <div class="block" style="--i: 16"></div>
    <div class="block" style="--i: 17"></div>
    <div class="block" style="--i: 18"></div>
    <div class="block" style="--i: 19"></div>
    <div class="block" style="--i: 20"></div>
  </div>
</section>

我們的 CSS 應(yīng)該是這樣的：

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Courier New', Courier, monospace;
}
section{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #001d10;
}
.animate-loading{
   position: relative;
   width: 250px;
   height: 250px;
}
.animate-loading .block{
  position: absolute;
  width: 8px;
  height: 25px;
  background: #050c09;
  left: 50%;
  border-radius: 8px;
  transform: rotate(calc(18deg * var(--i)));
  transform-origin: 0 125px ;
  animation: animate 1.9s ease-in-out infinite;
  animation-delay: calc(0.05s * var(--i));
}
@keyframes animate {
  0%,50%{
     background: #050c09;
     box-shadow: none;
  }
  50.1%,100%{
    background: #38d2dd;
    box-shadow: 0 0 5px #38d2dd,
                0 0 15px #38d2dd,
                0 0 30px #38d2dd,
                0 0 60px #38d2dd,
                0 0 90px #38d2dd;

  }
}

結(jié)果如下：

正如我們在代碼中看到的，CSS calc() 函數(shù)在兩個方面派上了用場：旋轉(zhuǎn)動畫和動畫延遲。讓我們仔細看看這兩個部分。

transform: rotate(calc(18deg * var(--i)));

18deg 的值來自 360 度除以我們在 HTML 中創(chuàng)建的塊數(shù)。然后我們通過用 18deg 乘以變量的值得到變換的旋轉(zhuǎn)值。

animation-delay: calc(0.05s * var(--i));

我們還在 animation-delay 中使用了 CSS calc() 函數(shù)，將 0.05s 乘以變量。這是用來指定動畫開始前的延遲時間。

6. CSS calc() 的瀏覽器兼容性

雖然 calc() 在 CSS 中是一個有用的函數(shù)，但它只有在與我們的瀏覽器兼容時才有用?？纯聪旅娴膱D表，看看這個功能的瀏覽器兼容性：

你可以查看 CanIUse 了解更多關(guān)于 CSS calc() 函數(shù)的瀏覽器兼容性的詳細信息。

7. CSS calc()函數(shù)使用場景

很多時候我們需要 CSS calc() 函數(shù)來方便地解決一些問題。它們包括：

• 當我們處理 CSS 變量時
• 為了得到一個新的值
• 用于不同單元之間的計算，這是預(yù)處理器無法做到的
• 定位
• 調(diào)整我們網(wǎng)站的結(jié)構(gòu)和其他元素
• 當我們想避免重復(fù)做相同的計算時

我們在本文中介紹的大多數(shù)示例都屬于上述類別。

8. 小結(jié)

使用 CSS calc() 函數(shù)的方法有很多。CSS calc() 函數(shù)是你應(yīng)該嘗試的。它是 web 開發(fā)人員工具箱中必不可少的工具。如果你覺得這篇文章有幫助，請點贊加關(guān)注，謝謝支持！文章來源地址http://www.zghlxwxcb.cn/news/detail-697737.html

到了這里，關(guān)于CSS calc() 使用指南的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！