9_行级元素块级元素.html 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. p{
  10. background: #f00;
  11. width: 200px;
  12. height: 200px;
  13. }
  14. a{
  15. background: #0f0;
  16. width: 200px;
  17. height: 200px;
  18. }
  19. h1{
  20. display: none;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <p>哈哈哈</p>
  26. <a href="#">hehehehehehehhehe</a>
  27. <a href="#">hehehehehehehhehe</a>
  28. <h1>ahahahah</h1>
  29. <!--
  30. 块级元素 1、自己占一行 2、可以设置宽高
  31. h1-h6 p div ul li
  32. display:block;
  33. 行级元素 1、多个占一行 3、不能设置宽高
  34. a span i b
  35. display:inline
  36. 行级块元素 1、多个占一行 2、可以设置宽高
  37. input
  38. display:inline-block;
  39. display:none 隐藏
  40. -->
  41. </body>
  42. </html>