当前位置：首页 > news >正文

【CSS】快速入门笔记

news 2025/11/10 5:41:34

视频链接：https://www.bilibili.com/video/BV1mS4y1Z7Ga/?spm_id_from=333.999.0.0&vd_source=1ad00d913eae8281cbadad6ae66fb06c

文章目录

- 一、CSS语法
- - 1.结构
  - 2.样式类型
  - - 1）内联样式 Inline Style
    - 2）内部样式 Internal Style
    - 3）外部样式 External Style
- 二、选择器（Selector）
- - 1.类型
  - - 1）类型选择器
    - 2）类选择器
    - 3）id选择器
    - 4）属性选择器
    - 5）通用选择器
  - 2.使用
  - - 1）组合使用
    - 2）优先级（Priority）
- 三、盒子模型（Box Model）
- - 1.边框 border
  - 2.内边距padding
  - 3.外边距margin

一、CSS语法

1.结构

在这里插入图片描述

2.样式类型

1）内联样式 Inline Style

特点：直接写到html元素上，没有选择器，直接就是声明，仅对当前的html元素有效

<p style="color:red">我是一段文字</p>

在这里插入图片描述

2）内部样式 Internal Style

特点：写在html文档的head标签中，使用style标签，包含一个或多个css规则

<head><meta charset="UTF-8"><style>.box{width:600px;height:1200px;}</style>
</head>

在这里插入图片描述

3）外部样式 External Style

特点：先在外部存储独立的css文件，通过把Link标签放在head标签内，指定其href属性，来指定外部css属性,使用最多

<!--主体代码-->
<html><head><meta charset="UTF-8"><title>我是标题</title><link rel="stylesheet" href="mystyle.css"></head><body>......</body>
</html>

/*css文件mystyle.css*/
h1{width:600px;height:1200px;margin:auto;
}

在这里插入图片描述

二、选择器（Selector）

描述：用于在css语句或文档中，选择html元素。

1.类型

1）类型选择器

特点：直接写元素标签的名称，例如上面的h1，可用于选择页面上所有的该类型标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试.css"></head><body><h1>我的第一个h1标签</h1><h1>我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2></body>
</html>

/*css文件    mystyle-选择器测试.css*/
h1{color: red;
}
h2{color: blue;
}

在这里插入图片描述

2）类选择器

特点：点.+类名，类名可自定义，同时html对应元素中，有同名的class属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试.css"></head><body><h1>我的第一个h1标签</h1><h1>我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p></body>
</html>

/*css文件    mystyle-选择器测试.css*/
h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}

在这里插入图片描述

3）id选择器

特点：#加id名称，同时html对应元素中，有同名的id属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试.css"></head><body><h1>我的第一个h1标签</h1><h1>我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p><p id="my_pid">我也是一个段落</p></body>
</html>

/*css文件    mystyle-选择器测试.css*/
h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/}
#my_pid{color: orange;/*类选择器*/
}

在这里插入图片描述

4）属性选择器

特点1：不常用，标签[属性]，选择所有该类型标签并包含该属性的所有元素

<!DOCTYPE html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试.css"></head><body><h1>我的第一个h1标签</h1><h1>我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p><p id="my_pid">我也是一个段落</p><a title="baidu" href="http://www.baidu.com">百度</a><a title="" href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a></body>
</html>

/*css文件    mystyle-选择器测试.css*/
h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
#my_pid{color: orange;/*类选择器*/
}
a[title]{color: fuchsia;/*属性选择器*/
}

在这里插入图片描述
特点2：属性也可指定值，更精确选择

/*css文件    mystyle-选择器测试.css*/
h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
#my_pid{color: orange;/*类选择器*/
}
a[title]{color: fuchsia;/*属性选择器*/
}
a[title=""]{color: saddlebrown;/*属性选择器-指定属性内容*/
}

在这里插入图片描述

5）通用选择器

特点：星号*，代表所有元素

