CSS中的百分比和數(shù)字計(jì)算可謂是兩種十分實(shí)用的技巧，下面我們來(lái)分別介紹它們的具體用法。

/*百分比計(jì)算*/
.container {
width: 80%; /*容器寬度為父元素寬度的80%*/
}
.box {
width: 50%; /*寬度為父元素寬度的50%*/
padding-top: 50%; /*高度為元素寬度的50%*/
background-color: #ccc;
}
/*數(shù)字計(jì)算*/
.item {
width: calc(50% - 20px); /*寬度為父元素寬度的50%，再減去20px*/
height: calc(100vh - 100px); /*高度為視窗高度減去100px*/
margin: calc(10% / 2); /*上下左右外邊距均為父元素寬度的10%除以2*/
}

通過(guò)上面的例子，不難看出百分比計(jì)算可幫助我們實(shí)現(xiàn)響應(yīng)式布局，使元素根據(jù)不同屏幕尺寸自動(dòng)適應(yīng)大小。而數(shù)字計(jì)算則更加靈活，可以讓我們?cè)跇邮奖碇袑?xiě)入一些較為復(fù)雜的計(jì)算式，以達(dá)到所需的效果。