前端布局神器display:flex
Flexbox,一种CSS3的布局模式,也叫做弹性盒子模型,用来为盒装模型提供最大的灵活性。首先举一个栗子,之前我们是这样实现一个div盒子水平垂直居中的。在知道对象高宽的情况下,对居中元素绝对百分比定位,然后通过margin偏移的方式来实现。
<style>
.container{
width: 600px;
height: 400px;
border: 1px solid #000;
position: relative;
}
.box{
width: 200px;
height: 100px;
border: 1px solid #000;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
}
</style>
<div class="container">
<div class="box"></div>
</div>
假如使用了flex后,实现起来就简单了,而且不需要自己去算,也不需要绝对定位,只需要通过对伸缩容器定义两个属性,justify-content定义伸缩项目沿着主轴线的对齐方式为center, align-items定义伸缩项目在侧轴(垂直于主轴)的对齐方式为center,具体如下:
<style>
.container{
width: 600px;
height: 400px;
border: 1px solid #000;
display: flex;
justify-content:center;
align-items:center;
}
.box{
width: 200px; //宽度可以为任意
height: 100px; //高度可以为任意
border: 1px solid #000;
}
</style>
<div class="container">
<div class="box"></div>
</div>
其实Flexbox的优秀特性并不是这一些,首先来一张它的属性图吧~
首先我们来分析下这一张图,从第一个子节点可以看到Flexbox由Flex容器和Flex项目组成,容器即父元素,项目即子元素。他们之间的一些关系可以这样来表示:
这张图可以在接下来的属性分析中用到。
Flex容器
display:flex
当我们使用flexbox布局时候,需要先给父容器的display值定位flex(块级)或者inline-flex(行内级)。
当使用了这个值以后,伸缩容器会为内容建立新的伸缩格式化上下文(FFC),它的上下文展示效果和BFC根元素相同(BFC特性:浮动不会闯入伸缩容器,且伸缩容器的边界不会与其内容边界叠加)。
伸缩容器不是块容器,因此有些设计用来控制块布局的属性,在伸缩布局中不适用,特别是多栏(column),float,clear,vertical-align这些属性。
flex-direction
[flex-direction]属性用来控制上图中伸缩容器中主轴的方向,同时也决定了伸缩项目的方向。
flex-direction:row;也是默认值,即主轴的方向和正常的方向一样,从左到右排列。
flex-direction:row-reverse;和row的方向相反,从右到左排列。
flex-direction:column;从上到下排列。
flex-direction:column-reverse;从下到上排列。 以上只针对ltr书写方式,对于rtl正好相反了。
网页展示效果如下:
flex-warp
[flex-wrap]属性控制伸缩容器是单行还是多行,也决定了侧轴方向(新的一行的堆放方向)。
flex-wrap:nowrap;伸缩容器单行显示,默认值;
flex-wrap:wrap;伸缩容器多行显示;伸缩项目每一行的排列顺序由上到下依次。
flex-wrap:wrap-reverse;伸缩容器多行显示,但是伸缩项目每一行的排列顺序由下到上依次排列。
网页效果见图;
flex-flow
[flex-flow]属性为flex-direction(主轴方向)和flex-wrap(侧轴方向)的缩写,两个属性决定了伸缩容器的主轴与侧轴。
flex-flow:[flex-direction][flex-wrap];默认值为row nowrap;
举两个栗子:
flex-flow:row;也是默认值;主轴是行内方向,单行显示,不换行;
flex-flow:row-reverse wrap;主轴和行内方向相反,从右到左,项目每一行由上到下排列(侧轴)。
网页效果如下:
这里大家可以多自己去试试不同的组合。
justify-content
[justify-content]用于定义伸缩项目在主轴上面的的对齐方式,当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时,这一属性才会对多余的空间进行分配。当项目溢出某一行时,这一属性也会在项目的对齐上施加一些控制。
justify-content:flex-start;伸缩项目向主轴的起始位置开始对齐,后面的每元素紧挨着前一个元素对齐。
justify-content:flex-end;伸缩项目向主轴的结束位置对齐,前面的每一个元素紧挨着后一个元素对齐。
justify-content:center;伸缩项目相互对齐并在主轴上面处于居中,并且第一个元素到主轴起点的距离等于最后一个元素到主轴终点的位置。以上3中都是“捆绑”在一个分别靠左、靠右、居中对齐。
justify-content:space-between;伸缩项目平均的分配在主轴上面,并且第一个元素和主轴的起点紧挨,最后一个元素和主轴上终点紧挨,中间剩下的伸缩项目在确保两两间隔相等的情况下进行平分。
justify-content:space-around;伸缩项目平均的分布在主轴上面,并且第一个元素到主轴起点距离和最后一个元素到主轴终点的距离相等,且等于中间元素两两的间距的一半。完美的平均分配,这个布局在阿里系中很常见。
还是看demo理解起来快一点:
align-items
[align-items]用来定义伸缩项目在侧轴的对齐方式,这类似于[justify-content]属性,但是是另一个方向。(flex-directon和flex-wrap是一对,justify-content和align-items是一对,前者分别定义主轴和侧轴的方向,后者分别定义主轴和侧轴中项目的对齐方式)。
align-items:flex-start;伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起点的边。
align-items:flex-end;伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。
align-items:center;伸缩项目的外边距在侧轴上居中放置。
align-items:baseline;如果伸缩项目的行内轴与侧轴为同一条,则该值与[flex-start]等效。 其它情况下,该值将参与基线对齐。
align-items:stretch;伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。
下面demo只展示center和stretch的栗子,其他几个可以参考flex-start和flex-end那样。
align-content
[align-content]属性可以用来调准伸缩行在伸缩容器里的对齐方式,这与调准伸缩项目在主轴上对齐方式的[justify-content]属性类似。只不过这里元素是以一行为单位。请注意本属性在只有一行的伸缩容器上没有效果。当使用flex-wrap:wrap时候多行效果就出来了。
align-content: flex-start || flex-end || center || space-between || space-around || stretch;
align-content: stretch;默认值,各行将会伸展以占用剩余的空间。
其他可以参考[justify-content]用法。
具体图片来至w3.org官方文档;
太麻烦。写不下去了,摔。
Flex项目
终于写到关于伸缩项目的相关属性了,主要是3个,order,flex(flex-grow,flex-shrink,flex-basis的组合),align-self;用来比较多的是前两个。
order
有一种用法比较多,想设置一组中有两个元素一个排第一,另外一个排最后,主需要将第一个的order:-1;另一个为order:0;这样就好了。
譬如我们想控制一个container中有4个box,想box4为一个显示,box1为最后一个显示。只需要 这样
<style>
.container{
display: flex;
}
.box1{
order:1;
}
.box4{
order:-1;
}
</style>
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</div>
显示效果就这样了:
flex
[flex]属性可以用来指定可伸缩长度的部件,是flex-grow(扩展比例),flow-shrink(收缩比例),flex-basis(伸缩基准值)这个三个属性的缩写写法,建议大家采用缩写的方式而不是单独来使用这3个属性。
flex:none | [ <'flex-grow'> ?<'flew-shrink'> || <'flow-basis'>]
// flex-grow是必须得flex-shrink和flow-basis是可选的
flex-grow:;其中number作为扩展比例,没有单位,初始值是0,主要用来决定伸缩容器剩余空间按比例应扩展多少空间。
flex-grow:;其中number作为收缩比例,没有单位,初始值是1,也就是剩余空间是负值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例,在收缩的时候收缩比率会以[flex-basis]伸缩基准值加权。
flex-basis:|auto;默认是auto也就是根据可伸缩比率计算出剩余空间的分布之前,伸缩项目主轴长度的起始数值。若在「flex」缩写省略了此部件,则「flex-basis」的指定值是长度零。
flex-basis用图来表示就是这样:
align-self
[align-self]用来在单独的伸缩项目上覆写默认的对齐方式,这个属性是用来覆盖伸缩容器属性align-items对每一行的对齐方式。也就是说在默认的情况下这两个值是相等的。
align-self: auto | flex-start | flex-end | center | baseline | stretch
我的看法
讲了这么多他们的使用,我们来看一看flexbox布局的兼容性。
具体大家可以见这个网站:caniuse(http://caniuse.com/#search=flexbox)
在PC端其实很乐观了,基本上主流的浏览器都已经兼容了flex的使用,但是到了移动端就不是那么好了,特别是国内浏览器,考虑到uc浏览器占了大头,但是uc从图中看到只兼容flex最老的一个版本,也就是2009年的版本,即display:box;很多现在flex的优秀特性到了它上面都不兼容了,所以建议大家在使用的时候,假如2009版本可以满足开发要求的话,还是去使用2009版本,这样风险更小。
但是假如想兼容多个浏览器,可以采用优雅降级的方式来使用,这里推荐一个scss的sass-flex-mixin,这样就可以使用最新的写法,并且兼容大部分浏览器了。
相信flexbox布局在以后的移动端会用得越来越多的。
相关文章:
[附源码]秦时明月6.2魔改版_搭建架设教程_附GM工具_安卓苹果
本教程仅限学习使用,禁止商用,一切后果与本人无关,此声明具有法律效应!!!! 教程是本人亲自搭建成功的,绝对是完整可运行的,踩过的坑都给你们填上了 一. 演示视频 https://githubs.xyz/boot?app=50二. 环境 联网环境: centos7.6 , 放开所有端口 单机环境: VM虚拟机…...
WordPress MasterStudy LMS插件 SQL注入漏洞复现(CVE-2024-1512)
0x01 产品简介 WordPress和WordPress plugin都是WordPress基金会的产品。WordPress是一套使用PHP语言开发的博客平台。该平台支持在PHP和MySQL的服务器上架设个人博客网站。WordPress plugin是一个应用插件。 0x02 漏洞概述 WordPress Plugin MasterStudy LMS 3.2.5 版本及之…...
速卖通商品评论API(aliexpress.item_review)返回值全解析
在电商领域,用户评论对于产品的推广和销售具有极其重要的影响。速卖通(AliExpress)作为全球知名的跨境电商平台,提供了丰富的API接口供开发者使用,其中aliexpress.item_review API允许开发者获取商品的评论信息。本文将…...
如何写出优雅的代码,程序员都要了解的开闭原则
开闭原则(Open-Closed Principle,OCP)是面向对象编程中的重要原则之一。它指出软件实体(如类、模块、函数等)应该对扩展开放,对修改关闭。要写出优雅的代码,可以考虑以下几点:良好的结构和设计:合理划分模块,保持代码的清晰性和可读性。 单一职责原则:每个类或函数只…...
SparkSql介绍
概述 SparkSQL,顾名思义,就是Spark生态体系中的构建在SparkCore基础之上的一个基于SQL的计算模块。SparkSQL的前身不叫SparkSQL,而叫Shark,最开始的时候底层代码优化,sql的解析、执行引擎等等完全基于Hive,…...
wpf字符图标
1、网页使用: font face=webdings size="32">i</font 2、WPF使用: TextBlock Text="1" FontFamily="Wingdings" FontSize="32"></TextBlock...
前端布局神器display:flex
Flexbox,一种CSS3的布局模式,也叫做弹性盒子模型,用来为盒装模型提供最大的灵活性。首先举一个栗子,之前我们是这样实现一个div盒子水平垂直居中的。在知道对象高宽的情况下,对居中元素绝对百分比定位,然后…...
【Typescript学习】使用 React 和 TypeScript 构建web应用(三)所有组件
教程来自freecodeCamp:【英字】使用 React 和 TypeScript 构建应用程序 跟做,仅记录用 其他资料:https://www.freecodecamp.org/chinese/news/learn-typescript-beginners-guide/ 第三天 以下是视频(0:40-0:60) 的内容 目录第三天1 创建Todo…...
7.3 矩阵范数
定义 向量有范数,矩阵也有范数,定义和向量范数类似,不过多了一条要求。它的定义如下: 正定性positivity,∥A∥≥0\parallel A\parallel\ge 0∥A∥≥0,只有A0A0A0时才取等号;非负齐次性homogeneity或scalin…...
Jetpack架构组件库:Hilt
Hilt Hilt 是基于 Dagger2 的依赖注入框架,Google团队将其专门为Android开发打造了一种纯注解的使用方式,相比 Dagger2 而言使用起来更加简单。 依赖注入框架的主要作用就是控制反转(IOC, Inversion of Control), 那么什么是控制…...
InstanceNorm LayerNorm
InstanceNorm && LayerNorm author: SUFEHeisenberg date: 2023/01/26 先说结论: 将Transformer类比于RNN:一个token就是一层layer,对一整句不如token有意义原生Bert代码或huggingface中用的都是InstanceNorm instead of LayerNormÿ…...
数据结构---堆
堆 定义 基本操作 建堆 堆排序 优先队列 一、堆的定义: 堆必须是一个完全二叉树 还得满足堆序性 什么是完全二叉树呢? 完全二叉树只允许最后一行不为满 且最后一行必须从左到右排序 最后一行元素之间不可有间隔,中间不可有空缺 如下几棵树…...
3小时精通opencv(五) 利用TrackBar进行颜色检测
3小时精通opencv(五) 利用TrackBar进行颜色检测 参考视频资源:3h精通Opencv-Python 本章内容介绍如何利用TrackBar调节色域, 手动提取到我们需要的颜色 文章目录3小时精通opencv(五) 利用TrackBar进行颜色检测创建Trackbar色彩检测创建Trackbar 在opencv中使用createTrackbar函…...
学习记录673@项目管理之进度管理案例
本文主要是进度管理之关键链路法的案例。 案例 Perfect 项目的建设方要求必须按合同规定的期限交付系统,承建方项目经理李某决定严格执行项目进度管理,以保证项目按期完成。他决定使用关键路径法来编制项目进度网络图。在对工作分解结构进行认真分析后&…...
【设计模式】结构型模式·组合模式
学习汇总入口【23种设计模式】学习汇总(数万字讲解体系思维导图) 写作不易,如果您觉得写的不错,欢迎给博主来一波点赞、收藏~让博主更有动力吧! 一.概述 又称为部分整体模式,用于把一组相似的对象当作一个单一的对象。组合模式依…...
Vue-Router详解
1、前端路由的发展历程 1.1、认识前端路由 路由其实是网络工程中的一个术语: 在架构一个网络时,非常重要的两个设备就是路由器和交换机。当然,目前在我们生活中路由器也是越来越被大家所熟知,因为我们生活中都会用到路由器&…...
Eclipse中的Build Path
Eclipse中的Build Path简介如果修改了Build Path中的中的JRE版本,记得还需要同步修改Java编译器的版本,如下图红框所示简介 Build Path是Java工程包含的资源属性合集,用来管理和配置此Java工程中【除当前工程自身代码以外的其他资源】的引用…...
Python与Matlab混合编程案例
前言因为项目需要,需要批处理很多Matlab的.m文件,从每个文件中提取结果合并到一个文件中。 很明显,如果手工统计,几百个文件会累死的。 因此立即想到了Python在批处理方面的优势,因此就在网上找了相关资料,…...
stack、queue、priority_queue
容器适配器 适配器是一种设计模式(设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结),该种模式是将一个类的接口转换成客户希望的另外一个接口。 其中stack和queue都是容器适配器,其中stack可以封装vector、list以及我们…...
高通平台开发系列讲解(GPS篇)gpsONE 系统架构
文章目录 一、系统架构图二、gpsONE系统组成三、gpsONE交互流程沉淀、分享、成长,让自己和他人都能有所收获!😄 📢高通的定位系统模块,名称叫gpsONE。 一、系统架构图 二、gpsONE系统组成 GPS系统架构可以分为六个部分: APP层Framework Client端(LocationManager API…...
zkMove——针对Move合约生态的zkVM
1. 引言 Move为不同于Solidity的,开源的安全的智能合约开发语言,最早由Facebook为Diem链创造开发。不过,Move本身设计为与平台无关的语言,具有通用的库、工具,并使得采用完全不同数据模型和执行模型的链的开发者社区都…...
贪心算法的题目
每一步都做出一个局部最优的选择,最终的结果就是全局最优 只有一部分问题才能用贪心算法(严格来讲,一个问题能不能用贪心算法需要证明的) 2022.8.30 蔚来笔试题: 有a个y,b个o,c个u,用这些字母拼成一个字符串…...
线程控制--Linux
文章目录线程理解线程的优点与缺点进程的多个线程共享线程控制线程创建线程终止线程等待线程分离总结线程理解 谈及线程,就不得不谈起进程与线程的关系了。学习完前面有关进程的知识,之前我们对进程的定义是:内核数据结构代码和数据。但是今…...
17 | 如何做好面试复盘?将经验提升为能力
前言 前言:面试是最好的查漏补缺机会,做好面试复盘又是十分的重要。 文章目录前言一. 关于复盘1. 什么是复盘(What)2. 复盘的目的(Why)3. 什么时候需要复盘(When)4. 怎么进行复盘&am…...
数据结构-树
1. 二叉树遍历 #include <stdbool.h> #include "stdio.h" #include "stdlib.h"typedef struct TNode *Position; typedef Position BinTree; // 二叉树类型 typedef char ElementType;// 树结点定义 struct TNode {ElementType Data; // 结点数据Bin…...
Python3 循环语句
本章节将为大家介绍 Python 循环语句的使用。 Python 中的循环语句有 for 和 while。 Python 循环语句的控制结构图如下所示: while 循环 Python 中 while 语句的一般形式: while 判断条件(condition):执行语句(statements)…… 执行流程…...
时序数据处理中的拟合问题
对于深度学习或机器学习模型而言,我们不仅要求它对训练数据集有很好的拟合(训练误差),同时也希望它可以对未知数据集(测试集)有很好的拟合结果(泛化能力),所产生的测试误差被称为泛化误差。度量泛化能力的好坏,最直观的表现就是模型的过拟合(overfitting)和欠拟合(…...
[数据结构基础]排序算法第一弹 -- 直接插入排序和希尔排序
目录 一. 排序的概念及分类 1.1 排序的概念 1.2 常见的排序算法 二. 直接插入排序 2.1 直接插入排序的实现逻辑 2.2 直接插入排序的实现代码 2.3 直接插入排序的时间复杂度分析 三. 希尔排序 3.1 希尔排序的实现逻辑 3.2 希尔排序实现代码 3.3 希尔排序的效率测试 …...
厚积薄发打卡Day115:Debug设计模式<简单工厂、工厂方法、抽象工厂>
厚积薄发打卡Day115:Debug设计模式<简单工厂、工厂方法、抽象工厂> 简单工厂 定义 由一个工厂对象决定创建出哪一种产品类的实例(严格意义并不是设计模式,更是一种风格) 类型:创建型,但不属于GOF…...
python元组
python元组 文章目录python元组一、实验目的二、实验原理三、实验环境四、实验内容五、实验步骤1.创建元组2.访问元组3.修改元组4.删除元组5.索引及截取6.元组运算符7.内置函数总结一、实验目的 掌握元组的用法 二、实验原理 Python 的元组与列表类似,不同之处在…...
gcc中预定义的宏__GNUC__ __GNUC_MINOR__ __GNUC_PATCHLEVEL__
今天在看Linux系统编程这本书的代码的时候看到了__GNUC__,不太清楚这个宏所以去查了一下,以此记录。GNU C预定义了一系列的宏,这些宏都是以双下划线开始的,这里只讲一下__GNUC__ __GNUC_MINOR__ __GNUC_PATCHLEVEL__,完…...
AxMath使用教程(持续更新中)
前言 这两天学了学Latex,主要是为了以后写毕业论文做铺垫,而且Latex在数学公式这一方面,要比Word方便许多,于是我就下载了一款国产的公式编辑器——AxMath。永久会员不贵,只要36元,而且软件很好用…...
day11 栈和队列 | 20、有效的括号 1047、删除字符串中的所有相邻重复项 150、逆波兰表达式求值
题目 20、有效的括号 给定一个只包括 ‘(’,‘)’,‘{’,‘}’,‘[’,‘]’ 的字符串,判断字符串是否有效。 有效字符串需满足: 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序…...
【前端面试】http面试整理
"一问一答"模型的协议 客户端通过http请求;服务器端根据请求返回客户想要的资源;客户端接收到资源;http是什么 HTTP是超文本传输协议,是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约…...
倒霉倒霉倒霉(传送门 bfs 三维数组 递归 综合运用
题目描述“啊!倒霉倒霉倒霉~”龙叔被困在一座大厦里了,可恶的瓦龙把这座大厦点燃了,他借机消灭龙叔。这座大厦有L层,每一层都有R*C个房间。熊熊火焰蔓延十分快,有的房间已经着火了,龙叔没办法通过。这时老爹…...
C++函数定义和调用介绍
C函数定义和调用介绍 函数的意义:利用率高,可读性强,利于移植。 一个C程序中主函数有且只有一个,是程序的入口,而函数(或称子函数)可以有很多。 每个 C 程序都至少有一个函数,即主…...
手把手带初学者快速入门 JAVA Web SSM 框架
博主也是刚开始学习SSM,为了帮大家节省时间,写下SSM快速入门博客 有什么不对的地方还请 私信 或者 评论区 指出 只是一个简单的整合项目,让初学者了解一下SSM的大致结构 项目先把框架写好,之后在填写内容 项目压缩包 完整的蓝奏…...
RocketMQ源码本地搭建调试
1 GitHub源码 git clone https://github.com/apache/rocketmq.git导入IDEA,可在命令行执行mvn compile一下,保证源码能够正确编译。本次我使用的master分支的版本-4.8.0。下面我们开始准备启动Namesrv。 2 启动Namesrv 到namesrv模块找到NamesrvStart…...
Axios 二次封装并使用
index.js import axios from "axios";let token localStorage.getItem("token"); // let token "123213"; class Request {// 自定义变量instance;constructor(config) {// console.log(config)// 创建axios 实例,变量接收this.in…...
【SpringCloud】Nacos集群搭建
集群结构图官方给出的Nacos集群图如下:其中包含3个nacos节点,然后一个负载均衡器代理3个Nacos。这里负载均衡器可以使用nginx。我们接下来要尝试 Nacos集群搭建,效果图如下所示:三个nacos节点的地址:节点ipportnacos1l…...
【CSDN的2022与2023】普普通通的三年,从懵懂、焦虑到坚定、奋进,破除焦虑努力成为更好的自己
大家好,我是黄小黄!一名普通的软件工程在读学生。最近终于闲下来了一丢丢!借着休息之余,来写一篇年度总结散散心~与其说是年度总结,不如说是给大学生活与莽莽撞撞的自己一个交代叭! 这些都是小标题~碎碎念1…...
k8s单机版使用本地存储local-path-provisioner
在k8s单机环境中,我们经常使用本机路径作为持久化存储。在k8s官方文档中有两种方式使用本机存储,一种是hostPath,另一种是local volume,这两种都不支持动态扩容,并且程序移植改动比较大,而local-path-provi…...
MySQL优化(1)执行计划explain中type属性详解
系列文章目录1.初始化测试数据1.初始化表格(user表)2.初始化表格(product表)3.初始化表格(user表数据初始化)4.初始化表格(product表函数)5.初始化表格(product表数据初始…...
servlet过滤器Filter简要回顾-过滤请求字符编码,/和/*和/**的区别
servlet过滤器Filter简要回顾-过滤请求字符编码,/和/*和/**的区别servlet过滤器1.filter过滤器的含义2.filter过滤器的使用3.测试-过滤字符编码正确响应中文编码3.1 创建servlet用于显示中文字符3.2 自定义过滤器3.3 配置web.xml中的servlet映射以及过滤器请求拦截3.4 运行输出…...
Java链表OJ题
目录1. 删除链表中等于给定值val的所有结点2. 逆置单链表3. 链表的中间结点4. 链表中倒数第k个结点5. 将两个有序链表合并为一个新的有序链表6. 以给定值x为基准将链表分割成两部分7. 判断是否为回文链表8. 两个链表的第一个公共结点9. 判断链表中是否有环10. 链表开始入环的第…...
0、Spring工程构建Spring快速入门Spring配置文件详解注入Sprint相关API
1、Spring工程构建 创建工程项目目录文件夹 IDEA选择项目new一个module 配置案例 aop创建 创建并下载完毕后,点击file选择projert 选择按照的jdk版本 output选择当前目录, 点击右下方apply 选择facets,点击""号选择web 选择当前…...
网络原理之HTTP/HTTPS、TCP、IP四层协议栈
文章目录一、应用层(一)xml协议(二)json协议(三)protobuffer协议(四)HTTP协议1. 抓包工具,fiddler2. HTTP报文格式3. HTTP请求(Request)(1)URL基本…...
CS61B 2021spring HW0
HW 0: A Java Crash Course 文章目录HW 0: A Java Crash CourseA Basic ProgramCreative Exercise 1a: Drawing a TriangleCreative Exercise 1b: DrawTriangleExercise 2、3Optional: Exercise 4Java可视化orz表达积累参考资料这个hw是optional,然后主要是给至少学…...
自动驾驶环境感知——视觉传感器技术
文章目录1. 摄像头的成像原理1.1 单目视觉传感器的硬件结构1.2 单目视觉的成像原理 –小孔成像模型1.3 单目视觉的成像原理 – 像素坐标系1.4 单目视觉三维坐标系转换 – 外参1.5 单目视觉的坐标系转换 – 从世界坐标点到像素坐标1.6 单目视觉的特性2. 视觉传感器的标定2.1 视觉…...
分享148个ASP源码,总有一款适合您
ASP源码 分享148个ASP源码,总有一款适合您 下面是文件的名字,我放了一些图片,文章里不是所有的图主要是放不下..., 148个ASP源码下载链接:https://pan.baidu.com/s/1e2PvBmXxZA8C3IelkP8ZtQ?pwdj7lp 提取码&#x…...
Java线程的生命周期的五种状态
前面在《有关Java多线程的几个概念》(https://blog.csdn.net/helloworldchina/article/details/128753898)讲述了Java线程的生命周期的五种状态。在这里再详述一下线程的5种状态。 在java中,任何对象都要有生命周期,线程也一样&a…...
springboot自定义拦截器的简单使用和一个小例子
springboot自定义拦截器的使用1. 自定义拦截器2. 拦截器登录验证的小demo2.1 配置pom.xml2.2 创建User的bean组件2.3 创建需要的表单页面以及登录成功的页面2.4 编写controller映射关系2.5 自定义拦截器类,实现intercepetor接口2.6注册添加拦截器,自定义…...
APT之木马静态免杀
前言 这篇文章主要是记录手动编写代码进行木马免杀,使用工具也可以免杀,只不过太脚本小子了,而且工具的特征也容易被杀软抓到,指不定哪天就用不了了,所以要学一下手动去免杀木马,也方便以后开发一个只属于…...
设计模式 - 创建型模式_抽象工厂模式
文章目录创建型模式概述Case场景模拟工程模拟早期单机Redis的使用Bad ImplBetter Impl (抽象⼯⼚模式重构代码)定义适配接⼝实现集群适配器接口代理方式的抽象工厂类单元测试小结创建型模式 创建型模式提供创建对象的机制, 能够提升已有代码…...
9、断点调试
文章目录9、断点调试9.1 为什么需要Debug9.2 Debug的步骤1 添加断点2 启动调试3 单步调试工具介绍9.3 多种Debug情况介绍1 行断点2 方法断点3 字段断点4 条件断点5 异常断点6 线程断点7 强制结束9.4 自定义调试数据视图9.5 常见问题【尚硅谷】idea实战教程-讲师:宋红…...
yolo结构介绍
更新中 yolo结构: 这个是针对最早的v5版本1.0进行讲解,现在2022最新版本是V6.2。有一些细节的差别比如Backbone部分Focus倍替换成6*6的Conv,bottleneckCSP替换为C3,Neck部分SPP被替换成SPPF等 Release v1.0 ultralytics/yolov5 (github.com) # parameters nc: 80 # n…...
Rumor Containment by Blocking Nodes in Social Networks
Abstract 谣言在社交网络中快速传播,可能严重损害我们的社会。在本文中,我们提出了一种基于整数线性规划(ILP)的数学规划公式,通过阻止建模为线性阈值模型的复杂社交网络中的节点子集(称为阻止者ÿ…...
日志打印传值 传引用 右值引用性能测试(Linux/QNX)
结论 Linux平台和qnx平台优化后传值性能都是比传引用的差,也比传右值的差,因此传参时有必要传递引用。 测试代码 #include <cstdint> #include <ctime> #include <string>#ifdef __linux__#define ITERATIONS 10000000 #else#defin…...
ShowMeAI | 这是我们知道的,关于〖Suno 〗和〖AI音乐〗的一切
👀日报&周刊合集 | 🎡生产力工具与行业应用大全 | 🧡 点赞关注评论拜托啦! Suno 是一款AI音乐创作工具,可以通过提示词和设置生成一段音乐,而且可以包含歌词和人声 (这非常难得)。在经历了两年探索之后…...
【Java 刷题记录】前缀和
前缀和 25. 一维前缀和 示例1: 输入: 3 2 1 2 4 1 2 2 3输出: 3 6import java.util.Scanner;// 注意类名必须为 Main, 不要有任何 package xxx 信息 public class Main {public static void main(String[] args) {Scanner in new Scanner(S…...
java入门详细教程——day01
目录 1. Java入门 1.1 Java是什么? 1.2 Java语言的历史 1.3 Java语言的分类 1.4 Java语言的特点 1.4.1 先编译再解释运行 1.4.2 跨平台 1.5 JRE和JDK(记忆) 1.6 JDK的下载和安装(应用) 1.6.1 下载 1.6.2 安…...
PVZ2 植物克僵尸【第二期】
众所周知,PVZ2(植物大战僵尸2)中有许多恶心的僵尸,而我们不得不派出它们的————克星!(*为建议方法) 5.战机小鬼 战机小鬼,恶心会发射子弹,所以: 1&…...
QGraphicsView实现简易地图11『指定层级-定位坐标』
前文链接:QGraphicsView实现简易地图10『自适应窗口大小』 提供一个地图初始化函数,指定地图显示的中心点和地图缩放层级 能够让地图显示某一层级的瓦片,并将中心点坐标显示在视图中心。 1、动态演示效果 7级地图-大连-老虎滩 定位到 8级地图…...
OpenFeign @PathVariable需注明参数名称
在定义 OpenFeign 的远程接口时,如果是路径拼接作为参数的远程接口,需要在PathVariable需注明参数名称,不然代码启动时会报错。 正例FeignClient(value ServiceConstants.SYSTEM, fallbackFactory RemoteFileFallbackFactory.class) publi…...
C++怎样产生随机数
C怎样产生随机数? 这里要用到的是 rand() 函数和 srand() 函数 rand() 会返回一随机数值, 范围在 0 至 RAND_MAX ,RAND_MAX 定义在 stdlib.h, 其值根据系统配置设定 例如: #include<stdio.h> #include<stdlib.h> int main() {for(int i0;i<10;i)…...
专业展厅设计公司都有哪些优势
1、创造独特的个性化体验 定制展厅进行设计管理公司以客户的特定社会需求为出发点,创造出独一无二的展览体验。能够为每个企业项目发展打造个性化的设计,使展示活动空间可以反映不同客户的品牌和愿景。这有助于吸引更多观众的注意,并使展览更…...
【JavaEE 初阶(三)】多线程代码案例
❣博主主页: 33的博客❣ ▶️文章专栏分类:JavaEE◀️ 🚚我的代码仓库: 33的代码仓库🚚 🫵🫵🫵关注我带你了解更多线程知识 目录 1.前言2.单例模式2.1饿汉方式2.2饿汉方式 3.阻塞队列3.1概念3.2实现 4.定时器4.1概念4.…...
【痕迹】QQ+微信朋友圈和聊天记录分析工具1.0.3
【痕迹】QQ微信朋友圈和聊天记录分析工具1.0.3 (1)纯Python语言实现,使用Flask后端,本地分析,不上传个人数据。 (2)数据可视化分析QQ、微信聊天记录,提取某一天的聊天记录与大模型…...