/*css文件    mystyle-选择器测试.css*/
h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
#my_pid{color: orange;/*类选择器*/
}
a[title]{color: fuchsia;/*属性选择器*/
}
a[title=""]{color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{font-family: KaiTi;/*通用选择器，更改字体为楷体*/
}

在这里插入图片描述

2.使用

1）组合使用

组合1：以上选择器直接连写，需要满足所有同条件后生效；

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试.css"></head><body><h1 class="my_p">我的第一个h1标签</h1><h1>我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p><p id="my_pid">我也是一个段落</p><a title="baidu" href="http://www.baidu.com">百度</a><a title="" href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a></body>
</html>


h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
#my_pid{color: orange;/*类选择器*/
}
a[title]{color: fuchsia;/*属性选择器*/
}
a[title=""]{color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{font-family: KaiTi;/*通用选择器，更改字体为楷体*/
}
h1.my_p{font-style: oblique;/*组合选择器，字体斜体*/
}

在这里插入图片描述
组合2：以上选择器用逗号连接，则对列出的选择器都生效


h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
#my_pid{color: orange;/*类选择器*/
}
a[title]{color: fuchsia;/*属性选择器*/
}
a[title=""]{color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{font-family: KaiTi;/*通用选择器，更改字体为楷体*/
}
h1.my_p{font-style: oblique;/*组合选择器，字体斜体*/
}
h1,h2{font-size: 20px;/*组合选择器，字体大写变成20px*/
}

在这里插入图片描述
组合3：父子组合，需要一个父标签用空格连接一个子标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试.css"></head><body><h1 class="my_p">我的第一个h1标签</h1><h1>我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p><p id="my_pid">我也是一个段落</p><a title="baidu" href="http://www.baidu.com">百度</a><a title="" href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a><div><h1>我是div里的h1标签 </h1></div>		</body>
</html>

h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
#my_pid{color: orange;/*类选择器*/
}
a[title]{color: fuchsia;/*属性选择器*/
}
a[title=""]{color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{font-family: KaiTi;/*通用选择器，更改字体为楷体*/
}
h1.my_p{font-style: oblique;/*组合选择器，字体斜体*/
}
h1,h2{font-size: 20px;/*组合选择器，字体大写变成20px*/
}
div h1{text-decoration: underline;/*组合选择器，字体加下划线*/
}

在这里插入图片描述

2）优先级（Priority）

a.相同的规则按照加载顺序，写在后面的优先级更高

h1{color: red;/*字体红色*/
}
h1{color: green;/*字体绿色*/
}

在这里插入图片描述
这里先定义了红色，后定义了绿色，以绿色为准

b.继承下来的样式优先级永远低于直接指定的样式
案例1：

body{color: skyblue;/*字体天空蓝色*/
}
h1{color: green;/*字体绿色*/
}

h1本来应该继承body的天空蓝，但它自己定义了绿色，自己指定的优先级高于继承，所以最终显示绿色
在这里插入图片描述

案例2：

h1{color: green;/*字体绿色*/
}
div h1{color: blue;/*字体蓝色*/
}

后面的标签对同一属性有自己的直接指定的时候就不再继承前面统一定义过的属性
在这里插入图片描述

c. 内联样式优先级最高，!important是个例外
内部样式和外部样式的优先级没有太大区别，主要是语句顺序导致的加载顺序，但内联样式的优先级最高

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试优先级.css"></head><body><h1 class="my_p">我的第一个h1标签</h1><h1 style="color:red;">我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p><p id="my_pid">我也是一个段落</p><a title="baidu" href="http://www.baidu.com">百度</a><a title="" href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a><div><h1>我是div里的h1标签 </h1></div></body>
</html>

在之前的基础上，单独给h2添加了内联样式，最后呈现的是内联样式指定的颜色
在这里插入图片描述
加了important,可以打破内联样式的优先级,颜色又被扳到外部样式的绿色

body{color: skyblue;/*字体蓝色*/
}
h1{color: green!important;/*字体绿色,并且!important*/
}

在这里插入图片描述

d. 类型选择器<类选择器<ID选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试优先级.css"></head><body><h1 class="my_p">我的第一个h1标签</h1><h1 style="color:red;">我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p><p id="my_pid" class="my_p">我也是一个段落</p><a title="baidu" href="http://www.baidu.com">百度</a><a title="" href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a><div><h1>我是div里的h1标签 </h1></div></body>
</html>

.my_p{color:peru;/*字体褐色*/
}
p{color: green;/*字体绿色*/
}

类选择器高于类型选择器，与加载顺序无关
在这里插入图片描述

#my_pid{color: coral;/*字体珊瑚红色*/
}
.my_p{color:peru;/*字体褐色*/
}
p{color: green;/*字体绿色*/
}

