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

7. CSS（四）

news 文章来源：https://blog.csdn.net/weixin_45827876/article/details/132170588 2024/9/22 21:17:42

一、浮动

（一）传统网页布局的三种方式

（二）标准流（普通流/文档流）

（三）为什么需要浮动？

（四）什么是浮动

（五）浮动特性（重点）

1、浮动元素会脱离标准流（脱标）

2、浮动的元素会一行内显示并且元素顶部对齐

3、浮动的元素会具有行内块元素的特性

（六）浮动元素经常和标准流父级搭配使用

二、常见网页布局

浮动布局注意点：

三、清除浮动

（一）为什么要清除浮动

（二）清除浮动的本质

（三）清除浮动的方法

1、额外标签法

编辑2、父级添加overflow属性

3、父级添加after伪元素

4、父级添加双伪元素

（四）清除浮动总结

四、常见的图片格式

五、CSS属性书写顺序

一、浮动

（一）传统网页布局的三种方式

网页布局的本质——用CSS来摆放盒子，把盒子摆放到相应位置

CSS提供了三种传统布局方式：

普通流（标准流）
浮动
定位

（二）标准流（普通流/文档流）

所谓标准流：就是标签按照规定好默认方式排列

1、块级元素会独占一行，从上向下顺序排列。

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

2、行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

常用元素：span、a、i、em等

以上都是标准流布局，前面学习的就是标准流，标准流是最基本的布局方式。

（三）为什么需要浮动？

问题：1、如何让多个块级盒子（div）排列成一行？

虽然转换为行内块元素可以实现一行显示，但是它们之间会有较大的空白缝隙，很难控制。

2、如何实现两个盒子的左右对齐？

总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

浮动最典型的应用：可以让多个块级元素一行排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

（四）什么是浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：选择器{ float: 属性值; }

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动</title><style>.one {float: left;width: 200px;height: 200px;background-color: pink;}.two {float: left;width: 200px;height: 200px;background-color: skyblue;}</style>
</head>
<body><div class="one"></div><div class="two"></div>
</body>
</html>

（五）浮动特性（重点）

1、浮动元素会脱离标准流（脱标）

脱离标准普通流的控制（浮）移动到指定位置（动）
浮动的盒子不再保留原先的位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动特性</title><style>.one {float: left;width: 200px;height: 200px;background-color: pink;}.two {width: 300px;height: 300px;background-color: skyblue;}</style>
</head>
<body><div class="one">浮动的盒子</div><div class="two">标准流的盒子</div>
</body>
</html>

2、浮动的元素会一行内显示并且元素顶部对齐

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动特性</title><style>div {float: left;width: 200px;height: 200px;background-color: pink;}.two {background-color: purple;height: 250px;}.four {background-color: skyblue;}</style>
</head>
<body><div>1</div><div class="two">2</div><div>3</div><div class="four">4</div>
</body>
</html>

3、浮动的元素会具有行内块元素的特性

任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
浮动的盒子中间是没有缝隙的，是紧挨着一起的
行内元素同理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动特性</title><style>span,div {/* 如果不加浮动，那么span没有显示，因为行内元素不能指定宽高。但是加了浮动，具有行内块元素的特性 *//* 也就是行内元素有了浮动，则不需要转换为块级/行内块元素就可以直接给高度和宽度 */float: left;width: 200px;height: 100px;background-color: pink;}p {float: right;height: 200px;background-color: purple;}</style>
</head>
<body><span></span><span></span><div>div</div><p>ppppppp</p>
</body>
</html>

（六）浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

网页布局第二准则：先设置盒子大小，之后设置盒子的位置。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动布局练习</title><style>.box {width: 1226px;height: 615px;background-color: pink;margin: 0 auto;}.left {float: left;width: 234px;height: 615px;background-color: purple;}.right {float: left;width: 992px;height: 615px;background-color: skyblue;}.right>div {float: left;width: 234px;height: 300px;background-color: pink;margin-left: 14px;margin-bottom: 14px;}</style>
</head>
<body><div class="box"><div class="left">1</div><div class="right"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div></div>
</body>
</html>

