search

博客列表 >0323作业

0323作业

bloght5386
bloght5386原创
2021年05月02日 21:00:17564浏览

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 {
  21.             width: 100px;
  22.             height: 100px;
  23.             background-color: green;
  24.             position: relative;
  25.             top: 150px;
  26.             left:150px;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div class="parent">
  32.         <div class="son"></div>
  33.     </div>
  34. </body>
  35. </html>
  37. <!DOCTYPE html>
  38. <html lang="en">
  39. <head>
  40.     <meta charset="UTF-8">
  41.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  42.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  43.     <title>Document</title>
  44.     <style>
  45.         /* 绝对定位根据BODY来定位  脱离文档流*/
  46.         .parent {
  47.             width: 200px;
  48.             height: 200px;
  49.             background-color: yellow;
  50.             position: relative;
  52.         }
  53.         /* 相对定位根据自己的位置来定位 没有脱离文档流*/
  54.         /* 在实战子盒子根据父盒子来定位，子绝父相 */
  55.         .son {
  57.             width: 100px;
  58.             height: 100px;
  59.             background-color: green;
  60.             position: absolute;
  61.             top: 150px;
  62.             left:150px;
  63.         }
  64.     </style>
  65. </head>
  66. <body>
  67.     <div class="parent">
  68.         <div class="son"></div>
  69.     </div>
  70. </body>
  71. </html>
上一条：【php基础入门】小白整理PHP常用的字符串函数使用总结分析(推荐)下一条：0322作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多