CSS中有一個(gè)計(jì)算函數(shù)，叫做calc()函數(shù)，它可以用來(lái)實(shí)現(xiàn)長(zhǎng)度和高度的自適應(yīng)。calc()函數(shù)可以通過(guò)加減乘除來(lái)計(jì)算長(zhǎng)度或者高度，可以使用百分比、像素、em或rem等長(zhǎng)度單位。

width: calc(50% - 20px);

在上面的例子中，寬度是父容器寬度的50%減去20個(gè)像素。這樣子就可以實(shí)現(xiàn)長(zhǎng)度自適應(yīng)的效果。

height: calc(100vh - 100px);

在上面的例子中，高度是視窗高度的100%減去100個(gè)像素。這樣子就可以實(shí)現(xiàn)高度自適應(yīng)的效果。

當(dāng)然，我們也可以在calc()函數(shù)中使用其他的長(zhǎng)度單位，比如em或者rem。在使用em或者rem的時(shí)候，需要注意要給父元素設(shè)置正確的font-size值。

font-size: 16px;
width: calc(100% - 1.5rem);

在上面的例子中，width是父容器寬度的100%減去1.5個(gè)rem長(zhǎng)度。因?yàn)?rem的長(zhǎng)度就是16px，所以1.5rem的長(zhǎng)度就是24px。

通過(guò)使用calc()函數(shù)，我們就可以實(shí)現(xiàn)長(zhǎng)度和高度的自適應(yīng)。而且計(jì)算過(guò)程中支持加減乘除，可以使用各種長(zhǎng)度單位。這種方式可以讓我們更加方便地控制網(wǎng)頁(yè)的布局，創(chuàng)建更優(yōu)美的UI設(shè)計(jì)。