6.盒模型.html 914 B

1234567891011121314151617181920212223242526272829303132
  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: #ff0;
  12. border: 1px solid #f00;
  13. box-sizing: border-box;
  14. }
  15. /*
  16. 盒模型:
  17. 1.怪异盒模型
  18. box-sizing: border-box;
  19. 宽度:
  20. width = 原本的contentWidth(弹性后的内容宽度 + border + padding) +margin(不对页面元素产生影响)
  21. 2.标准盒模型
  22. box-sizing: content-box;
  23. 宽度:
  24. width = contentWidth + border + padding+margin(不对页面元素产生影响)
  25. */
  26. </style>
  27. </head>
  28. <body>
  29. <div></div>
  30. </body>
  31. </html>