9.css样式.html 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  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. input {
  9. /* 轮廓outline */
  10. outline: none;
  11. outline: 3px solid #f00;
  12. outline-width: 1px;
  13. outline-style: dashed;
  14. outline-color: purple;
  15. /* border: none; */
  16. }
  17. div {
  18. /* 将元素转成行内元素 */
  19. /* display: inline; */
  20. }
  21. span {
  22. width: 300px;
  23. height: 300px;
  24. border: 3px solid #000;
  25. margin-left: 20px;
  26. /* 将元素转成块级元素 */
  27. /* display: block; */
  28. /* 将元素转成行内款元素 */
  29. display: inline-block;
  30. }
  31. h2 {
  32. /* 将元素隐藏 */
  33. display: none;
  34. /* color: rgba(0, 0, 0, 0); */
  35. /* opacity: 0; */
  36. /* 显示元素 */
  37. display: block;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <input type="text" name="" id="" />
  43. <div>111</div>
  44. <span>2222</span>
  45. <span>333</span><span>444</span>
  46. <h2>显示/隐藏</h2>
  47. </body>
  48. </html>