search

博客列表 >默认布局与自定义布局

默认布局与自定义布局

P粉314265155
P粉314265155原创
2022年07月12日 12:44:47411浏览

默认布局与内联元素

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>固定定位、绝对定位</title>
  9. <style>
  10. .box{
  11.     background-color: aqua;
  12.     width: 400px;
  13.     height: 200px;
  14.     padding: 10px;
  15.     margin: 20px;
  16.     border: 2px solid blue;
  17.     box-sizing: border-box;
  18. }
  19. .box1{
  20.     background-color: aqua;
  21.     width: 400px;
  22.     height: 200px;
  23.     padding: 10px;
  24.     margin: 20px;
  25.     border: 2px solid red;
  26. }
  28. p span:first-of-type{
  29.     background-color: yellow;
  30.     padding: 10px;
  31.     margin: 20px;
  32.     border: 2px;
  33.     width: 300px;
  34.     height: 200px;
  35.     display: block;
  36.     display: inline-block;
  37. }
  39. p span:first-of-type + span {
  40.         background-color: lightgreen;
  41.       }
  42.     </style>
  43. </style>
  44. </head>
  45. <body>
  47.     <div class="box">
  48.       我是默认定位
  49.     </div>
  50.     <div class="box1">
  51.         <p class="p">你猜：<span>我是内联1</span><span class="s">我是内联2</span></p>
  53.     </div>
  55. </body>
  56. </html>

自定义布局：相对定位与固定定位

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>自定义布局 相对定位与固定定位</title>
  9.     <style>
  10.          body {
  11.         height: 2000px;
  12.       }
  13. * {
  14.     border: 1px solid saddlebrown;
  15.     width: 500px;
  17. }
  19. .box{
  20.     width: 400px;
  21.     height: 250px;
  22.     background-color: lightgray;
  23.     border: 5px dashed red;
  24. }
  25. .box .box{
  26.     width: 400px;
  27.     height: 250px;
  28.     background-color: lightcoral
  29.     padding:10px;
  31. }
  32. .box.child.box1 {
  33.         background-color: yellow;
  34.         border: 5px dashed red;
  35.       }
  36.       .box.child.box2 {
  37.         background-color: rebeccapurple;
  38.         border: 5px dashed red;
  39.       }
  41.       .box.child.box3 {
  42.         background-color: blue;
  43.         border: 5px dashed red;
  44.       }
  46.       .box.box.child.box1{
  47.       /* 我是相对定位   0  距离不需单位 */
  48.         position: relative;
  49.         top: 30px;
  50.         left: 50px;
  51.         z-index: 3.125rem;
  52.       }
  54.       .box.box.child.box2{
  55.       /* 我是绝对定位   0  距离不需单位 */
  56.         /* position: absolute; */
  57.         position: absolute; 
  58.         top: 20px;
  59.         left: 30px;
  61.       }
  62.       .box.child.box3 {
  63.         position: fixed;
  64.         right: 0;
  65.         bottom: 0;
  66.       }
  68.       .box{
  69.         /* 取消自定义定位属性,转为默认定位 */
  70.         /* position: static; */
  72.         /* 只是值不是staitc,就自动将该元素转为"定位元素" */
  73.         /* 只有定位元素,可以充当 绝对定位 元素的 定位父级, 定位参照物 */
  74.          position: relative; 
  75.       }
  77.       body {
  78.         height: 500px;
  79.         border: 2px solid blue;
  80.         height: 2000px;
  81.       }
  84.     </style>
  85. </head>
  86. <body>
  87.     <div class="box">
  88.         <div class="box  child  box1  ">我是相对定位</div>
  89.         <div class="box  child box2">我是绝对定位</div>
  90.         <div class="box  child box3">我是固定定位</div>
  91.     </div>
  92. </body>
  93. </html>

粘性定位

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>我是粘性定位</title>
  8. <style>
  9.     * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13. .box{
  14.     position: relative;
  15.     background-color: lightcyan;
  16.     border: 5px solid brown dashed;
  17. }
  19. .box1{
  20.     background-color: blue;
  21. }
  22. .box div h2 {
  23.     /* 固定静态静态定位  */
  25.        /* position: static;
  26.         position: fixed;
  27.         top: 0;
  28.         right: 0;
  29.         left: 0;   */
  31.         /* 粘性定位 = 静态定义 + 固定定位 */
  32.         /* sticky = static + fixed  */
  33.          position: sticky;
  34.         /* 当到了top=0的位置时,就自动悬停住了,就像粘在那里一样 */
  35.        /* 注意必须跟top=0配合，不然不生效 */
  36.         top: 0; 
  37.       }
  38. </style>
  39. </head>
  40. <body>
  41.     <div class="box">
  42.         <div class="box1">
  43.             <h2>我是内容1标题</h2>
  44.         <p class="p1" style="background-color:yellow ;">我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  45.             我是内容1、我是内容1、我是内容2、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  46.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  47.             我是内容1、我是内容1、我是内容2、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  48.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  49.         </p></div>
  50.         <div class="box2">
  51.             <h2>我是内容2标题</h2>
  52.         <p class="p1" style="background-color:lightcoral ;" >我是内容2、我是内容2、我是内容2、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  53.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  54.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  55.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  56.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  57.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  58.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  59.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  60.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  61.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  62.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  63.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  64.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  65.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容内容1、我是内容2、我是内容2、我是内容2、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  66.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  67.         </p></div>
  68.         <div class="box3">
  69.             <h2>我是内容3标题</h2>
  70.         <p class="p1" style="background-color: brown;">我是内容3、我是内容3、我是内容3、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  71.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  72.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  73.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  74.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  75.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  76.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  77.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  78.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  79.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  80.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  81.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是我是内容3、我是内容3、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  82.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  83.         </p></div>
  84.         <div class="box4">
  85.             <h2>我是内容4标题</h2>
  86.         <p class="p1"  style="background-color: lawngreen">我是内内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  87.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  88.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  89.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  90.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  91.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容容4、我是内容4、我是内容4、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  92.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  93.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  94.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  95.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  96.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  97.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  98.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容是内容是内容4、我是内容4、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  99.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容是1、我是内容是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  100.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  101.         </p></div>
  102.         <div class="box5">
  103.             <h2>我是内容5标题</h2>
  104.         <p class="p1"  style="background-color: brown;">我是内容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  105.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  106.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  107.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  108.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  109.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  110.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  111.             我是内容1、我是内容1、我是内容1、我是内容1容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  112.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  113.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  114.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  115.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  116.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  117.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  118.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  119.         </p></div>
  120.     </div>
  121. </body>
  122. </html>


上一条：ExecStart=/usr/bin/dockerd (code=exited, status=1/FAILURE)下一条：0706作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多