二、常见网页布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>常见的网页布局</title><style>* {margin: 0;padding: 0;}li {list-style: none;}/* 只要是通栏的盒子（和浏览器一样宽），不需要指定宽度 */.top {height: 50px;background-color: gray;}.banner {width: 980px;height: 150px;background-color: gray;margin: 10px auto;}.box {width: 980px;height: 300px;margin: 0 auto;background-color: pink;}.box li {float: left;width: 237px;height: 300px;background-color: gray;margin-right: 10px;}.box .last {margin-right: 0;}.footer {height: 200px;background-color: gray;margin-top: 10px;}</style>
</head>
<body><div class="top">top</div><div class="banner">banner</div><div class="box"><ul><li>1</li><li>2</li><li>3</li><li class="last">4</li></ul></div><div class="footer">footer</div>
</body>
</html>

浮动布局注意点：

1、浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2、一个元素浮动了，理论上其余的兄弟元素也要浮动

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

三、清除浮动

（一）为什么要清除浮动

问题：前面浮动元素有一个标准流的父元素，他们有一个共同的特点，都是有高度的。但是，所有的父元素都必须有高度吗？

理想中的状态，让子盒子撑开父亲，有多少孩子，父盒子就有多高。但是不给父盒子高度，会有问题吗？

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>为什么要清除浮动</title><style>.box {width: 800px;border: 1px solid blue;margin: 0 auto}.one {float: left;width: 300px;height: 200px;background-color: purple;}.two {float: left;width: 200px;height: 200px;background-color: pink;}</style>
</head>
<body><div class="box"><div class="one">1</div><div class="two">2</div></div>
</body>
</html>

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

（二）清除浮动的本质

清除浮动的本质是清除浮动元素脱离标准流而造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

