ASCII码 ASCII码

定位布局的概念与实例

发布于：2022-07-13 13:09:43  栏目：技术文档

定位布局的概念与实例

  1. 概念：1.1 块（display-block）:矩形盒子-合模型，例：/table/table-cell,td/list-item/form/p/h1-h6/，边距均有效，宽：占用父级宽度的100%，高：内容来定，均可自定义；1.2 内联/行内（display-inline）：用来描述元素内部的内容/文本（span），上下边距无效，宽高：内容来定，均可自定义，可通过display转换内联为块（block），内联块（inline-block）并拥有对应的属性，其中内联块为水平排列，且宽高为内联属性，边距为块属性；

  2. 静态定位：元素position属性定义为static，默认值，文档流布局；2.1 盒子大小-高：内容来定，宽：占用父级元素宽度的100%；2.2 html默认的文档流布局，块-按照垂直排列，内联（块）：按照水平排列

  3. 相对定位：元素position属性定义为relative；3.1 盒子大小-高：内容来定，宽：占用父级元素宽度的100%，可定义；3.2 不需求定位父级，直接以直属父级元素定位；3.3 位置相对于直属父级元素定位，与其他标签无关；

  4. 绝对定位：元素position属性定义为absolute;4.1 盒子大小取决于文本大小，可定义；4.2 需求定位父级（position属性定位为static之外的属性的父级，一般定义为relative）；4.3 位置相对于定位父级进行变化，与其他标签无关；4.4 定位父级顺序：父级—>body标签—>html标签—>视口，除了视口，其他父级标签，均需定义position属性为relative/absolute/fixed之中任何一种即可，否则无法作为定位父级使用；4.5 相对于视口定位时，则与固定定位无差别；

  5. 固定定位：元素position属性定义为fixed5.1 盒子大小取决于文本大小，可定义；5.2 不需求定位父级；5.3 永远相对视口定位；

  6. 粘性定位：元素position属性定位为sticky6.1 盒子大小-高：内容来定，宽：占用父级元素宽度的100%，可定义；6.2 不需求定位父级；6.3 位置相对于直属父级元素定位，与其他标签无关；6.4 根据top，bottom设置(注：right,left对粘性定位无效)，同类元素决定定位在哪里，并通过背景色达到覆盖效果；

实例：

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. </head>
  9. <body>
  10.     <div class="boxgrandpa">这是爷爷
  11.         <div class="boxfather">这是爸爸
  12.             <div class="box1">这是案例1</div>
  13.             <div class="box2">这是案例2</div>
  14.             <div class="box3">这是案例3</div>
  15.         </div>
  16.     </div>
  17.     <div>
  18.         <h1 class="text" style="background-color: yellow;">标题1</h1>
  19.             <p>这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4</p>
  20.         <h1 class="text" style="background-color: red;">标题2</h1>
  21.             <p>这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4</p>
  22.         <h1 class="text" style="background-color: blue">标题3</h1>
  23.             <p>这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4</p>
  24.     </div>
  25.     <style>
  26.         .boxgrandpa {
  27.             border: 2px solid #000;
  28.             background-color: yellow;
  29.             width: 450px;
  30.             height: 450px;
  31.             font-size: 30px;
  32.             box-sizing: border-box;
  33.         }
  34.         .boxfather {
  35.             border: 2px solid #000;
  36.             background-color: aqua;
  37.             width: 400px;
  38.             height: 400px;
  39.             font-size: 30px;
  40.             box-sizing: border-box;
  41.         }
  43.         div div div {
  44.             border: 2px solid blue;
  45.         }
  47.         body {
  48.             position: relative;
  49.             margin: auto;
  50.             border: 1px solid black;
  51.             top: 20px;
  52.             width: 500px;
  53.             height: 500px;
  54.         }
  56.         html {
  57.             margin: auto;
  58.             border: 1px solid red;
  59.             width: 600px;
  60.             height: 600px;
  61.         }
  63.         .box1 {
  64.             /* 相对定位 */
  65.             position: relative;
  66.             top: 200px;
  67.             left: 50px;
  68.         }
  70.         .box2 {
  71.             /* 绝对定位 */
  72.             position: absolute;
  73.             top: 0px;
  74.             left: 150px;
  75.         }
  77.         .box3 {
  78.             /* 固定定位 */
  79.             position: fixed;
  80.             top:0;
  81.             left: 0;
  82.         }
  84.         body > div:nth-of-type(2) {
  85.             width: 300px;
  86.             height: 300px;
  87.             margin: auto;
  88.             border: 1px solid violet;
  89.             background-color: aquamarine;
  90.             overflow: auto;
  91.         }
  93.         body > div:nth-of-type(2) > h1 {
  94.             /* 粘性定位 */
  95.             position:sticky;
  96.             top:0px;
  97.         }
  98.     </style>
  99. </body>
  100. </html>

效果展示

这是案例1：相对定位-相对父级进行定位，父级并没有定义为定位父级；这是案例2：绝对定位-相对”这是爷爷”块进行定位，”这是爷爷”块被定义为定位父级；这是案例3：固定定位-相对视口进行定位，与其他元素无任何关系这是案例4：粘性定位-top:0px,则定位在父级元素上方不动，随着滚动条滑动，同类元素都定位至需求位置，通过背景色完成覆盖效果

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行