CSS入门五、定位

news2025/1/14 2:31:59

零、文章目录

文章地址

  • 个人博客-CSDN地址：https://blog.csdn.net/liyou123456789
  • 个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn

代码仓库地址

  • Gitee：https://gitee.com/bluecusliyou/TechLearn
  • Github：https://github.com/bluecusliyou/TechLearn

CSS入门五、定位

1、为什么需要定位

  • 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。

image-20221230172743795

  • 当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UufJXA5O-1673421752068)(http://cdn.bluecusliyou.com/202212301728027.png)]

  • 以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。

  • 浮动和定位区别：

    • 浮动：可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。

      • 定位：可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

2、定位组成

  • 定位将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
  • 定位 = 定位模式 + 边偏移 。

（1）定位模式

定位模式决定元素的定位方式 ，它通过 position 属性来设置，其值可以分为四个：

image-20221231083505703

（2）边偏移

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

image-20221231084841604

3、静态定位 static（了解）

  • 静态定位是元素的默认定位方式，无定位的意思。
  • 静态定位按照标准流特性摆放位置，它没有边偏移。
  • 静态定位在布局时很少用到。
选择器 { position: static; }

4、相对定位 relative（重要）

  • 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。
  • 相对定位的特点：（务必记住）
    • 移动位置的时候参照点是自己原来的位置。
    • 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
  • 因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。
选择器 { position: relative; }

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相对定位</title>
    <style>
        .box1 {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2">

    </div>
    
</body>
</html>

image-20221231152447093

5、绝对定位 absolute（重要）

  • 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

  • 绝对定位的特点：（务必记住）

    • 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位的。

    • 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点定位。

    • 绝对定位不再占有原先的位置。（脱标）

选择器 { position: absolute; }

绝对定位-无父亲或者父亲无定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位-无父亲或者父亲无定位</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .son {
            position: absolute;
            /* top: 10px;
            left: 10px; */
            /* top: 100px;
            right: 200px; */
            left: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
            <div class="son"></div>
    </div>
   
</body>
</html>

image-20230101104333242

绝对定位-父级有定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位-父级有定位</title>
    <style>
        .yeye {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: hotpink;
            padding: 50px;
        }
        .father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .son {
            position: absolute;
            left: 30px;
            bottom: 10px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="yeye">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>

image-20230101104552457

6、子绝父相的由来

  • 子级是绝对定位的话，父级要用相对定位。

    • 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

    • 父盒子需要加定位限制子盒子在父盒子内显示。

    • 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

  • 当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

学成网综合案例加上hot

.box-bd ul li {
    /* 子绝父相 */
    position: relative;
    float: left;
    width: 228px;
    height: 270px;
    background-color: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
}
.box-bd ul li > img {
    width: 100%;
}
.box-bd ul li h4 {
    margin: 20px 20px 20px 25px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}
.box-bd ul li em {
    position: absolute;
    top: 4px;
    right: -4px;
}

<li>
    <em>
        <img src="images/hot.png" alt="">
    </em>
    <img src="images/pic.png" alt="">
    <h4>
        Think PHP 5.0 博客系统实战项目演练
    </h4>
    <div class="info">
        <span>高级</span> • 1125人在学习
    </div>
</li>

image-20230101110521478

7、固定定位 fixed （重要）

  • 固定定位是元素固定于浏览器可视区(浏览器显示内容的窗口)的位置。
  • 主要使用场景： 在浏览器页面滚动时元素的位置不变（广告栏之类）。
  • 固定定位的特点：（务必记住）
    • 以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系，不随滚动条滚动。
    • 固定定位不占有原先的位置。固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
  • 固定定位小技巧： 固定在版心右侧位置。
    • 让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心） 的一半位置。
    • 让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

固定定位案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>固定定位</title>
    <style>
        .dj {
            position: fixed;
            top: 100px;
            left: 40px;
        }
    </style>
</head>

<body>
    <div class="dj">
        <img src="images/pvp.png" alt="">
    </div>
    <p>页面内容来衬托图片位置</p>
    <p>页面内容来衬托图片位置</p>
    <p>页面内容来衬托图片位置</p>
    <p>页面内容来衬托图片位置</p>
    <p>页面内容来衬托图片位置</p>
    <p>页面内容来衬托图片位置</p>
    <p>页面内容来衬托图片位置</p>
    <p>页面内容来衬托图片位置</p>
    <p>页面内容来衬托图片位置</p>
    <p>页面内容来衬托图片位置</p>
    <p>页面内容来衬托图片位置</p>
</body>

</html>

image-20230101112415055

固定到版心右侧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>固定定位小技巧-固定到版心右侧</title>
    <style>
        .w {
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }
        .fixed {
            position: fixed;
            /* 1. 走浏览器宽度的一半 */
            left: 50%;
            /* 2. 利用margin 走版心盒子宽度的一半距离 */
            margin-left: 405px;
            width: 50px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>
</body>
</html>

image-20230101112642364

8、粘性定位 sticky（了解）

  • 粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的。
  • 粘性定位的特点：
    • 以浏览器的可视窗口为参照点移动元素（固定定位特点）。
    • 粘性定位占有原先的位置（相对定位特点）。
    • 必须添加 top 、left、right、bottom 其中一个才有效。
  • 跟页面滚动搭配使用。 兼容性较差，IE 不支持。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>粘性定位</title>
    <style>
        body {
            height: 3000px;
        }
        .nav {
            /* 粘性定位 */
            position: sticky;
            top: 0;
            width: 800px;
            height: 50px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="nav">我是导航栏</div>
</body>
</html>

滚轮向下，内容保持不动。

image-20230101162712934

9、 定位的总结

  • 一定记住相对定位、固定定位、绝对定位两个大的特点：

    • 是否占有位置（脱标否）

    • 以谁为基准点移动位置。

  • 学习定位重点学会子绝父相。

image-20230101162924947

10、定位叠放次序 z-index

  • 在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)。
  • 数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上。
  • 如果属性值相同，则按照书写顺序，后来居上。
  • 数字后面不能加单位。
  • 只有定位的盒子才有 z-index 属性。
选择器 { z-index: 1; }

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定位的堆叠顺序</title>
    <style>
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        .xiongda {
            background-color: red;
            z-index: 1;
        }
        .xionger {
            background-color: green;
            left: 50px;
            top: 50px;
            z-index: 2;
        }
        .qiangge {
            background-color:blue;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div class="box xiongda">熊大</div>
    <div class="box xionger">熊二</div>
    <div class="box qiangge">光头强</div>
</body>
</html>

image-20230101163758979

11、绝对定位的盒子居中

  • 加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
    • left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。
    • margin-left: -100px;：让盒子向左移动自身宽度的一半。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位水平垂直居中</title>
    <style>
        .box {
            position: absolute;
            /* 1. left 走 50%  父容器宽度的一半 */
            left: 50%;
            /* 2. margin 负值 往左边走 自己盒子宽度的一半 */
            margin-left: -100px;
            top: 50%;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
            /* margin: auto; */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

image-20230101164636118

12、定位元素特殊特性

  • 绝对定位和固定定位也和浮动类似。

    • 块级元素添加绝对或者固定定位，不设宽度或者高度，默认大小是内容的大小。

  • 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定位元素特殊特性</title>
    <style>
        div {
            position: absolute;
            background-color: skyblue;
        }
        span {
            position: absolute;
            top: 300px;
            width: 200px;
            height: 150px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>abcd</div>
    <span>123</span>
</body>
</html>

image-20230101172008458

13、脱标盒子不会外边距塌陷

  • 浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。

14、绝对定位和浮动的区别

  • 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。
  • 但是绝对定位（固定定位） 会压住下面标准流所有的内容。
  • 浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素。

浮动产生原来的目的是做文字环绕效果案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动产生原来的目的是做文字环绕效果</title>
    <style>
        img {
            float: left;
        }
    </style>
</head>

<body>
    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文<img src="images/img.jpg" alt="">字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文。
</body>

</html>

image-20230101172851095

绝对定位会完全压住标准流盒子内容案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位会完全压住标准流盒子内容</title>
    <style>
        .box {
            /* 1.浮动的元素不会压住下面标准流的文字 */
            /* float: left; */
            /* 2. 绝对定位（固定定位） 会压住下面标准流所有的内容。 */
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <p>阁下何不同风起，扶摇直上九万里</p>
</body>
</html>

image-20230101201221610

15、综合案例–轮播图

image-20230101201327911

（1）布局制作

  1. 大盒子我们类名为 tb-promo 淘宝广告。

  2. 里面先放一张图片。

  3. 左右两个按钮 用链接就好了。 左箭头 prev 右箭头 next 。

  4. 底侧小圆点用ul 做。 类名为 promo-nav 。

（2）代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淘宝轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }

        .tb-promo {
            position: relative;
            width: 520px;
            height: 280px;
            background-color: pink;
            margin: 100px auto;
        }

        .tb-promo img {
            width: 520px;
            height: 280px;
        }

        /* 并集选择器可以集体声明相同的样式 */
        .prev,
        .next {
            position: absolute;
            /* 绝对定位的盒子垂直居中 */
            top: 50%;
            margin-top: -15px;
            /* 加了绝对定位的盒子可以直接设置高度和宽度 */
            width: 20px;
            height: 30px;
            background: rgba(0, 0, 0, .3);
            text-align: center;
            line-height: 30px;
            color: #fff;
            text-decoration: none;
        }

        .prev {
            left: 0;
            /* border-radius: 15px; */
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        .next {
            /* 如果一个盒子既有left属性也有right属性，则默认会执行 left属性 同理  top  bottom  会执行 top */
            right: 0;
            /* border-radius: 15px; */
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }
        .promo-nav {
            position: absolute;
            bottom: 15px;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            /* background-color: pink; */
            background: rgba(255,255,255, .3);
            border-radius: 7px;
        }
        .promo-nav li {
            float: left;
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
            margin: 3px;
        }
        /* 不要忘记选择器权重的问题 */
       .promo-nav .selected {
            background-color: #ff5000;
        }
    </style>
</head>

<body>
    <div class="tb-promo">
        <img src="images/tb.jpg" alt="">
        <!-- 左侧按钮箭头 -->
        <a href="#" class="prev"> &lt; </a>
        <!-- 右侧按钮箭头 -->
        <a href="#" class="next"> &gt; </a>
        <!-- 小圆点 -->
        <ul class="promo-nav">
            <li class="selected"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

image-20230101205105182

16、网页布局总结

  • 通过盒子模型，清楚知道大部分html标签是一个盒子。
  • 一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。
  • 标准流：可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
  • 浮动：可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
  • 定位：定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/156288.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Revit出图问题：打印机中新建纸张尺寸？批量导出图纸？

Revit出图问题：打印机中新建纸张尺寸？批量导出图纸？

一、Revit中在打印机中新建纸张尺寸 Revit导出PDF图纸&#xff0c;如何在打印机中新建纸张的尺寸&#xff1f; 在导出PDF的时候&#xff0c;我们需要将图纸放在合适的纸张页面上&#xff0c;而这个时候系统又没有提供所需的页面尺寸&#xff0c;如图1所示。 这种情况下我们该如…
阅读更多...
数据结构学习笔记——二叉排序树

数据结构学习笔记——二叉排序树

目录一、二叉排序树的定义二、二叉排序树的插入和构造三、二叉排序树的查找四、二叉排序树的平均查找长度五、二叉排序树的删除六、二叉排序树和二分查找对比二叉排序树的查找过程与折半查找&#xff08;二分查找&#xff09;相似&#xff0c;即折半查找的判定树就是一棵二叉排…
阅读更多...
【安卓学习笔记】界面编程入门

【安卓学习笔记】界面编程入门

安卓应用采用View组件进行界面布局&#xff0c;可以通过两种方式进行布局&#xff0c;分别是XML文件和Java代码。 其中采用XML文件进行布局是较好的方式&#xff0c;因为这样可以将XML文件和Java代码分开编写&#xff0c;使得项目结构变得更加清晰。 简单的图片浏览器 下面是…
阅读更多...
git仓库清理瘦身解决 .git文件夹过大的问题

git仓库清理瘦身解决 .git文件夹过大的问题

git仓库清理找了很多资料和方案都没有很完美执行成功的&#xff1b;现在找到一个完美方案&#xff0c;分享给大家&#xff1b;希望能帮助大家 问题 1、gitlab代码开发了仓库开发了五年了&#xff0c;代码只有10M&#xff1b;clone的时候要700多兆很浪费时间 2、创建分支和切换…
阅读更多...
Java泛型通配符的使用

Java泛型通配符的使用

目录 泛型在继承方面的体现 类A是类B的父类&#xff0c;G和G二者不具有子父类关系&#xff0c;二者是并列关系 类A是类B的父类&#xff0c;A是B的父类 通配符的使用 类A是类B的父类&#xff0c;G和G是没有关系的&#xff0c;二者共同父类是:G 使用通配符后&#xff0c;数…
阅读更多...
Linux学习记录——칠 git、gdb部分基础知识以及进度条小程序

Linux学习记录——칠 git、gdb部分基础知识以及进度条小程序

文章目录一、/r/n二、简单理解缓冲区概念三、进度条四、了解git五、初步学会使用gdb1、背景知识2、部分简单指令一、/r/n 在写小程序之前&#xff0c;我们先看一下/r和/n的区别。 /n我们遇到过&#xff0c;它叫做换行符。/r并不知道是什么符号。实际应用中&#xff0c;/n可以起…
阅读更多...
鲍春健：从“走进客户”奔向“成为客户”

鲍春健：从“走进客户”奔向“成为客户”

站在当下来看&#xff0c;小鹅通的服务力的特殊性在于其可以穿透三层&#xff0c;即以自身的服务力赋能客户的服务力。其中&#xff0c;一层是客户&#xff1b;一层是客户的服务&#xff1b;一层是客户的客户。 作者|斗斗 出品|产业家 累计终端用户数达8.2亿、最高日活14…
阅读更多...
mysql系列之索引(待续)

mysql系列之索引(待续)

目录一、索引简述1、什么叫索引2、索引的优缺点3、索引的使用场景二、索引的算法1、线性查找 Linear Search2、二分查找 Binary Search3、二叉查找树 Binary Search Tree4、平衡二叉树 AVL Tree5、B树6、B树三、B树和B树的理解1、B树和B树的区别2、数据库为什么使用B树而不是B树…
阅读更多...
第二章.线性回归以及非线性回归—一元线性回归，代价函数，相关系数，决定系数

第二章.线性回归以及非线性回归—一元线性回归，代价函数，相关系数，决定系数

第二章.线性回归以及非线性回归 2.1 一元线性回归 1.概念&#xff1a; 1).自变量&#xff1a; 被用来进行预测的变量&#xff0c;相当于输入 2).因变量&#xff1a; 被预测的变量&#xff0c;相当于输出 3).回归分析&#xff1a; 用来建立方程模拟两个或者多个变量之间如何关…
阅读更多...
从零开始学习Maven

从零开始学习Maven

maven Maven是apache公司开发的基于项目对象模型&#xff08;POM&#xff09; 可以通过一些描述信息来管理项目的构建、报告和文档的软件管理工具。 Maven 是用来管理项目&#xff0c;进行项目构建的一个软件。 java编写 项目构建流程&#xff1a; 1. 导入jar包 2. 配置文…
阅读更多...
【MyBatis】RC隔离级别下，MyBatis 一级缓存、二级缓存造成的不一致情况

【MyBatis】RC隔离级别下，MyBatis 一级缓存、二级缓存造成的不一致情况

前言 数据库的MVCC 及 锁机制保证了数据的隔离、一致性。而建立在数据库之上的缓存&#xff0c;都会破坏掉数据库的一致性保障。本文探索在RC隔离级别下&#xff0c;MyBatis 一级缓存、二级缓存造成的坑。顺便复习一下 Spock 的用法&#xff0c;更加体验到了 Groovy 清爽的语法…
阅读更多...
insert唯一索引加锁流程

insert唯一索引加锁流程

MySQL版本&#xff1a;8.0.29 测试表&#xff1a; 测试数据&#xff1a; 开始测试&#xff1a; 事务1执行 加锁分析&#xff1a; mysql> SELECT * FROM performance_schema.data_locks\G *************************** 1. row ***************************ENGINE: INNO…
阅读更多...
Express 中使用JWT进行登录验证

Express 中使用JWT进行登录验证

cookie 篇 : Node.js 中 cookie的验证登录 | session 篇 : Node.js 中 session验证登录 在前面讲过了两种验证登录的方式&#xff0c;其一是cookie&#xff0c;其二是session&#xff1b;那么在讲JWT之前先来简单的回顾这两种方式区别&#xff1b;cookie和sessi…
阅读更多...
Java笔记023-包装类、String类、字符串的特性、String类、StringBuffer类、StringBuilder类

Java笔记023-包装类、String类、字符串的特性、String类、StringBuffer类、StringBuilder类

常用类包装类包装类的分类1、针对八种基本定义相应的引用类型-包装类2、有了类的特点&#xff0c;就可以调用类中的方法基本数据类型包装类booleanBooleancharCharacterbyteByteshortShortintIntegerlongLongfloatFloatdoubleDouble包装类和基本数据的转换演示包装类和基本数据…
阅读更多...
LInux目录结构

LInux目录结构

文章目录Linux的目录结构Linux的目录结构Linux路径的描述方式目录各功能介绍HOME目录和工作目录Linux的目录结构 Linux的目录结构 Linux的目录结构是一个树型结构。 Windows 系统可以拥有多个盘符, 如 C盘、D盘、E盘 Linux没有盘符这个概念, 只有一个根目录 /, 所有文件都在…
阅读更多...
【UE4 第一人称射击游戏】37-拾取副武器“M4A1”

【UE4 第一人称射击游戏】37-拾取副武器“M4A1”

上一篇&#xff1a;【UE4 第一人称射击游戏】36-切换武器时改变UI本篇效果&#xff1a;在拾取副武器“M4A1”前&#xff0c;点击键盘2键是无法切换武器的&#xff0c;当拾取武器后&#xff0c;点击键盘2键可以切换武器&#xff08;目前仅是右下角的图标和文字实现了切换&#x…
阅读更多...
VBA小模板，一个不放回的抽奖用的例子

VBA小模板，一个不放回的抽奖用的例子

1 问题 一个不放回的抽奖用VBA怎么写&#xff0c;下面用一个类似对对碰/ 翻牌子的游戏&#xff08;抽到的奖励不放回&#xff0c;可抽的东西越来越少&#xff09;来举例说明 1.1 首先要回顾下几个经典的随机模型 古典概型&#xff0c;重点就是每次抽奖的各个奖品&#xff0c;概…
阅读更多...
宇视门禁一体机接线图

宇视门禁一体机接线图

宇视门禁一体机接线图宇视门禁一体机带反馈信号电磁锁接线图门禁的GND线通用&#xff0c;可以连到同一根线上&#xff0c;也可以分开连简单整理如图一体机线颜色和功能对应表颜色线路绿色RS485_A粉色RS485_B黑色GND蓝色WIEGAND_OUT_D0白色WIEGAND_OUT_D1灰色WIEGAND_IN_D0棕色W…
阅读更多...
测试面试真题|工作2年，从小厂到大厂，薪资翻倍是怎样的体验？

测试面试真题|工作2年，从小厂到大厂，薪资翻倍是怎样的体验？

最近&#xff0c;霍格沃兹测试学院学员 C 同学成功拿下某互联网大厂年薪 30W 测试开发岗位 Offer&#xff0c;顺利完成从手工测试工程师到测试开发的逆袭&#xff0c;薪资翻倍&#xff08;涨幅 100%&#xff09;&#xff0c;并获得了学院颁发的优秀学员奖学金。C 同学工作刚满 …
阅读更多...
【3D目标检测】Delving into Localization Errors for Monocular 3D Object Detection

【3D目标检测】Delving into Localization Errors for Monocular 3D Object Detection

目录概述细节错误分析概述 本文是基于单目图像的3D目标检测方法。 【2021】【MonoDLE】 研究的问题: 核心问题&#xff1a;如何提高基于单目图像的3D目标检测的效果。作者量化了每个子任务的整体影响&#xff0c;观察到以下现象 观察一&#xff1a;定位误差是制约目标检测性…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023