CSS3計(jì)算屬性calc()的使用方法

calc() 只作用于屬性值

設(shè)置寬度：width:calc(100vw - 123px);

說(shuō)明：1、vw是width of view(port)的縮寫(xiě)；

2、100vw表示百分之百的視圖寬度；

3、123px是需要減去的寬度；

4、減號(hào)的兩邊必須都有至少一個(gè)空格。

設(shè)置高度：height:calc(100vh-123px);

說(shuō)明：1、vh是height of view(port)的縮寫(xiě)；

2、100vh表示百分之百的視圖高度；

3、123px是需要減去的高度；

4、同理減號(hào)的兩邊必須都有至少一個(gè)空格。

可以應(yīng)用全部屬性，例如：

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

也可以僅用于部分屬性，例如：

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

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

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

calc() 用于長(zhǎng)度和其他數(shù)值

以上所有示例本質(zhì)上都是基于數(shù)字的。 我們會(huì)講到一些數(shù)的使用注意事項(xiàng)（因?yàn)橛袝r(shí)你不需要單位），但這是針對(duì)數(shù)字的數(shù)學(xué)，而不是字符串之類(lèi)的東西。

.nr {
  /* Nope! */
  counter-reset: calc("My " + "counter");
}
.nr::before {
  /* Nope! */
  content: calc("Candyman " * 3);
}

CSS有很多長(zhǎng)度，它們都可以與calc() 一起使用：

• px
• %
• em
• rem
• in
• mm
• cm
• pt
• pc
• ex
• ch
• vh
• vw
• vmin
• vmax

無(wú)單位的數(shù)字也是可以接受的，例如line-height：calc（1.2 * 1.2）; 以及諸如transform：rotate（calc（10deg * 5））;之類(lèi)的角度。 您也可以不執(zhí)行任何計(jì)算并且仍然有效：

.nr {
  /* Little weird but OK */
  width: calc(20px);
}

注意：calc()不能在媒體查詢中使用。