【前端】解決盒子被撐大問題 box-sizing
阿新 • • 發佈：2022-03-11
設定 box-sizing:border-box（原本的預設值為:content-box）
box-sizing: content-box;/*盒子寬度=CSS中設定的width+border+padding*/
box-sizing: border-box;/*盒子的寬度=css中設定的width*/
例項對比
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ box-sizing: content-box;/*盒子寬度=CSS中設定的width+border+padding*/ width:300px; height:200px; padding:10px; margin: 10px; color:red; border:5px solid blue; } .box2{ box-sizing: border-box;/*盒子的寬度=css中設定的width*/ width:300px; height:200px; padding:10px; margin: 10px; color:red; border:5px solid blue; } </style> </head> <body> <div class="box1"> <p>box-sizing: content-box;/*盒子寬度=CSS中設定的width+border+padding*/</p> </div> <div class="box2"> <p>box-sizing: border-box;/*盒子的寬度=css中設定的width*/</p> </div> </body> </html>
可以看到，第一個div被pading等因素撐大