『移动端』4种方法解决设置padding时宽高比实际预算的大的问题

使用 CSS 的 box-sizing 属性

MDN docs 关于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() 函数:

MDN docs 关于 css3 calc()函数

使用 calc() 函数可以在 CSS 中进行动态计算（calc()计算中的两个值必须同运算符号之间存在空格，否则不会起作用）例如，可以使用比如 calc(100% - 10px) 来减去固定的像素值，从而避免超出预算。这样就能保证元素的总宽度不会超出预算。注意这个属性不支持IE浏览器，但是ta已经没了😔

使用 max-width 属性

这个属性可以限制元素的最大宽度，从而避免超出预算。 例如，如果预算的最大宽度是360px，可以这样设置：
.element { max-width: 360px; } 这样，即使你设置了 padding 或 border，元素的宽度也不会超过360px。