1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .box1{ 8 width:100px; 9 height:100px; 10 background-color:#bfa; 11 padding:10px; 12 border:10px red solid; 13 /* 14 默认情况下，盒子的可见框的大小由内容区，内边距，外边框共同> 决定 15 box-sizingg:用来设置盒子的尺寸的计算方式(设置width,heightt> 的作用范围) 16 -可选值： 17 -content-box:默认值，宽度和高度用来设置内容区的大小 18 -border-box宽度和高度用来设置整个盒子可见框的大小 19 20 */ 21 box-sizing:border-box; 22 23 } 24 25 </style> 26 </head> 27 <body> 28 <div class="box1"></div> 29 </body> 30 </html> ~