CSS基础（2）

已于 2022-02-10 17:18:11 修改
阅读量95 收藏 1
点赞数
文章标签： css css3 html5
于 2022-02-10 16:41:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52197531/article/details/122864227
版权

1.CSS 的复合选择器

文章目录

1.1什么是复合选择器

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

  • 复合选择器可以更准确、更高效的选择目标元素（标签)
  • 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
  • 常用的复合选择器包括∶后代选择器、子选择器、并集选择器、伪类选择器等等

1.2后代选择器（重要）

​ 后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：

元素1 元素2 {样式说明}

上述语法表示选择元素1里面的所有元素2(后代元素)。

例如：

ul li{样式声明}/* 选择ul里面的所有li标签元素 */
  • 元素1和元素2用==空格隔开==。
  • 元素1是父级，元素2是子级，最终选择的是元素2
  • 元素2可以是儿子，也==可以是孙子==等，只要是元素1的后代即可
  • 元素1和元素2可以是任意基础选择器
<!DOCTYPE html>
<html lang="en">

<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>
    <style>
        /* 我想把ul里面的小li选择出来改为red */
        
        ul li {
            color: red;
        }
        /* 我想把nav里面的li里面的a改为pink */
        
        .nav li a {
            color: pink;
        }
        /* 我想把ul里面的li里面的a改为green */
        
        ul li a {
            color: green;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">我是ul的孙子</a></li>
    </ul>
    <ul class="nav">
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">我是ul的孙子</a></li>
    </ul>
    <ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
    </ol>
</body>

</html>

在这里插入图片描述

1.3 子选择器（重要）

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.

语法：

元素1>元素2{样式声明}

上述语法表示选择元素1里面的所有直接后代(子元素)元素2。

例如：

div>p{样式声明}	/* 选择div里面所有最近一级p标签元素 */
  • 元素1和元素2中间用==大于号==隔开
  • 元素1是父级，元素2是子级，最终选择的是元素2
  • 元素2==必须是亲儿子==，其孙子、重孙之类都不归他管。你也可以叫他亲儿子选择器。
<!DOCTYPE html>
<html lang="en">

<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>
    <style>
        .nav>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

</html>

在这里插入图片描述

1.4 并集选择器（重要）

并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明.
并集选择器是各选择器通过英文逗号(，)连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1,元素2{样式申明}

上述语法表示选择元素1和元素2。

例如：

ul,div{样式声明}	/* 选择ul和div标签元素 */
  • 元素1和元素2中间用==逗号隔开==
  • 都好可以理解为和的意思
  • 并集选择器通常用于集体声明
<!DOCTYPE html>
<html lang="en">

<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>
    <style>
        /*要求2:请把熊大和熊二改为粉色还有小猪一家改为绿色*/
        
        div,
        p,
        .pig li {
            color: green;
        }
        /*约定的语法规范,我们并集选择器喜欢竖着写*/
        /*一定要注意,最后一个选择器不需要加逗号*/
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>佩奇爸爸</li>
        <li>佩奇妈妈</li>
    </ul>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bgt2S2ly-1644482446520)(E:/Typora/%E5%9B%BE%E7%89%87/image-20211024210616269.png)]

