盒模型.html 899 B

12345678910111213141516171819202122232425262728293031323334
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. div {
  9. width: 200px;
  10. height: 200px;
  11. background: #0f0;
  12. padding: 25px;
  13. border: 2px solid #f00;
  14. margin: 10px;
  15. box-sizing: border-box;
  16. }
  17. /*
  18. 盒模型
  19. 1.标准盒模型 box-sizing:content-box;
  20. width = content(内容宽度) + padding +border
  21. height = content(内容高度) + padding +border
  22. 2.怪异盒模型(IE盒模型) box-sizing:border-box;
  23. width = content(内容宽度+ padding +border)
  24. height = content(内容高度+ padding +border)
  25. */
  26. </style>
  27. </head>
  28. <body>
  29. <div></div>
  30. </body>
  31. </html>