眾所周知，CSS有一個(gè)特殊的calc()函數(shù)，用于做基本的數(shù)學(xué)運(yùn)算。

demo：

.main-content {
  /* 盒子的高度是100vh-80px */
  height: calc(100vh - 80px);
}

讓我們來(lái)詳細(xì)的學(xué)習(xí)一下這個(gè)功能吧:

一, calc() 的作用范圍;

calc()函數(shù)只能在值中使用。
demo:

.el {
  font-size: calc(3vw + 2px);
  width:     calc(100% - 20px);
  height:    calc(100vh - 20px);
  padding:   calc(1vw + 5px);
}

也可以在部分屬性的內(nèi)部作為單獨(dú)的值使用.
demo:

.el {
  margin: 10px calc(2vw + 5px);
  border-radius: 15px calc(15px / 3) 4px 2px;
  transition: transform calc(1s - 120ms);
}

它甚至可以成為構(gòu)成屬性一部分的另一個(gè)功能的一部分！例如，這里的calc() 用于漸變的色標(biāo)中.

demo:

.el {
  background: #1E88E5 linear-gradient(
  to bottom,
  #1E88E5,
  #1E88E5 calc(50% - 10px),
  #3949AB calc(50% + 10px),
  #3949AB
  );
}

二, calc() 的單位要求;

calc() 可以將不同的單位混合在一起 .

width: calc(100% - 20px);

Tips:在sass中想同時(shí)使用calc()和變量以下寫法是不可行的; 同時(shí) , calc()不能在媒體查詢中使用;

demo:(在sass中)

$padding: 1rem;

.el[data-padding="extra"] {
  padding: $padding + 2rem; // processes to 3rem;
  margin-bottom: $padding * 2; // processes to 2rem; 
}

三, calc() 具有更強(qiáng)的語(yǔ)義;

例如：假設(shè)我們需要寫定一個(gè)父盒子的7分之一的寬度的盒子；

.el {
  /* 更加語(yǔ)義化和容易理解 */
  width: calc(100% / 7);

  /* 這種看起來(lái)更冗雜 */
  width: 14.2857142857%;
}

三, calc() 的運(yùn)算符合和要求;

calc() 中可以使用加減乘除 , 但他們?cè)谑褂梅椒ㄉ嫌兴煌?br> 加法(+)和減法(-)要求這兩個(gè)數(shù)都是長(zhǎng)度

.el {
  /* 有效?? */
  margin: calc(10px + 10px);

   /* 無(wú)效的?? */
  margin: calc(10px + 5);
}

除法(/)要求第二個(gè)數(shù)字是無(wú)單位的

.el {
  /* 有效的?? */
  margin: calc(30px / 3);

  /* 無(wú)效的?? */
  margin: calc(30px / 10px);

  /* 無(wú)效的??  (不能除以0) */
  margin: calc(30px / 0);
}

總結(jié)：在編寫CSS中calc() 還是非常常用的 ，多多使用就能熟練掌握啦~