box-sizing
阿新 • • 發佈：2020-08-13
box-sizing：為css3新增的樣式。
總結一句話：設定改樣式、且有寬度，padding無法將其撐大
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; background-color: red; margin-top:20px; } .box2,.box3{ border:25px blue solid; padding:25px; /* 設定的放內容區域大小*/ /*外加模式*/ box-sizing: content-box; } .box2{ /* 設定盒子模型中最大盒子大小，如果在加paddig border 只會減小放內容的區域*/ /*內減模式*/ box-sizing: border-box; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> style="border:0"></iframe> </body> </html>