在这里插入图片描述
id选择器的加载顺序最高

三、盒子模型（Box Model）

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>盒子模型</title><link rel="stylesheet" href="myboxstyle.css"></head><body><div class="box">div内容</div></body>
</html>

.box{width: 100px;height: 100px;background-color: red;
}

在这里插入图片描述

1.边框 border

.box{width: 100px;height: 100px;background-color: red;border: 3px solid blue;/*3px 实线 蓝色*/
}

出现了3px的实线蓝色边框
在这里插入图片描述

2.内边距padding

.box{width: 100px;height: 100px;background-color: red;border: 3px solid blue;/*3px 实线 蓝色*/padding: 20px;/*内边距20px*/
}

文字和边框产生了距离，同时外框也变大
在这里插入图片描述

.box{width: 100px;height: 100px;background-color: red;border: 3px solid blue;/*3px 实线 蓝色*/padding: 20px;/*内边距20px*/padding-left: 5px;padding-top: 10px;padding-right: 15px;padding-bottom: 25px;padding: 10px 15px 25px 5px;/*简洁写法：上右下左*/
}

也可单独指定上下左右的内边距
在这里插入图片描述
右击-审查元素

3.外边距margin

.box{width: 100px;height: 100px;background-color: red;border: 3px solid blue;/*3px 实线 蓝色*/padding: 20px;/*内边距20px*/padding-left: 5px;padding-top: 10px;padding-right: 15px;padding-bottom: 25px;padding: 10px 15px 25px 5px;/*简洁写法：上右下左*/margin: 25px;margin-top: 20px;margin-bottom: 30px;margin-left: 15px;margin-right: 10px;margin: 20px 10px 30px 15px;/*简洁写法：上右下左*/}
}

外框和页面产生了距离
在这里插入图片描述

在这里插入图片描述

【CSS】快速入门笔记

视频链接：https://www.bilibili.com/video/BV1mS4y1Z7Ga/?spm_id_from333.999.0.0&vd_source1ad00d913eae8281cbadad6ae66fb06c 文章目录一、CSS语法1.结构2.样式类型1）内联样式 Inline Style2）内部样式 Internal Style3）外部…...

编程日记 2023/3/12 0:16:20

第161篇笔记-去中心化的含义

本文主要内容来自Vitalik Buterin的文章。“去中心化”这个词是在加密经济学领域用得最多的一个词，通常也作为辨别区块链的依据。然而，这个词也可能是被定义得最不恰当的一个词。数千小时的研究和价值数十亿美元哈希算力的投入都旨在实现去中心化&#x…...

编程日记 2023/3/12 0:15:17

「计算机组成原理」数据的表示和运算（二）

文章目录五、奇偶校验码六、算术逻辑单元ALU6.1 电路的基本原理6.2 加法器的设计6.2.1 一位全加器6.2.2 串行加法器6.2.3 串行进位的并行加法器6.2.4 并行进位的并行加法器七、补码加减运算器八、标志位的生成九、定点数的移位运算9.1 算数移位9.2 逻辑移位9.3 循环移位五、奇偶…...

编程日记 2023/3/12 0:14:15

建立自己的博客

环境安装： w10系统安装第一步：安装git Git 官网: https://git-scm.com/ 第二步：安装Node.js Node.js官网：https://nodejs.org/zh-cn/ 使用cmd检测： node -v 第三步：安装Hexo Hexo官网：htt…...

