FE_CSS 页面布局之定位

这篇具有很好参考价值的文章主要介绍了FE_CSS 页面布局之定位。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

FE_CSS 页面布局之定位

1 为什么需要定位

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

FE_CSS 页面布局之定位

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

FE_CSS 页面布局之定位
以上效果,标准流或浮动都无法快速实现,此时需要定位来实现。

  1. 浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子。
  2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。

2 定位组成

定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移 。
  1. 定位模式用于指定一个元素在文档中的定位方式。
  2. 边偏移则决定了该元素的最终位置。

FE_CSS 页面布局之定位
FE_CSS 页面布局之定位

3 相对定位 relative(重要)

相对定位是元素在移动位置的时候,是相对于它原来的位置来说的(自恋型)。

选择器 { position: relative; }

相对定位的特点:(务必记住)

  1. 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
  2. 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。
  3. 因此,相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

FE_CSS 页面布局之定位

<!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>

4 绝对定位 absolute(重要)

绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)。

选择器 { position: absolute; }

绝对定位的特点:(务必记住)

  1. 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document 文档)。
  2. 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级有定位祖先元素为参考点移动位置。
  3. 绝对定位不再占有原先的位置。(脱标)
  4. 所以绝对定位是脱离标准流的。

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

FE_CSS 页面布局之定位

4.2 绝对定位-父级有定位

FE_CSS 页面布局之定位

