使用 CSS 的 box-sizing 屬性 MDN docs 關於box-sizing 一種解決方法是使用 CSS 的 box-sizing 屬性來控制元素的盒模型。預設情況下，盒模型是 "content-box"，這意味著元素的寬度和高度只包括其內容，而不包括 padding 和 border。 ...
使用 CSS 的 box-sizing 屬性
一種解決方法是使用 CSS 的 box-sizing 屬性來控制元素的盒模型。預設情況下，盒模型是 "content-box"，這意味著元素的寬度和高度只包括其內容，而不包括 padding 和 border。將 box-sizing 設置為 "border-box" 將會更改盒模型，使得元素的寬度和高度包括 padding 和 border。
* { box-sizing: border-box; }
這樣，元素的寬度和高度就包括了 padding 和 border，就不會超出預算了。
使用百分比值設置 padding:
使用百分比值設置 padding 可以避免固定像素值的限制。例如，如果設置元素的寬度為 100%，則可以使用百分比值設置 padding，例如 padding: 2%，這樣就能保證元素的總寬度不會超出預算。
使用 CSS calc() 函數:
使用 calc() 函數可以在 CSS 中進行動態計算（calc()計算中的兩個值必須同運算符號之間存在空格，否則不會起作用）例如，可以使用比如 calc(100% - 10px) 來減去固定的像素值，從而避免超出預算。這樣就能保證元素的總寬度不會超出預算。註意這個屬性不支持IE瀏覽器，但是ta已經沒了