语法：选择器{ clear: 属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

实际工作中，几乎只用clear: both;

清除浮动的策略是：闭合浮动

（三）清除浮动的方法

额外标签法也称为隔墙法，是W3C推荐的做法
父级添加overflow属性
父级添加after伪元素
父级添加双伪元素

1、额外标签法

额外标签法会在浮动元素末尾添加一个空的标签。例如<div style="clear: both"></div>，或者其他标签（如<br />等。）

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化比较差
注意：要求这个新的空标签必须是块级元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除浮动之额外标签法</title><style>.box {width: 800px;border: 1px solid blue;margin: 0 auto}.one {float: left;width: 300px;height: 200px;background-color: purple;}.two {float: left;width: 200px;height: 200px;background-color: pink;}.clear {clear: both;}</style>
</head>
<body><div class="box"><div class="one">1</div><div class="two">2</div><div class="clear"></div></div>
</body>
</html>

2、父级添加overflow属性

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。

优点：代码简洁
缺点：无法显示溢出的部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除浮动之overflow</title><style>.box {/* 清除浮动 */overflow: hidden;width: 800px;border: 1px solid blue;margin: 0 auto}.one {float: left;width: 300px;height: 200px;background-color: purple;}.two {float: left;width: 200px;height: 200px;background-color: pink;}</style>
</head>
<body><div class="box"><div class="one">1</div><div class="two">2</div></div>
</body>
</html>

3、父级添加after伪元素

:after方式是额外标签法的升级版。也是给父元素添加。

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度、淘宝网、网易等

.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;
}
.clearfix {/* IE6、7专有 */*zoom: 1;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除浮动之afer伪元素</title><style>.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {/* IE6、7专有 */*zoom: 1;}.box {width: 800px;border: 1px solid blue;margin: 0 auto}.one {float: left;width: 300px;height: 200px;background-color: purple;}.two {float: left;width: 200px;height: 200px;background-color: pink;}</style>
</head>
<body><div class="box clearfix"><div class="one">1</div><div class="two">2</div></div>
</body>
</html>

4、父级添加双伪元素

优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等

.clearfix:before,
.clearfix::after {content: "";display: table;
}
.clearfix::after {clear: both;
}
.clearfix {*zoom: 1;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除浮动之双伪元素</title><style>.clearfix:before,.clearfix::after {content: "";display: table;}.clearfix::after {clear: both;}.clearfix {*zoom: 1;}.box {width: 800px;border: 1px solid blue;margin: 0 auto}.one {float: left;width: 300px;height: 200px;background-color: purple;}.two {float: left;width: 200px;height: 200px;background-color: pink;}</style>
</head>
<body><div class="box clearfix"><div class="one">1</div><div class="two">2</div></div>
</body>
</html>

（四）清除浮动总结

为什么要清除浮动？

父级没高度
子盒子浮动了
影响下面布局了，就应该清除浮动了

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签，结构化较差。
父级overflow:hidden;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题
父级双伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题

四、常见的图片格式

1、jpg图像格式：JPEG(JPG)对色彩的信息保留较好，高清，颜色较多，产品类的图片经常使用jpg格式的。

2、gif图像格式：GIF格式最多只能存储256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果。

3、png图像格式是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景。如果想要切成背景透明的图片，请选择png格式。

4、PSD图像格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿。对前端人员的最大有优点是，可以从上面复制文字，获得图片，还可以测量大小和距离。

五、CSS属性书写顺序

1、布局定位属性：display/position/float/clear/visibility/overflow（建议display第一个写，毕竟关系到模式）

2、自身属性：width/height/margin/padding/border/background

3、文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word

4、其他属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient...

7. CSS（四）

目录一、浮动 （一）传统网页布局的三种方式 （二）标准流（普通流/文档流） （三）为什么需要浮动？ （四）什么是浮动 （五）浮…...

编程日记 2023/8/21 21:10:49

uni-app 集成推送

研究了几天，终于是打通了uni-app的推送，本文主要针对的是App端的推送开发过程，分为在线推送和离线推送。我们使用uni-app官方推荐的uni-push2.0。官方文档准备工作：开通uni-push功能勾选uniPush2.0点击"配置"填写表单…...

编程日记 2023/8/21 21:09:48

Spring Boot+Redis 实现消息队列实践示例

Spring BootRedis 实现一个轻量级的消息队列文章目录 Spring BootRedis 实现一个轻量级的消息队列0.前言1.基础介绍2.步骤2.1. 引入依赖2.2. 配置文件2.3. 核心源码 4.总结答疑 5.参考文档6. Redis从入门到精通系列文章 0.前言本文将介绍如何利用Spring Boot与Redis结合实现…...

编程日记 2023/8/21 21:08:47

11. 实现业务功能--获取用户信息

目录 1. 实现 Controller 2. 单体测试 3. 修复返回值存在的缺陷 3.1 用户的隐私数据：密码的密文和盐不能显示 3.2 将值为 null 的字段可以进行过滤 3.3 时间的格式需要进行处理，如 yyyy-mmmm-ddd HH:mm:ss 3.4 data 属性没有返回 4. 实现前端页…...

编程日记 2023/8/21 21:07:45

HTTPS

HTTPS是什么 HTTPS 属于应用层协议，其原理是通过SSL/TLS协议在HTTP和TCP之间插入一层安全机制。通过SSL/TLS握手过程，客户端和服务器协商出一个对称密钥，用于后续的数据加密和解密，从而保证数据的机密性和完整性。为什么会需要…...

编程日记 2023/8/21 21:06:43

spring详解

spring是于2003年兴起的一款轻量级的，非侵入式的IOC和AOP的一站式的java开发框架，为简化企业级应用开发而生。轻量级的：指的是spring核心功能的jar包不大。非侵入式的：业务代码不需要继承或实现spring中任何的类或接口 IOC&…...

编程日记 2023/8/21 21:05:42

香港服务器备案会通过吗？

　　对于企业或个人来说，合规备案是网络运营的基本要求，也是保护自身权益的重要举措。以下内容围绕备案展开话题，希望为您解开疑惑。香港服务器备案会通过吗? 目前，香港服务器无法备案，这是由于国内管理规定的限制…...

编程日记 2023/8/21 21:04:39

乐鑫推出 ESP ZeroCode 控制台

乐鑫科技 ESP ZeroCode 控制台是一个网页应用，用户只需点击鼠标，描述想要创建的产品类型、功能及其硬件配置，即可按照自身需求，快速生成符合 Matter 认证的固件，并在硬件上进行试用。试用过程中，如有任何不…...

编程日记 2023/8/21 21:03:37

从NLP到聊天机器人

一、说明今天，当打电话给银行或其他公司时，听到电话另一端的机器人向你打招呼是很常见的：“你好，我是你的数字助理。请问你的问题。是的，机器人现在不仅可以说人类语言，还可以用人类语言与用户互动。这是由…...

编程日记 2023/8/21 21:02:34

第三章：select 语句 SELECT employees.employee_id,employees.department_id FROM employees WHERE employees.employee_id176; DESC departments;SELECT * FROM departments;第四章：运算符使用 SELECT employees.last_name,employees.salary FROM em…...

编程日记 2023/8/21 21:00:29

解决http下navigator.clipboard为undefined问题

开发环境下使用navigator.clipboard进行复制操作，打包部署到服务器上后，发现该功能显示为undefined；查相关资料后，发现clipboard只有在安全域名下才可以访问(https、localhost)，在http域名下只能得到undefined&#xf…...

编程日记 2023/8/21 20:59:28

mysql之host is blocked问题

程序上线一段时间之后，更新程序总是遇到这个问题每次都是重启几次程序，或者执行 flush hosts; 毕竟指标不治本，抽出时间决定分析一下问题，查阅了几篇博客。（感谢这几位大佬） https://blog.51cto.com/u_…...

编程日记 2023/8/21 20:58:27

每日一题：2337 移动片段得到字符串

给你两个字符串 start 和 target ，长度均为 n 。每个字符串仅由字符 L、R 和 _ 组成，其中： 字符 L 和 R 表示片段，其中片段 L 只有在其左侧直接存在一个空位时才能向左移动，而片段 R 只有在其右侧直接存在一个 …...

编程日记 2023/8/21 20:57:26

嵌入式设备的 Json 库基本使用

大家好，今天给介绍一款基于 C 语言的轻量级的 Json 库 – cJson。可用于资源受限的嵌入式设备中。 cJSON 是一个超轻巧，携带方便，单文件，简单的可以作为 ANSI-C 标准的 JSON 解析器。 cJSON 是一个开源项目，github 下…...

编程日记 2023/8/21 20:56:25

GEEMAP 中如何拉伸图像

图像拉伸是最基础的图像增强显示处理方法，主要用来改善图像显示的对比度，地物提取流程中往往首先要对图像进行拉伸处理。图像拉伸主要有三种方式：线性拉伸、直方图均衡化拉伸和直方图归一化拉伸。 GEE 中使用 .sldStyle() 的方法来进行图像的…...

编程日记 2023/8/21 20:55:24

软件测试学术顶会——ISSTA 2023 论文（网络安全方向）清单、摘要与总结

总结本次会议涵盖的安全研究主题广泛,包括源代码分析、二进制代码分析、恶意软件检测、漏洞检测、模糊测试、程序验证等。一些热门的研究方向包括:基于机器学习的漏洞检测、大型语言模型在软件安全中的应用、区块链智能合约安全分析。这些方向都在最近几年持续发展。一些较冷门…...

编程日记 2023/8/21 20:54:22

基于YOLOv8模型和PCB电子线路板缺陷目标检测系统（PyTorch+Pyside6+YOLOv8模型）

摘要：基于YOLOv8模型PCB电子线路板缺陷目标检测系统可用于日常生活中检测与定位PCB线路板瑕疵，利用深度学习算法可实现图片、视频、摄像头等方式的目标检测，另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检…...

编程日记 2023/8/21 20:53:20

centos安装mysql8

检查是否有mariadb rpm -qa|grep mariadb rpm -e --nodeps mariadb-server安装mysql-8.0.31-el7-x86_64.tar.gz包安装mysql-8.0.31-el7-x86_64.tar.gz包 cd datatar -xvf mysql-8.0.31-el7-x86_64.tar.gzmv mysql-8.0.31-el7-x86_64 mysql 依赖安装报错解决，安…...

编程日记 2023/8/21 20:52:19

【Apollo】阿波罗自动驾驶技术：引领汽车行业革新

前言 Apollo (阿波罗)是一个开放的、完整的、安全的平台，将帮助汽车行业及自动驾驶领域的合作伙伴结合车辆和硬件系统，快速搭建一套属于自己的自动驾驶系统。开放能力、共享资源、加速创新、持续共赢是 Apollo 开放平台的口号。百度把自己所拥有的强大、…...

编程日记 2023/8/21 20:51:18

一文看懂！数据管道和数据流在数据分析中的作用

当我们谈论数据分析时，我们通常会想到一系列的步骤，包括数据收集、数据清洗、数据分析和数据可视化等。然而，在这些步骤中，有两个非常重要的概念：数据管道和数据流。这两个概念在数据分析过程中起着至关重要的作用。本…...

编程日记 2023/8/21 20:50:17

Linux系统下检验Tensorflow 2.xx版本和1.xx版本是否安装成功

目录版本问题Tensorflow 1.xx的测试代码：Tensorflow 2.xx的测试代码：Tensorflow 2.6版本实际的测验结果总结版本问题查询资料发现，多数检验Tensorflow是否安装成功的方法，多数方法都是1.xx版本的，直接使用1.xx版本…...

编程日记 2023/8/21 20:49:16

暑期高铁站大量遗失物品，FindMy帮助寻找

近日，一女子在上海坐高铁时，将户口本、房产证遗落安检处的新闻引起网友的关注。然后业内人士表示：常事，车站什么都能捡到。据中国铁路透露，暑运期间，上海虹桥站客流增加，日均发送旅客20多万人…...

编程日记 2023/8/21 20:48:14

通过安全日志读取WFP防火墙放行日志

前言之前的文档中，描写了如何对WFP防火墙进行操作以及如何在防火墙日志中读取被防火墙拦截网络通讯的日志。这边文档，着重描述如何读取操作系统中所有被放行的网络通信行为。读取系统中放行的网络通信行为日志，在win10之后的操作系统上&am…...

编程日记 2023/8/21 20:47:13

JDK、JRE、Java SE、Java EE和Java ME有什么区别?

Java现在已不仅仅是一种语言，从广义上说，它代表了一个技术体系。该体系根据应用方向的不同主要分为Java SE、Java EE和Java ME的3个部分。 1.SE(JavaSE)，standard edition，标准版，是我们通常用的一个版本，从…...

编程日记 2023/8/21 20:46:12

Neo4j之unwind基础

UNWIND 语句在 Cypher 查询中用于将列表（数组）中的元素逐个“展开”，从而将每个元素视为单独的行进行处理。它通常与 MATCH、CREATE、MERGE 等语句结合使用，用于对列表中的每个元素执行相应的操作。以下是一些常用的示例和解释&am…...

编程日记 2023/8/21 20:45:11

回归预测 | MATLAB实现SSA-SVM麻雀搜索算法优化支持向量机多输入单输出回归预测（多指标，多图）

回归预测 | MATLAB实现SSA-SVM麻雀搜索算法优化支持向量机多输入单输出回归预测（多指标，多图） 目录回归预测 | MATLAB实现SSA-SVM麻雀搜索算法优化支持向量机多输入单输出回归预测（多指标，多图）效果一览基…...

编程日记 2023/8/21 20:44:10

深入探索代理技术：Socks5、IP代理与网络安全

在当今高度互联的世界中，代理技术在网络安全和爬虫等领域发挥着重要作用。本文将着重介绍Socks5代理、IP代理以及它们在网络安全与爬虫开发中的应用，旨在帮助读者深入理解这些技术，从而更好地应用于实际情境。 1. Socks5代理的特点与用途 S…...

编程日记 2023/8/21 20:43:09

Matlab 频谱图中如何设置频率刻度

Matlab 频谱图中如何设置频率刻度（横坐标） 1、概述时域信号经FFT 变换后得到了频谱，在作图时还必须设置正确的频率刻度，这样才能从图中得到正确的结果。下面来介绍如何设置正确的频率刻度。 2、案例分析有一个余弦信号&#…...

编程日记 2023/8/21 20:42:07

在线转换器有哪些优势？在线Word转PDF操作分享

我们如果想要将两者不同格式文件进行格式转换，就需要下载安装转换器。如果出门带的设备没有安装转换软件客户端，就无法使用，会比较麻烦。现在有了在线转换工具，只需要打开相应的网页就可使用，那么在线Word转PDF的操作是…...

编程日记 2023/8/21 20:41:06

2023国赛数学建模A题思路模型代码汇总高教社杯

本次比赛我们将会全程更新思路模型及代码，大家查看文末名片获取之前国赛相关的资料和助攻可以查看 2022数学建模国赛C题思路分析_2022国赛c题matlab_UST数模社_的博客-CSDN博客 2022国赛数学建模A题B题C题D题资料思路汇总高教社杯_2022国赛c题matlab_UST数模社…...

编程日记 2023/8/21 20:40:03

vue3如何批量设置动态ref

示例如下： <template v-for"item in selectList"><el-select v-model"item.value" :ref"el > setRef(el, item)"><el-optionv-for"v in item.options":key"v.value":label"v.label"…...

编程日记 2023/8/21 20:39:02

Android Studio run app 设置 release 模式

背景为验证我们的 SDK 集成在客户应用上的质量，需要我们的测试环境尽量的与客户应用保持一致。客户普遍都会打 release 包并混淆，然后进行上线应用，因此我们在测试过程中也需要使用 release 包进行验证。对于 Android Studio 运行项目&…...

编程日记 2023/8/21 20:38:01

【SA8295P 源码分析】41 - SA8295所有镜像位置、拷贝脚本、生成QFIL包

【SA8295P 源码分析】41 - SA8295所有镜像位置、拷贝脚本、生成QFIL包一、SA8295 各镜像位置二、SA8295 QNX 侧镜像拷贝脚本三、SA8295 Android 侧镜像拷贝脚本四、使用QFIL 下载整包五、Fastboot 下载命令整理系列文章汇总见：《【SA8295P 源码分析】00 - 系列文章链接汇总》…...

编程日记 2023/8/21 20:36:59

【Redis】Redisson分布式锁原理与使用

【Redis】Redisson分布式锁原理与使用什么是Redisson？ Redisson - 是一个高级的分布式协调Redis客服端，能帮助用户在分布式环境中轻松实现一些Java的对象，Redisson、Jedis、Lettuce 是三个不同的操作 Redis 的客户端，Jedis、Le…...

编程日记 2023/8/21 20:35:57

Segment Anything论文阅读笔记

Segment Anything论文阅读笔记 1. Segment Anything论文基本信息2. Segment Anything论文阅读2.1 第一遍阅读 Segment Anything2.2. 第二遍阅读 Segment Anything2.2.1. Segment Anything中相关的图表 1. Segment Anything论文基本信息论文地址https://arxiv.org/abs/2304.02…...

编程日记 2023/8/21 20:34:56

Python入门教程 | Python 基础语法

标识符第一个字符必须是字母表中字母或下划线 _ 。标识符的其他的部分由字母、数字和下划线组成。标识符对大小写敏感。在 Python 3中，可以用中文作为变量名，非 ASCII 标识符也是允许的了。默认情况下，Python 3 源码文件以 UTF-8 编码&am…...

编程日记 2023/8/21 20:33:55

JAMstack架构：快速构建安全、高性能的现代应用

随着Web应用的快速发展，开发者们在寻找更加高效、安全和可维护的应用架构。JAMstack架构应运而生，它通过将前端、后端和部署过程分离，提供了一种现代化的方式来构建Web应用。在本文中，我们将深入探讨JAMstack架构的特点、优势以及…...

编程日记 2023/8/21 20:32:54

Web会话技术

会话:用户打开浏览器，访问web服务器的资源，会话建立，直到有一方断开连接，会话结束。在一次会话中可以包含多次请求和响应会话跟踪:一种维护浏览器状态的方法，服务器需要识别多次请求是否来自于同一浏览器，…...

编程日记 2023/8/21 20:31:53

hbuilderx打包苹果证书获取步骤

简介： 目前app开发，很多企业都用H5框架来开发，而uniapp又是这些h5框架里面最成熟的，因此hbuilderx就成为了开发者的首选。然而,打包APP是需要证书的，那么这个证书又是如何获得呢？ 生成苹果证书相对复杂一些…...

编程日记 2023/8/21 20:30:52

JAVA下载Excel文件之后无法打开，提示损坏

resources 目录下放模板 excel 文件，通过接口下载后，可以正常下载，但打不开。问题： springboot 项目简单的下载excel 模板功能，模板放在resources/template/目录中 public void downloadItemBatch(HttpServletRespo…...

编程日记 2023/8/21 20:29:51

复合类型

字符串和切片切片切片的作用是允许你引用集合中部分连续的元素序列，而不是引用整个集合。例如： let s String::from("hello world");let hello &s[0..5]; // 切片 [0,5) 等效于&s[..5] let world &s[6..11]; // 切片…...

编程日记 2023/8/21 20:28:50

Practices11|41. 缺失的第一个正数(数组)、73. 矩阵置零（矩阵）

41. 缺失的第一个正数(数组) 1.题目： 给你一个未排序的整数数组 nums ，请你找出其中没有出现的最小的正整数。请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。示例 1： 输入：nums [1,2,0] 输出&#xf…...

编程日记 2023/8/21 20:27:49

深入完整的带你了解java对象的比较

目录元素的比较 1.基本类型的比较 2.对象比较的问题 1.运行结果 2.疑问 3.原因对象的比较 1.覆写基类的equals 2.基于Comparble接口类的比较 3.基于比较器比较 4.三种方式对比元素的比较 1.基本类型的比较在Java 中，基本类型的对象可以直接比较大…...

编程日记 2023/8/21 20:26:48

ubuntu20.04升级GLIBC高版本方法，解决：version `GLIBC_2.34‘ not found

检查版本 strings /lib/x86_64-linux-gnu/libc.so.6 |grep GLIBC_ 1 显示结果 GLIBC_2.2.5 GLIBC_2.2.6 GLIBC_2.3 GLIBC_2.3.2 GLIBC_2.3.3 GLIBC_2.3.4 GLIBC_2.4 GLIBC_2.5 GLIBC_2.6 GLIBC_2.7 GLIBC_2.8 GLIBC_2.9 GLIBC_2.10 GLIBC_2.11 GLIBC_2.12 GLIBC_2.13 GLIBC_2…...

编程日记 2023/8/21 20:25:46

日产将使用东风纯电平台？官方回应：不是日产品牌

据财联社报道，日产中国在对于“日产将使用东风纯电平台”的传闻进行回应时指出，文中提及的平台将会用于日产在华合资企业的自主品牌，而不是日产品牌本身。这一消息进一步确认了之前每经网的报道，称日产将采用东风汽车最新发布的“…...

编程日记 2023/8/21 20:24:45

cdh6.3.2 Flink On Yarn taskmanager任务分配倾斜问题的解决办法

业务场景： Flink On Yarn任务启动组件版本： CDH：6.3.2 Flink：1.13.2 Hadoop：3.0.0 问题描述： 在使用FLink on Yarn调度过程中，发现taskmanager总是分配在集中的几个节点上，集群…...

编程日记 2023/8/21 20:23:44

改进YOLO系列：3.添加SOCA注意力机制

添加SOCA注意力机制 1. SOCA注意力机制论文２. SOCA注意力机制原理３. SOCA注意力机制的配置３.１common.py配置３.２yolo.py配置３.３yaml文件配置1. SOCA注意力机制论文暂未找到２. SOCA注意力机制原理３. SOCA注意力机制的配置３.１common.py配置 ./models/common.p…...

编程日记 2023/8/21 20:22:42

SpringBoot整合Mybatis Plus——条件构造器Wrapper

Mybatis Plus为我们提供了如下的一些条件构造器，我们可以利用它们实现查询条件、删除条件、更新条件的构造。条件构造器 | MyBatis-Plus (baomidou.com) 一、通过maven坐标引入依赖（注意版本！！） <dependency>…...

编程日记 2023/8/21 20:21:41

while循环语句

# while循环 # 通过while循环，计算1到100的总和 num 1 sum 0 while num < 100:sum num sumnum 1 print(f"1到100的和为{sum}") #嵌套语句--实现猜1-10数字游戏 import random flagTrue numrandom.randint(1,10) while flag:guess_numint(input(&q…...

编程日记 2023/8/21 20:20:39

一、浮动

（一）传统网页布局的三种方式

（二）标准流（普通流/文档流）

（三）为什么需要浮动？

（四）什么是浮动

（五）浮动特性（重点）

1、浮动元素会脱离标准流（脱标）

2、浮动的元素会一行内显示并且元素顶部对齐

3、浮动的元素会具有行内块元素的特性

（六）浮动元素经常和标准流父级搭配使用

二、常见网页布局

浮动布局注意点：

三、清除浮动

（一）为什么要清除浮动

（二）清除浮动的本质

（三）清除浮动的方法

1、额外标签法

2、父级添加overflow属性

3、父级添加after伪元素

4、父级添加双伪元素

（四）清除浮动总结

四、常见的图片格式

五、CSS属性书写顺序

相关文章：