使用 CSS 的 box-sizing 属性
https://developer.mozilla.org/zh-CN/docs/Web/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() 函数:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc
使用 calc() 函数可以在 CSS 中进行动态计算。例如,可以使用比如 calc(100% - 10px)
来减去固定的像素值,从而避免超出预算。这样就能保证元素的总宽度不会超出预算。
使用 max-width 属性
这个属性可以限制元素的最大宽度,从而避免超出预算。 例如,如果预算的最大宽度是360px,可以这样设置:.element { max-width: 360px; } 这样,即使你设置了 padding 或 border,元素的宽度也不会超过360px。
标签:box,超出预算,padding,宽度,预算,宽高比,border,CSS From: https://www.cnblogs.com/hazjblog/p/css-tips-about-padding-set.html