16_行级块元素.html 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  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. font-size: 0;
  10. width: 300px;
  11. height: 300px;
  12. border:2px solid black;
  13. } */
  14. /* span{
  15. font-size: 20px;
  16. background-color: blue;
  17. } */
  18. img{
  19. width: 300px;
  20. }
  21. ul{
  22. border:2px solid black;
  23. }
  24. li{
  25. width: 100px;
  26. height: 100px;
  27. background-color: blue;
  28. margin:10px;
  29. /* 转换为行级块元素 */
  30. display: inline-block;
  31. /* float: left; */
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <!-- <div>
  37. <span>hello</span>
  38. <span>world</span>
  39. </div> -->
  40. <!-- 行级块元素 -->
  41. <img src="./img/img4.jpg">
  42. <img src="./img/img1.jpg">
  43. <ul>
  44. <li>a</li>
  45. <li>b</li>
  46. <li>c</li>
  47. </ul>
  48. </body>
  49. </html>