3.盒模型.html 840 B

12345678910111213141516171819202122232425262728293031
  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: 220px;
  10. height: 220px;
  11. background: #00f;
  12. border: 3px solid #0f0;
  13. padding: 20px;
  14. margin: 10px;
  15. box-sizing: content-box;
  16. }
  17. /*
  18. 盒模型:
  19. 标准盒模型:
  20. box-sizing:content-box
  21. 宽度 = 内容宽度 + 边框 + 内边距
  22. 怪异盒模型(IE盒模型):
  23. box-sizing:border-box
  24. 宽度 = 内容宽度(弹性的witdh + 边框 + 内边距 )
  25. */
  26. </style>
  27. </head>
  28. <body>
  29. <div></div>
  30. </body>
  31. </html>