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);
}