calc()实现CSS响应式布局

calc()是CSS3新增的一个功能，可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值，仅在css中就可以实现响应式布局，不用再担心元素把盒子撑破，页面也响应浏览器窗口变化，想想就感觉美好。

注意事项

• 方法的表达式中有“+”和“-”时，其前后必须要有空格，如”widht: calc(100%-20px)”这种没有空格的写法是错误的；
• 方法的表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

实例

• 容器盒子为100%显示，容器中渲染一个长300，宽200的图片。
• 图片相对于容器居中显示

html 部分：

<div id="contenter">
   <img src="./myPng.png" class="dispalyImg">
</div>

css部分:

#contenter {
   width: 100%;
   height: 100%;
}
#contenter .displayImg {
   margin-top: calc((100% - 200) / 2);
   margin-left: calc((100% - 300) / 2);
}