使用 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
 



 



 



 



。