1.5 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用==冒号(😃==表示，比如:hover 、:first-child 。

因为伪类选择器很多，比如有链接伪类、结构伪类等。

1.5.1 链接伪类选择器
a:link			/*选择所有未被访问的链接*/
a:visited		/*选择所有已被访问的链接*/
a:hower			/*选择鼠标指针位于其上的链接*/
a:active		/*选择活动链接（鼠标按下未弹起的链接）*/

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

<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>
    <style>
        /* 未被访问的链接 a:link */
        
        a:link {
            color: green;
            text-decoration: none;
        }
        /* 已被访问的链接 a:visited */
        
        a:visited {
            color: indianred;
        }
        /* 鼠标经过的链接  a:hower */
        
        a:hover {
            color: lawngreen;
        }
        /* 鼠标按下未弹起的链接  a:active */
        
        a:active {
            color: yellow;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="#">熊大</a>
</body>

</html>

链接伪类选择器注意事项
1.为了确保生效，请按照LVHA的循顺序声明:link - :visited - :hover - :active。

3.因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

/* a是标签选择器所有的链接*/a 
a{
	color: gray;
}

/*:hover是链接伪类选择器  鼠标经过*/
a:hover{
	color: red;  /* 鼠标经过的时候，由原来的灰色变成了红色*/
}
1.5.2 :focus 伪类选择器

:focus 伪类选择器用于选取获得表单的表单元素。

焦点就是光标，一般情况< input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input:focus{
	background-color:yellow;
}

例如：

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

<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>focus选择器</title>
    <style>
        /* 把获得光标的input表单选元素取出来,就是你鼠标点击哪一个input框，
        哪一个文本框就会变为粉色   :focus */
        
        input:focus {
            background-color: pink;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LGMNc72L-1644482446521)(E:/Typora/%E5%9B%BE%E7%89%87/image-20211025085010873.png)]

1.5.3 复合选择器总结
选择器作用特征使用情况隔开符号和用法
后代选择器用于选择后代元素可以是子孙后代较多空格 .a .div
子代选择器用于选择最近的一代只能是儿子代较少大于号 nav>p
并集选择器用于选择某些有相同样式的元素用于集体声明较多逗号 .a,.nav,div
链接伪类选择器选择不同状态的链接跟链接相关较多按照LVHA的循顺序声明
:focus 选择器选择获得光标的表单跟表单相关较少input:focus{}

2.元素的显示模式

2.1 什么是元素显示模式

元素显示模式就是元素(标签）以什么方式进行显示，比如< div>自己占一行，比如一行可以放多个< span>。

HTML 元素一般分为两种：块元素和行内元素。

2.2 块元素

常见的块元素有< h1>~< h6>、< p>、< div>、< ul>、< ol>、< li>等，其中**< div>标签是最典型的块元素**。
块级元素的特点︰
1.比较霸道，自己独占一行。

2.高度，宽度、外边距以及内边距都可以控制。

3.宽度默认是容器（父级宽度)的100%。

4.是一个容器及盒子，里面可以放行内或者块级元素。

2.3 行内元素

常见的行内元素有< a>、< strong>、< b>、< em>、< i>、< del>、< s>、< ins>、< U>.< a>，< span>等，其中**< span>标签是最典型的行内元素**。有的地方也将行内元素称为内联元素。

行内元素的特点∶

1.相邻行内元素在一行上，一行可以显示多个.

2.高、宽直接设置是无效的.

3.默认宽度就是它本身内容的宽度.

4.行内元素只能容纳文本或其他行内元素.

注意：

  • 链接里面不能再放链接
  • 特殊情况链接< a>里面可以放块级元素，但是给< a>转换一下块级模式最安全

2.4 行内块元素

在行内元素中有几个特殊的标签——< img />、< input />、< td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

特点：

  1. 和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
  2. 默认宽度就是它本身内容的宽度（行内元素特点)。
  3. 高度，行高、外边距以及内边距都可以控制(块级元素特点)。

2.5 元素显示模式总结

元素模式元素排列设置样式默认宽度包含
块级元素一行只能放一个块级元素可以设置宽高度容器的100%可以包含任何标签
行内元素一行可以放多个行内元素不可以直接设置宽高它本身容器的宽度容纳文本和其他行内元素
行内块元素一行可以放多个行内块元素可以设置宽高他本身容器的宽度

2.6 元素显示模式的转换

特殊情况下，我们需要元素模式的转换，简单理解一个模式的元素需要另外一种模式的特性。比如想要增加链接< a>的触发范围。

行内元素转换为块元素：display:block;

块级元素转换为行内元素：display.inline;

转换为行内块元素：display: inline-block;

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

<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>
    <style>
        /* 把行内元素 a 转换为 块级元素  display:block */
        
        a {
            width: 300px;
            height: 60px;
            background-color: pink;
            display: block;
        }
        /* 吧块级元素转换为行内元素  display:inline */
        
        div {
            width: 200px;
            height: 100px;
            background-color: plum;
            display: inline;
        }
        /* 吧行内元素转换为行内块元素  display:inline-block */
        
        span {
            width: 300px;
            height: 100px;
            background-color: red;
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">我是行内元素转换为块级元素</a>
    <div>我是块级元素转换为行内元素</div>
    <span>我是行内元素装换为行内块元素</span>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-809ZMatB-1644482446522)(E:/Typora/%E5%9B%BE%E7%89%87/image-20211026161510682.png)]

