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>

更多相关文章

  1. Android(安卓)10 定位问题，获取NMEA（支持5.0~10.0）
  2. Android中GPS定位的简单应用
  3. android 定位服务
  4. android 定位服务
  5. android linker (1) —— __linker_init()
  6. Android(安卓)AGPS 定位 测试程序
  7. android 百度地图SDK 获得详细路线信息
  8. 高德地图Android，绘制自定义定位蓝点、marker、面
  9. Android实现手机定位的案例代码

随机推荐

  1. Ajax没有处理select标签，PHP，AJAX
  2. jQuery LightBox（SlimBox）：如何在其中填充AS
  3. jquery 的 each , click , 中 $(this) 是
  4. Web App可以在不刷新页面的情况下最好地
  5. 用jquery改变样式：after
  6. jquery ajax 提交信息后等待返回的提示信
  7. jQuery：AJAX知识点及async同步异步的区别
  8. Ajax调用php脚本返回404错误
  9. jQuery 对Ajax的支持——从Ajax基本实现
  10. 如何将表单转换成json通过AJAX传递？