编程日记 2023/3/12 0:13:10

Docker 安装mysql Mac 环境下

已安装桌面端 Docker （Mac安装Docker） 安装方式一打开链接 https://www.docker.com/products/docker-desktop 选择平台下载安装方式二安装homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/m…...

编程日记 2023/3/12 0:12:05

《C++代码分析》第三回：类成员函数覆盖父类函数的调用（分析this指针的变化）

一、前言在C的学习中我们知道，子类是可以覆盖父类的方法，这里我们探讨一下子类方法调用父类方法时this指针时如何变化的。二、示例代码 #include "windows.h" #include "windef.h" #include <iostream> #include <tch…...

编程日记 2023/3/12 0:11:03

Altium designer--软件简介及安装教程（Altium designer16）

一、软件介绍（完整安装包资源见文末链接，含破解license） Altium Designer 是一款简单易用、原生3D设计增强的一体化设计环境，结合了原理图、ECAD库、规则和限制条件、BoM、供应链管理、ECO流程和世界一流的PCB设计工具。通过原理…...

编程日记 2023/3/12 0:10:00

Windows系统下基于开源软件的多物理场仿真

Windows系统下基于开源软件的多物理场仿真实践技术应用随着计算机技术的发展，计算机仿真技术日益成为继实验和理论之后的第三种重要研究和设计手段。真实世界中遇到的问题往往是固体力学，流体力学，热，电磁等多种现象耦合而成&…...

编程日记 2023/3/12 0:08:58

【STL】list剖析及模拟实现

✍作者：阿润菜菜 📖专栏：C 初识list 1. list基本概况 list是可以在常数范围内在任意位置进行插入和删除的序列式容器，并且该容器可以前后双向迭代。list的底层是双向链表结构，双向链表中每个元素存储在互不相关的独立…...

编程日记 2023/3/12 0:07:54

Go打包附件内容到执行文件

前言如果我们的应用在启动的时候需要对数据库进行初始化(比如建表等), 可以通过读取.sql文件内容直接执行. 但是, 这样会带出一个问题: 在发送可执行文件的时候, 需要连带着附件文件, 并且相对路径还不能出错. 这样太麻烦了有时我们并不希望附件的内容被使用者看到处于种种…...

编程日记 2023/3/12 0:06:51

Spring的配置属性

介绍以前都是用XML来设置属性值，SpringBoot的自动配置可以简化Spring应用的开发。配置属性只是配置Spring应用上下文中bean的属性而已，可以通过多个源来配置，包括JVM系统属性、环境变量等。 Spring中有两种不同(但相关)的配置 bean装配&…...

编程日记 2023/3/12 0:05:49

132.《render-props, Hoc，自定义hooks 详解》

文章目录render-props 模式props 方式children 方式(推荐)Hoc（高阶组件）使用步骤示例props 丢失解决方案自定义 hook1.只执行一次2.防抖hook高阶组件与自定义hook有什么区别相同点不同点React 中代码逻辑复用有三种方式，render-props, Hoc&am…...

编程日记 2023/3/12 0:04:47

通过Session共享数据验证码进行用户登录

通过Session共享数据验证码进行用户登录需求： 访问带有验证码的登录页面login.jsp。用户输入用户名，密码以及验证码。 ①。如果用户名和密码输入有误，跳转登陆页面，提示：用户名或密码错误。 ②。如果验证码输入有误…...

编程日记 2023/3/12 0:03:45

C++STL详解（六）——stack和queue

文章目录空间适配器stackstack的定义方式stack的使用stack的模拟实现queuequeue的定义方式queue的使用queue的模拟实现空间适配器适配器是一种设计模式（设计模式是一套被反复使用的，多数人知晓的，经过分类编目的，代码设计经验的…...

编程日记 2023/3/12 0:02:43

javaEE 初阶 — CSS 的基本语法与引入方式

