定位布局的概念与实例

概念：
1.1 块（display-block）:矩形盒子-合模型，例：/table/table-cell,td/list-item/form/p/h1-h6/，边距均有效，宽：占用父级宽度的100%，高：内容来定，均可自定义；
1.2 内联/行内（display-inline）：用来描述元素内部的内容/文本（span），上下边距无效，宽高：内容来定，均可自定义，可通过display转换内联为块（block），内联块（inline-block）并拥有对应的属性，其中内联块为水平排列，且宽高为内联属性，边距为块属性；
静态定位：元素position属性定义为static，默认值，文档流布局；
2.1 盒子大小-高：内容来定，宽：占用父级元素宽度的100%；
2.2 html默认的文档流布局，块-按照垂直排列，内联（块）：按照水平排列
相对定位：元素position属性定义为relative；
3.1 盒子大小-高：内容来定，宽：占用父级元素宽度的100%，可定义；
3.2 不需求定位父级，直接以直属父级元素定位；
3.3 位置相对于直属父级元素定位，与其他标签无关；
绝对定位：元素position属性定义为absolute;
4.1 盒子大小取决于文本大小，可定义；
4.2 需求定位父级（position属性定位为static之外的属性的父级，一般定义为relative）；
4.3 位置相对于定位父级进行变化，与其他标签无关；
4.4 定位父级顺序：父级—>body标签—>html标签—>视口，除了视口，其他父级标签，均需定义position属性为relative/absolute/fixed之中任何一种即可，否则无法作为定位父级使用；
4.5 相对于视口定位时，则与固定定位无差别；
固定定位：元素position属性定义为fixed
5.1 盒子大小取决于文本大小，可定义；
5.2 不需求定位父级；
5.3 永远相对视口定位；
粘性定位：元素position属性定位为sticky
6.1 盒子大小-高：内容来定，宽：占用父级元素宽度的100%，可定义；
6.2 不需求定位父级；
6.3 位置相对于直属父级元素定位，与其他标签无关；
6.4 根据top，bottom设置(注：right,left对粘性定位无效)，同类元素决定定位在哪里，并通过背景色达到覆盖效果；

实例：

html源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局总结与案例</title>
</head>
<body>
    <div class="boxgrandpa">这是爷爷
        <div class="boxfather">这是爸爸
            <div class="box1">这是案例1</div>
            <div class="box2">这是案例2</div>
            <div class="box3">这是案例3</div>
        </div>
    </div>
    <div>
        <h1 class="text" style="background-color: yellow;">标题1</h1>
            <p>这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4</p>
        <h1 class="text" style="background-color: red;">标题2</h1>
            <p>这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4</p>
        <h1 class="text" style="background-color: blue">标题3</h1>
            <p>这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4这个案例4</p>
    </div>
    <style>
        .boxgrandpa {
            border: 2px solid #000;
            background-color: yellow;
            width: 450px;
            height: 450px;
            font-size: 30px;
            box-sizing: border-box;
        }
        .boxfather {
            border: 2px solid #000;
            background-color: aqua;
            width: 400px;
            height: 400px;
            font-size: 30px;
            box-sizing: border-box;
        }
        div div div {
            border: 2px solid blue;
        }
        body {
            position: relative;
            margin: auto;
            border: 1px solid black;
            top: 20px;
            width: 500px;
            height: 500px;
        }
        html {
            margin: auto;
            border: 1px solid red;
            width: 600px;
            height: 600px;
        }
        .box1 {
            /* 相对定位 */
            position: relative;
            top: 200px;
            left: 50px;
        }
        .box2 {
            /* 绝对定位 */
            position: absolute;
            top: 0px;
            left: 150px;
        }
        .box3 {
            /* 固定定位 */
            position: fixed;
            top:0;
            left: 0;
        }
        body > div:nth-of-type(2) {
            width: 300px;
            height: 300px;
            margin: auto;
            border: 1px solid violet;
            background-color: aquamarine;
            overflow: auto;
        }
        body > div:nth-of-type(2) > h1 {
            /* 粘性定位 */
            position:sticky;
            top:0px;
        }
    </style>
</body>
</html>

效果展示

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

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

markdown以及emmet语法

2022-07-03 15:55:17