0323作业

2021年05月02日 21:00:17阅读数:62博客 / / CSS学习

1. 理解 box-sizing功能并实例演示;

  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. .box {
  10. width: 400px;
  11. height: 400px;
  12. background-color: yellow;
  13. padding: 10px;
  14. margin: 10px;
  15. /* 始终保持宽高400px */
  16. box-sizing: border-box;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div class="box"></div>
  22. </body>
  23. </html>

2. 理解相对定位与绝对定位,并实例演示他们的区别与联系

  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. /* 绝对定位根据BODY来定位 脱离文档流*/
  10. .parent {
  11. width: 200px;
  12. height: 200px;
  13. background-color: yellow;
  14. position: absolute;
  15. top:20px;
  16. left: 20px;
  17. }
  18. /* 相对定位根据自己的位置来定位 没有脱离文档流*/
  19. .son {
  20. width: 100px;
  21. height: 100px;
  22. background-color: green;
  23. position: relative;
  24. top: 150px;
  25. left:150px;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div class="parent">
  31. <div class="son"></div>
  32. </div>
  33. </body>
  34. </html>
  35. <!DOCTYPE html>
  36. <html lang="en">
  37. <head>
  38. <meta charset="UTF-8">
  39. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  40. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  41. <title>Document</title>
  42. <style>
  43. /* 绝对定位根据BODY来定位 脱离文档流*/
  44. .parent {
  45. width: 200px;
  46. height: 200px;
  47. background-color: yellow;
  48. position: relative;
  49. }
  50. /* 相对定位根据自己的位置来定位 没有脱离文档流*/
  51. /* 在实战子盒子根据父盒子来定位,子绝父相 */
  52. .son {
  53. width: 100px;
  54. height: 100px;
  55. background-color: green;
  56. position: absolute;
  57. top: 150px;
  58. left:150px;
  59. }
  60. </style>
  61. </head>
  62. <body>
  63. <div class="parent">
  64. <div class="son"></div>
  65. </div>
  66. </body>
  67. </html>
批改状态:合格

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    博文
    3
    粉丝
    0
    评论
    0
    访问量
    166
    积分:0
    P豆:6
    最新更新
    0323作业2021-05-02
    0322作业2021-05-02
    0319作业2021-05-02