2.7 案例

代码：

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

<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>
    <style>
        /* 吧a转换为块级元素 */
        
        a {
            display: block;
            width: 230px;
            height: 40px;
            color: white;
            background-color: rgb(83, 87, 88);
            font-size: 14px;
            text-indent: 2em;
            text-decoration: none;
        }
        /* 鼠标经过时背景颜色改变 用伪类选择器*/
        
        a:hover {
            width: 230px;
            height: 40px;
            background-color: rgb(254, 103, 0);
        }
    </style>
</head>

<body>
    <a href="# ">手机 电话卡</a>
    <a href="# ">电视 盒子</a>
    <a href="# ">笔记本 平板</a>
    <a href="# ">出行 穿戴</a>
    <a href="# ">智能 路由器</a>
</body>

</html>

在这里插入图片描述

3.CSS 的背景

通过CSS背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

3.1 背景颜色

background-color 属性定义了元素的背景颜色

background-color:颜色值;

一般情况下元素背景颜色默认值是transparent(透明），我们也可以手动指定背景颜色为透明色。

3.2 背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置.(精灵图也是一种运用场景)

background-image : none | url (url)
参数值作用
none无背景图（默认）
url使用绝对或者相对地址指定背景图片

3.3 背景平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用==background-repeat==属性

background-repeat:repeat | no-repeat | repeat-x | repeat-y

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kWXyjuiH-1644482446524)(…/%E5%9B%BE%E7%89%87/image-20211029151314500.png)]

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

<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>
    <style>
        div {
            width: 700px;
            height: 700px;
            background-image: url(img/QQ截图20211029150838.png);
            /* 1.背景图片不平铺 */
            /* background-repeat: no-repeat; */
            /* 2.默认情况就是平铺的 */
            /* background-repeat: repeat; */
            /* 3.沿着X轴平铺 */
            /* background-repeat: repeat-x; */
            /* 4.沿着Y轴平铺 */
            background-repeat: repeat-y;
        }
    </style>
</head>

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

</html>
参数值作用
repeat背景图片在纵向和横向平铺（默认的）
no-repeat背景图片不平铺
repeat- x背景图片在X轴方向平铺
repeat- y背景图片在Y轴方向平铺

注：1.平铺就是当你的图片不够容器时，进行复制重现。

​ 2.页面元素及可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色。

3.4 背景图片位置

利用==background-position==属性可以改变图片在背景中的位置。

background-position : x y;

参数代表的意思是:x坐标和y坐标。可以使用方位名词或者精确单位

参数值说明
length百分数|px|数字
positiontop|center|bottom|left|right 方位名词
3.4.1 参数是方位名词
  • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
  • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9MEOLSM0-1644482446525)(…/%E5%9B%BE%E7%89%87/image-20211029153446271.png)]

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

<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>
    <style>
        div {
            width: 700px;
            height: 700px;
            background-image: url(img/QQ截图20211029150838.png);
            background-color: pink;
            background-repeat: no-repeat;
            /* background-position: 方位名词; （没有顺序）*/
            /* background-position: center top; */
            /* background-position: top center; */
            /* 只写一个方位名词，另一个默认垂直居中显示 */
            /* background-position: top; */
            background-position: right;
        }
    </style>
</head>

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

</html>
3.4.2 参数是精确单位
  • 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
  • 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
3.4.3 参数是混合单位

第一个值一定是控制X轴的，第二个值一定是控制Y轴的

3.5 背景图像固定（背景附着）

==background-attachment==属性设置图像是否固定或者随着页面的其余部分滚动。

background-attachment后期可以制作视察滚动效果。

background-attachment:scroll || fixed;
参数作用
scroll背景图像随着对象内容滚动
fixed背景图像固定

3.6背景色半透明

background:rgba(0,0,0,0.3);
  • 最后一个参数是alpha透明度，取值范围在0~1之间，0为全透明，1为不透明。
  • 我们习惯把0.3的0省略掉，写为background: rgba(0,0,0,.3);
  • 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
