<div>中的calc是一個CSS3屬性，通過它可以在CSS中進行簡單的數(shù)學(xué)計算。calc可以在width、height、padding、margin、line-height等屬性中使用，它使得我們可以更加靈活地進行頁面布局和設(shè)計。</div>

案例一：

<div>

.box {
width: calc(100% - 20px);
height: calc(50% - 10px);
padding: 10px;
margin: 5px;
background-color: #ccc;
}

</div>
<div>

在上面的案例中，我們定義了一個名為box的div，通過calc函數(shù)來計算它的寬度和高度。這里我們將寬度設(shè)置為整個父容器的寬度減去20px，高度設(shè)置為父容器高度的一半減去10px。這樣我們可以靈活地控制box的大小，而無需關(guān)心具體的數(shù)值。

</div>

案例二：

<div>

.container {
width: 500px;
padding: 20px;
margin: 50px auto;
background-color: #f5f5f5;
}
<br>
      .box {
width: calc(50% - 20px);
height: calc(100% - 40px);
margin-right: 40px;
background-color: #ccc;
float: left;
}

</div>
<div>

在這個案例中，我們使用calc來控制box的寬度和高度，并設(shè)置了盒子之間的間距。根據(jù)父容器的寬度計算出每個box的寬度為50%減去20px，高度為父容器高度減去40px。同時，通過設(shè)置margin-right為40px，實現(xiàn)了盒子之間的間距效果。這樣的布局方式可以很方便地適應(yīng)不同大小的父容器。

</div>

案例三：

<div>

.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}
<br>
      .box {
width: calc(100% / 3 - 20px);
height: 200px;
margin: 10px;
background-color: #ccc;
}

</div>
<div>

在這個案例中，我們使用calc和flex布局來創(chuàng)建一個自適應(yīng)的網(wǎng)格布局。通過設(shè)置container的display為flex，justify-content和align-items為center，實現(xiàn)了容器內(nèi)的內(nèi)容水平和垂直居中的效果。然后我們通過設(shè)置box的寬度為container寬度的1/3減去20px，高度為200px，以及設(shè)置margin為10px來實現(xiàn)了等寬等高的網(wǎng)格布局。

</div>

通過以上幾個案例，我們可以看到使用calc可以在CSS中進行數(shù)學(xué)計算，極大地增強了頁面布局的靈活性和可變性。無論是寬度、高度、間距還是網(wǎng)格布局，calc都能夠很好地滿足我們的需求。