文章目录1. 基本语法规范2. 三种引入方式1. 基本语法规范 CSS 的基本语法规范是由选择器和若干个声明组成的。选择器选中一个元素之后，这些属性都是针对于这个元素展开的。先来看一个没有 CSS 的效果。 <body><p>这是一个段落</p> </bo…...

编程日记 2023/3/12 0:01:41

QEMU启动ARM32 Linux内核

目录前言前置知识ARM Versatile Express开发板简介ARM处理器家族简介安装qemu-system-arm安装交叉编译工具交叉编译ARM32 Linux内核交叉编译ARM32 Busybox使用busybox制作initramfs使用QEMU启动ARM32 Linux内核模拟vexpress-a9开发板模拟vexpress-a15开发板参考前言本文介绍采…...

编程日记 2023/3/12 0:00:38

than的用法合集

首先需要了解一下than的词性，其有两个词性，一个是介词，一个是连词。介词后面一定要接上名词性的词语，比如 i am taller then him 我比我的老师高连词就比较自由，一般用来连接两个句子；但是使用than连词词…...

编程日记 2023/3/11 23:59:35

Unet 基于TCGA颅脑肿瘤MRI分割(高阶API分割模型)

目录 1. 介绍 2. dice 指标 3. resnet34 作为 backbone 的分割 4. deeplabv3 图像分割 4.1 问题 4.2 训练 4.3 预测 5. MAnet 图像分割...

编程日记 2023/3/11 23:58:31

[NIPS 2017] Improved Training of Wasserstein GANs (WGAN-GP)

Contents IntroductionDifficulties with weight constraintsCapacity underuseExploding and vanishing gradientsGradient penaltyReferencesIntroduction WGAN 增加了 GAN 模型训练的稳定性，但有时仍然会有生成质量不高或难以收敛的问题。作者发现上述问题经常是由 WGAN 中…...

编程日记 2023/3/11 23:57:29

力扣-每天的领导和合伙人

大家好，我是空空star，本篇带大家了解一道简单的力扣sql练习题。文章目录前言一、题目：1693. 每天的领导和合伙人二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行结果5.…...

编程日记 2023/3/11 23:56:26

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色&#xf…...

编程新知 2025/11/8 3:32:42

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作在…...

编程新知 2025/9/22 21:37:01

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...

编程新知 2025/10/15 12:45:18

Map相关知识

数据结构二叉树二叉树，顾名思义，每个节点最多有两个“叉”，也就是两个子节点，分别是左子节点和右子节点。不过，二叉树并不要求每个节点都有两个子节点，有的节点只有左子节点，有的节点只有…...

编程新知 2025/11/7 14:06:10

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型（Vision-Language Models, VLMs），为真实环境中的机器人操作任务提供了极具潜力的解决方案。尽管 VLMs 取得了显著进展，机器人仍难以胜任复杂的长时程任务（如家具装配），主要受限于人…...

编程新知 2025/11/9 13:32:21

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1）准备工作服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2）服务端安装软件：bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

编程新知 2025/11/9 14:05:53

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备安装DevEco Studio 3.1： 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置： // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/9/19 10:25:57

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素，返回一个新的数组。特点： 不修改原数组：slice 不会改变原数组，而是返回一个新的数组。提取数组的部分：slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

编程新知 2025/9/18 9:49:21

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略一、功能背景与技术选型在团队协作场景中，群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS，在uniapp中实现： 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览二…...

编程新知 2025/9/14 20:44:53

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下： avformat_open_input 精简后的代码如下： int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

编程新知 2025/11/9 8:59:04

文章目录

一、CSS语法

1.结构

2.样式类型

1）内联样式 Inline Style

2）内部样式 Internal Style

3）外部样式 External Style

二、选择器（Selector）

1.类型

1）类型选择器

2）类选择器

3）id选择器

4）属性选择器

5）通用选择器

2.使用

1）组合使用

2）优先级（Priority）

三、盒子模型（Box Model）

1.边框 border

2.内边距padding

3.外边距margin

相关文章：