<!DOCTYPE html>
<html lang="en">

<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>
    <style>
        div {
            width: 300px;
            height: 300px;
            /* background: rgba(0, 0, 0, 0.3); */
            background: rgba(0, 0, 0, .3);
        }
    </style>
</head>

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

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jl8re0z8-1644482446526)(../%E5%9B%BE%E7%89%87/image-20211031115635298.png)]

3.7背景总结

属性作用值
background-color背景颜色预定义的颜色值/十六进制/RGB代码
background- image背景图片url（图片路径）
background-repeat是否平铺repeat/no-repeat/repeat-x/repeat-y
background-position背景位置x和y的值
background-attachment背景附着scroll(默认值，背景滚动) / fixed（背景固定）
背景色半透明背景颜色半透明background：rgba（0，0，0，0.3);
屿苍～
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS中的&代表的什么意思
Rocky balboa
01-07 2984
参考: https://www.jianshu.com/p/bf4330f9f252。.bordered.float 是串联选择器，作用在同一标签上。.bordered .top 是后代选择器，作用在不同标签上。这是sass的语法，代表上一级选择器。& 表示嵌套的上一级。解释成CSS代码如下。
【CSS基础】&符号
weixin_55054681的博客
12-24 2112
表示嵌套的上一级，比如你的代码中，& 表示 .el-row 可以看做是嵌套里面的一个变量，值是代表上一级。的语法,代表上一级选择器,实际编译成css就是 .el-row:last-child{}
css第一部分
c283933的博客
04-15 338
CSS第一部分 一、CSS选择器 1.基础选择器 · 标签选择器 标签选择器：用标签名做选择器，可以把某一类标签全部选出来。 <html> <head> <style> p { color: pink; } div { color: red; } </style> </head> <body> <p>这是一段文字</p> <p>这是另一段文字</P>
CSS基础知识
qq_45187522的博客
09-17 200
基础知识 布局方式： 为什么需要先给整个网页布局？ 没有布局的网页，是不美观的，是杂乱的。 有了布局，就相等于大楼有了主体结构，接下来就是给主体结构添砖加瓦，刷漆等。 这些后续工作在我们的网页中就是内容，图片文字等内容。 第一种方式：Table（基本不用） 第二种方式：DIV+CSS（项目中的常用方式） 什么是html元素？ HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 什么是div？ div是一个标签，叫做一个块标签，一个div就是一个块，单独占用一行，di
CSS基础选择器和复合选择器
icemwj的博客
09-16 1775
1、CSS简介和语法规范 CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。 有时我们也会称之为 CSS样式表或级联样式表。 CSS 是也是一种标记语言。 CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。 CSS 规则由两个主要的部分构成：选择
CSS基础知识总结
Lotus_fragrance的博客
04-29 3267
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
CSS基础 知识点总结
星星之火的语言c学习
08-18 2622
① CSS指的是层叠样式表，用来控制网页外观的一门技术② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式② 五种常用的选择器元素选择器id选择器class选择器后代选择器群组选择器③ 语法选择器属性1：取值1；属性2: 取值2；...属性n: 属性n;① 元素选择器。
CSS基础2-选择器进阶+背景属性+元素显示模式+三大特性
12-05
CSS基础-选择器进阶+背景属性+元素显示模式+三大特性 CSS基础选择器进阶： 在CSS中，选择器是用于选择HTML元素并应用样式的核心机制。选择器进阶是指在基础选择器的基础上，进一步学习和应用选择器的高级规则和...
css 入门基础教程
09-25
总的来说，CSS入门基础教程涵盖了基本语法、选择器、注释和不同类型的样式表，这些都是学习CSS的基础。掌握这些知识后，可以进一步学习更复杂的布局技巧、响应式设计、动画和过渡效果，以及CSS预处理器等进阶主题。
python 零基础学习篇web前端开发基础css基础2 css样式表三种使用方式 .mp4
04-21
python 零基础学习篇
css 基础样式 base.css
04-28
css基础样式
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 607
仅对已定位的元素（）有效，默认值为0，可以为负值。
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1180
title>充电效果
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1174
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
JS之防抖和节流
喵喵的博客
07-09 1020
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
CSS基础知识.docx
07-23
CSS基础知识.docx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值