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

案例一：

<div>

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

</div>
<div>

在上面的案例中，我們定義了一個名為box的div，通過calc函數(shù)來計算它的寬度和高度。這里我們將寬度設置為整個父容器的寬度減去20px，高度設置為父容器高度的一半減去10px。這樣我們可以靈活地控制box的大小，而無需關心具體的數(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的寬度和高度，并設置了盒子之間的間距。根據(jù)父容器的寬度計算出每個box的寬度為50%減去20px，高度為父容器高度減去40px。同時，通過設置margin-right為40px，實現(xiàn)了盒子之間的間距效果。這樣的布局方式可以很方便地適應不同大小的父容器。

</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)建一個自適應的網(wǎng)格布局。通過設置container的display為flex，justify-content和align-items為center，實現(xiàn)了容器內的內容水平和垂直居中的效果。然后我們通過設置box的寬度為container寬度的1/3減去20px，高度為200px，以及設置margin為10px來實現(xiàn)了等寬等高的網(wǎng)格布局。

</div>

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