calc() 能结合rem 进行自适应布局

关于calc()
在进行自适应布局的时候有时候会碰到需要有给固定宽高的地方，比如一个div宽度为屏幕尺寸的一半，但是有10px的padding，那在这种情况下假如我们直接给宽度50%，或者计算完之后的rem单位，再给padding,.因为盒模型的关系导致其宽度为50%+20px。但是又因为50%是一个不固定的值，导致很难计算出一个具体的值，在这种情况下我们就可以使用css3中的一个计算方法，calc（），可以设置

div{width:calc(50% - 20px);}

这样设置之后得到的结果就是计算之后的结果，任何需要给具体的值的地方都可以使用calc来进行计算，不过需要主要目前此方法只能进行+ - * /的四则运算，并且在计算符号前后都需要有一个空格。当然上面的50%也可以换成计算之后的rem单位。

注意点:
calc 内部的表达式，在使用运算符号时，两遍必须加上空格（虽然乘除可以无视，但还是建议带上）！！！！！，不然会解析错误！！，看演示写法

width:calc(10 * 10px);
width:calc(50% - 50px);
width:calc(50% + 5em);
width:calc(10% / 1rem);

通过这些在方法在进行自适应布局的时候就可以更加的得心应手了~~
结论
使用rem单位以及calc（）方法在进行自适应布局非常强大，可以配合媒介查询，可以非常灵活的控制各种元素的自适应。