『移动端』4种方法解决设置padding时宽高比实际预算的大的问题
Posted > DanicaStar
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了『移动端』4种方法解决设置padding时宽高比实际预算的大的问题相关的知识，希望对你有一定的参考价值。
使用 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()计算中的两个值必须同运算符号之间存在空格，否则不会起作用）例如，可以使用比如 以上是关于『移动端』4种方法解决设置padding时宽高比实际预算的大的问题的主要内容，如果未能解决你的问题，请参考以下文章calc(100% - 10px) 来减去固定的像素值，从而避免超出预算。这样就能保证元素的总宽度不会超出预算。注意这个属性不支持IE浏览器，但是ta已经没了