4_css盒子模型.html 1.0 KB

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. /* 盒子模型 */
  10. /* 内容区域 width宽度 height高度 */
  11. width: 100px;
  12. height: 100px;
  13. /* border 边框 */
  14. /* border: 边框宽度 边框样式 边框颜色 */
  15. border:1px solid red;
  16. /* padding 内边距 边框离内部元素的距离 */
  17. /* padding:10; 上 右 下 左 全都是10像素 */
  18. padding: 10px;
  19. /* margin 外边距 边框离外部元素的距离 */
  20. /* margin:10px; 上 右 下 左 全都是10像素 */
  21. /* margin 不会改变元素尺寸 */
  22. margin:10px;
  23. }
  24. /* 默认情况下(标准盒模型)边框和内边距会改变原有元素的宽度和高度 */
  25. </style>
  26. </head>
  27. <body>
  28. <div>你好</div>
  29. <div>hello world</div>
  30. </body>
  31. </html>