3.元素转换.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  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. .box {
  9. width: 600px;
  10. height: 800px;
  11. border:1px solid #000;
  12. }
  13. .header {
  14. width: 100px;
  15. height: 100px;
  16. background-color: red;
  17. /* 将元素转成行内块元素 */
  18. /* display: inline-block; */
  19. /* 将元素转成行内元素 */
  20. display: inline;
  21. }
  22. .main {
  23. width: 200px;
  24. height: 200px;
  25. background: #00f;
  26. /* display: inline-block; */
  27. display: inline;
  28. }
  29. span {
  30. width: 100px;
  31. height: 100px;
  32. background: #00f;
  33. /* 将元素变成块元素 */
  34. display: block;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <div class="box">
  40. <div class="header">11111</div>
  41. <div class="main">2222</div>
  42. <span>今天天气真好</span>
  43. <span>明天吃铁锅炖</span>
  44. </div>
  45. </body>
  46. </html>