<!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: 400px;
            height: 400px;
            background-color: hotpink;
            padding: 50px;
        }

        .father {
            width: 300px;
            height: 300px;
            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>

5 子绝父相的由来

这个“子绝父相”太重要了,是我们学习定位的口诀,是定位中最常用的一种方式这句话的意思是:子级是绝对定位的话,父级要用相对定位。

  1. 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。
  2. 父盒子需要加定位限制子盒子在父盒子内显示。
  3. 父盒子布局时,需要占有位置,因此父亲只能是相对定位。
    这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级。总结: 因为父级需要占有位置,因此是相对定位, 子盒子不需要占有位置,则是绝对定位。当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到。

6 固定定位 fixed (重要)

固定定位是元素固定于浏览器可视区的位置。主要使用场景: 可以在浏览器页面滚动时元素的位置不会改变。

选择器 { position: fixed; }

固定定位的特点:(务必记住)

  1. 以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系;不随滚动条滚动。
  2. 固定定位不在占有原先的位置。固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位。
    FE_CSS 页面布局之定位
<!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="./image/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>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>
    <p>请尽情吩咐妲己,主人</p>

</body>
</html>

6.1 固定定位小技巧: 固定在版心右侧位置。

小算法:

  1. 让固定定位的盒子 left: 50%. 走到浏览器可视区(也可以看做版心) 的一半位置。
  2. 让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走版心宽度的一半位置。就可以让固定定位的盒子贴着版心右侧对齐了。

FE_CSS 页面布局之定位

<!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>

7 粘性定位 sticky(了解)

粘性定位可以被认为是相对定位和固定定位的混合。

选择器 { position: sticky; top: 10px; }

粘性定位的特点:

  1. 以浏览器的可视窗口为参照点移动元素(固定定位特点)
  2. 粘性定位占有原先的位置(相对定位特点)
  3. 必须添加 top 、left、right、bottom 其中一个才有效
  4. 跟页面滚动搭配使用。 兼容性较差,IE 不支持

FE_CSS 页面布局之定位

<!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>

8 定位叠放次序 z-index

在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用 z-index 来控制盒子的前后次序 (z轴)

选择器 { z-index: 1; }
  • 数值可以是正整数、负整数或 0, 默认是 auto,数值越大,盒子越靠上
  • 如果属性值相同,则按照书写顺序,后来居上
  • 数字后面不能加单位
  • 只有定位的盒子才有 z-index 属性

FE_CSS 页面布局之定位

<!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>

9 绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin:0 auto 水平居中,但是可以通过以下计算方法实现水平和垂直居中。

  1. left: 50%;:让盒子的左侧移动到父级元素的水平中心位置。
  2. 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>

10 定位特殊特性

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

  1. 行内元素添加绝对或者固定定位,可以直接设置高度和宽度。
  2. 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。

FE_CSS 页面布局之定位

11 脱标的盒子不会触发外边距塌陷

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

12 绝对定位(固定定位)会完全压住盒子

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

<!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>
        1993年,在古装片《战神传说》中扮演一个武功超群的渔民;同年,主演动作喜剧片《至尊三十六计之偷天换日》,在片中饰演赌术高明的千门高手钱文迪;此外,他还主演了爱情片《天长地久》,在片中塑造了一个风流不羁的江湖浪子形象。 1994年,刘德华投资并主演了剧情片《天与地》,在片中饰演面对恶势力却毫不退缩的禁毒专员张一鹏。1995年,主演赛车励志片《烈火战车》,在片中饰演叛逆、倔强的阿祖,并凭借该片获得第15届香港电影金像奖最佳男主角提名;同年在动作片《大冒险家》中演绎了立仁从小时候父母双亡到长大后进入泰国空军的故事。 1996年,主演黑帮题材的电影《新上海滩》,在片中饰演对冯程程痴情一片的丁力。1997年,担任剧情片《香港制造》的制作人;同年,主演爱情片《天若有情之烽火佳人》,在片中饰演家世显赫的空军少尉刘天伟;12月,与梁家辉联袂主演警匪动作片《黑金》,在片中饰演精明干练、嫉恶如仇的调查局机动组组长方国辉。1998年,主演动作片《龙在江湖》
        <img src="./image/img.jpg" alt="">
        ,饰演重义气的黑帮成员韦吉祥;同年,出演喜剧片《赌侠1999》;此外,他还担任剧情片《去年烟花特别多》的制作人。 1993年,在古装片《战神传说》中扮演一个武功超群的渔民;同年,主演动作喜剧片《至尊三十六计之偷天换日》,在片中饰演赌术高明的千门高手钱文迪;此外,他还主演了爱情片《天长地久》,在片中塑造了一个风流不羁的江湖浪子形象。 1994年,刘德华投资并主演了剧情片《天与地》,在片中饰演面对恶势力却毫不退缩的禁毒专员张一鹏。1995年,主演赛车励志片《烈火战车》,在片中饰演叛逆、倔强的阿祖,并凭借该片获得第15届香港电影金像奖最佳男主角提名;同年在动作片《大冒险家》中演绎了立仁从小时候父母双亡到长大后进入泰国空军的故事。 1996年,主演黑帮题材的电影《新上海滩》,在片中饰演对冯程程痴情一片的丁力。1997年,担任剧情片《香港制造》的制作人;同年,主演爱情片《天若有情之烽火佳人》,在片中饰演家世显赫的空军少尉刘天伟;12月,与梁家辉联袂主演警匪动作片《黑金》,在片中饰演精明干练、嫉恶如仇的调查局机动组组长方国辉。1998年,主演动作片《龙在江湖》,饰演重义气的黑帮成员韦吉祥;同年,出演喜剧片《赌侠1999》;此外,他还担任剧情片《去年烟花特别多》的制作人。
</body>
</html>

13 案例:淘宝焦点图布局

FE_CSS 页面布局之定位
FE_CSS 页面布局之定位文章来源地址https://www.toymoban.com/news/detail-417557.html

<!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="./image/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>

  1. 标准流 可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局。
  2. 浮动 可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局。
  3. 定位 定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就
    用定位布局。

到了这里,关于FE_CSS 页面布局之定位的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 为什么 Twitter 和 Facebook 的网站页面变得越来越像?

    Twitter和Facebook这两个社交媒体平台在不同的领域取得了巨大的成功。Twitter以其独特的推文形式而闻名,而Facebook则以其广泛的社交网络和内容分享功能而著称。 然而,近年来,这两个平台在设计和布局上的相似之处越来越明显。 为什么会出现这种情况呢? 本文将深入探讨其

    2024年02月08日
    浏览(54)
  • 为什么你永远不应该在CSS中使用px来设置字体大小

      代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。 在Josh Collinsworth的博客文章“永远不要用px作为字体大小”中,作者讨论了为什么不应该使用像素(px)作为网页字体大小的单

    2024年02月01日
    浏览(38)
  • MDK keil为什么设置代码自动补全功能页面空白,不是汉化问题造成的

    这个问题在论坛上已经有很多回答,例如 http://t.csdn.cn/jtdB9 http://t.csdn.cn/0jSfN http://t.csdn.cn/D2wlk 但大多数都忽略了另一个原因——打开了51工程。其中第三篇提到了这个原因,但解决方案不够准确。 我来说一下这个问题,如上所述,除了汉化原因外,还有一个重要原因就是Ke

    2024年02月13日
    浏览(63)
  • 开发者工具network里请求pending状态耗时长是为什么?(项目部分页面的请求)

    前言:本文主要是提问,后文有一个解决办法,但仅供参考 目录 问题 排查过程 解决办法(仅供参考) 提问:         在开发一个数字化大屏项目的时候遇到问题:某个大屏接口请求10多秒才能拿到响应数据,其他大屏页面接口响应很快。         发现主要是接口statu

    2023年04月08日
    浏览(61)
  • Angular 我在点击了上一页或者下一页方法之后,重新加载渲染数据。为什么还需要再点击一次页面的其他地方才会渲染出来?

    在你的 TypeScript 代码中,当调用 nextPage_TopSelling() 或 prevPage_TopSelling() 方法时,虽然你更新了 currentPage_TopSelling 的值并调用了 reloadTopSelling() 方法,但是 Angular 并不会自动检测到这些变化并重新渲染页面。这是因为 Angular 的变化检测机制是基于异步的,在一些情况下需要手动触

    2024年03月12日
    浏览(52)
  • HTML--CSS--浮动布局及定位布局

    块元素独占一行 行内元素在有多个的时候,就是从左到右排在一行 块元素包括: div , p , hr 行内元素: span , i , img float 属性: left 向左 right 向右 作用我目前看起来就是浮动元素的宽度是由内容决定的,而不是占满 效果: 但是需要注意,如果给定的宽度不够,效果会偏差:

    2024年01月19日
    浏览(59)
  • CSS布局基础(定位)

    如字面意思,定位的作用就是将元素,移动到指定的地方. 浮动一般用于横向排列块级元素;定位则可以让元素在盒子内自由移动或者固定在屏幕某个位置,并且可以将元素浮动起来 并且定位的浮动在 float 浮动之上 定位的优先级高于 margin 定位方式 值 说明 是否脱离文档流

    2024年02月02日
    浏览(25)
  • CSS新手入门笔记整理:CSS定位布局

    浮动布局比较灵活,但是不容易控制。而定位布局的出现,使得用户精准定位页面中的任意元素成为可能。当然了,由于定位布局缺乏灵活性,这给空间大小和位置不确定的版面布局带来困惑。因此在实际开发中,大家应该灵活使用这两种布局方式,这样才可以更好地满足开

    2024年02月04日
    浏览(40)
  • Netty为什么高效,为什么这么受欢迎?

    上篇文章通过 Java NIO 的处理流程与 Netty 的总体流程比较,并结合 Netty 的源码,可以更加清晰地理解Netty。本文将结合源码详细解析Netty的高效和强大功能的设计原理,学习 Netty 是如何实现其卓越的性能和功能特性,也希望可以在日后工作中利用到 Netty 的设计思想。 我们先看

    2024年02月12日
    浏览(68)
  • Redis—Redis介绍(是什么/为什么快/为什么做MySQL缓存等)

    一、Redis是什么 Redis 是一种 基于内存的数据库 ,对数据的读写操作都是在内存中完成,因此读写速度非常快,常用于 缓存,消息队列、分布式锁等场景 。         Redis 提供了多种数据类型来支持不同的业务场景,比如 String(字符串)、Hash(哈希)、 List (列表)、Set(集合)、

    2024年02月10日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包