1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>怪异盒模型</title> 6 <style type="text/css"> 7 div{ 8 width: 200px; 9 height: 200px; 10 border: 10px solid blue; 11 padding: 30px; 12 /*box-sizing: border-box;*/ 13 box-sizing: content-box; 14 } 15 </style> 16 </head> 17 <body> 18 <div> 19 <!-- 20 box-sizing:盒模型的设置 21 22 标准盒模型 content-box 23 盒子的宽:border+padding+width 24 盒子的高:border+padding+width 25 怪异盒模型:border-box 26 盒子的宽:就是设置的width 会包含 border + padding 27 盒子的高:就是设置的 height 会包含 border + padding 28 --> 29 </div> 30 </body> 31 </html>
自己改下属性就知道效果!