CSS——Calc()函数的使用

在做自适应网站的时候一般都用百分比来设置宽度，但是有时候需要在添加几个像素的外边框或者内边框，但是这个时候回出现把容器撑爆 如把容器分割为屏幕的二分之一之后需要添加10px的外边距，但是使用之后会直接撑爆容器，导致出错，所以需要Calc()函数的帮助，使用calc()之后就会解决这一个问题：width：calc(50% - 10px) 。

使用方法：width：calc(50% - 20px)

height：calc(50% - 20px)

注意：

1. 使用“+”、“-”、“*” 和 “/”四则运算；
2. 可以使用百分比、px、em、rem等单位；
3. 可以混合使用各种单位进行计算；
4. 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
   表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。