CSS數學伸縮布局是一種利用CSS3中的calc()函數和布局屬性進行靈活布局的方式。在這種布局中，元素的大小和位置不僅受到固定像素值的限制，還可以根據瀏覽器窗口大小和其他元素的大小進行自適應的伸縮。

在使用CSS數學伸縮布局時，常用的幾個屬性包括：

width：寬度；
height：高度；
padding：內邊距；
margin：外邊距；
left、right、top、bottom：相對于父元素的位置；

而另一個關鍵的屬性則是calc()函數，其語法為：

calc(數學表達式)

其中，數學表達式中可以包含加、減、乘、除四種運算符，可以使用 +、-、*、/、%、() 這些符號，并且可以將像素值和百分比混合使用。

例如，如果要將一個元素的寬度設置為父元素寬度的70%，再減去40像素的寬度，可以這樣寫：

width: calc(70% - 40px);

同樣地，如果要使一個元素的大小等于其寬度加上高度，可以這樣寫：

width: 100px;
height: 50px;
padding: 10px;
width: calc(100% - 2 * 10px); /* 內邊距的寬度需要減去 */
height: calc(100% - 2 * 10px);

通過這種方式，可以輕松實現諸如可自適應的九宮格布局、自動居中的效果等。

此外，還有幾個與CSS數學伸縮布局相關的注意點：

1. 在動態計算元素大小時，會輕微影響網頁加載速度；
2. IE9及以下版本無法使用CSS數學伸縮布局；
3. 需要注意數學運算的優先級問題，避免出現錯誤結果。

總的來說，CSS數學伸縮布局為我們帶來了更加靈活的網頁布局方式，通過巧妙地運用calc()函數和其他CSS屬性，可以讓元素的大小和位置得到更自然、更精確的調整。