CSS中calc()函數(shù)如何使用

發(fā)布時(shí)間：2020-09-26 10:44:29 來源：億速云閱讀：147 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)CSS中calc()函數(shù)如何使用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

CSS的calc函數(shù)是一個(gè)可以使用計(jì)算公式進(jìn)行布局和設(shè)置大小規(guī)范的函數(shù)。

通常設(shè)置布局和大小，都是如100px和3em這樣來設(shè)置的，但你可以通過calc函數(shù)使用100px + 50px或3em - 1em等進(jìn)行算術(shù)運(yùn)算來設(shè)置。

首先我們來看看如何使用calc()函數(shù)？

我們使用calc函數(shù)都是通過指定計(jì)算公式來設(shè)置大小，比如：

width: calc(100px + 50px);

或者

font-size: calc(3em + 1em);

我們下面來看具體的示例

代碼如下

創(chuàng)建calc.html并編寫以下HTML文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>calc的用法</title>
    <style type="text/css">
      body {
        width: 800px;
      }
      .calc_div {
        width: calc(100% - 500px);
        height: calc(100% - 500px);
        color: rgb(255, 0, 0);
      }
      .font {
        font-size: 3em;
      }
      .calc_font {
        font-size: calc(3em + 2em);
        color: rgb(255, 0, 0);
      }
    </style>
  </head>
  <body>
    <div>
      這是一個(gè)未使用calc的div。
    </div>
    <div class="calc_div">
      這是一個(gè)使用了calc的div。
    </div>
    <div class="font">
     這是設(shè)置了3em的div
    </div>
    <div class="calc_font">
      這是一個(gè)設(shè)置了calc(3em+2em)的div
    </div>
  </body>
</html>

以上代碼在瀏覽器中顯示效果如下

CSS中calc()函數(shù)如何使用

關(guān)于CSS中calc()函數(shù)如何使用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

CSS中calc()函數(shù)如何使用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