前端——CSS

news2025/5/25 6:54:13

目录

文章目录

前言

一.CSS简介

1.CSS选择器

2.CSS选择器语法

3.CSS样式引入

4.CSS 高级选择器

二.CSS样式

1.字体

 ​编辑

2.文本

3. 背景

 4.边框

5.边距

6.浮动

7.清除浮动

8.定位

9. 列表样式

10.伪类样式

三.盒子模型

四.CSS3新特性

1.边框

2.盒子阴影

3.CSS3渐变

4.文本效果

 5. 字体

6.变形

6.1 平移

6.2 2D 缩放

6.3  旋转

6.4 倾斜

7. 过渡

 8.媒体查询

 五.网格布局

六.flex 布局

1.Flex简介

2 容器的属性

2.1flex-direction属性

2.2  flex-wrap属性

2.3 flex-flow

2.4 justify-content属性

2.5 align-items属性

2.6 align-content属性

3. Flex 项的属性

3.1 order属性

 3.2 flex-grow属性

3.3 flex-shrink属性

3.4 flex-basis属性

3.5 flex属性

3.6 align-self属性

总结

文章目录

  • 前言
  • 一.CSS简介
  • 二.CSS样式
  • 三.盒子模型
  • 四.CSS3新特性
  • 五.网格布局
  • 六.flex布局
  • 总结

前言

CSS 是 Cascading Style Sheet 的简写，表示层叠样式表，主要用于渲染HTML元素在网页中的展示效果。主要包括对元素高度、宽度、字体、颜色、背景图片、边距、定位、呈现方式等设定

一.CSS简介

1.CSS选择器

CSS 选择分为基本选择器和层次选择器。
CSS 基本选择分为ID选择器、类选择器和标签选择器三大类。
CSS 选择器有优先级之分： ID选择器 > 类选择器 > 标签选择器

2.CSS选择器语法

/*标签选择器*/
标签名{
 声明1;
 声明2;
 ...
 声明n;
}
/*类选择器*/
.类名{
 声明1;
 声明2;
 ...
 声明n;
}
/*ID选择器*/
#ID值{
 声明1;
 声明2;
 ...
 声明n;
}

3.CSS样式引入

CSS 样式分为行类样式、内部样式和外部样式三种。

行类样式

<div style="color:red;font-size:20px;">
 这是行内样式
</div>

内部样式

<style>
  #demo{
    color:red;
    font-size:20px;
 }
</style>
<div id="demo">
 这是内部样式
</div>

外部样式

/*demo.css*/
#demo {
  color:red;
  font-size:20px;
}
<!-- demo.html -->
<head>
  <link type="text/css" href="demo.css" rel="stylesheet">
</head>

 CSS 样式引入也具有优先级：行内样式 > 内部样式 > 外部样式

4.CSS 高级选择器

后代选择器

div ul li {
 
}

 子代选择器

div > ul > li {
 
}

二.CSS样式

1.字体

 

 字体的复合属性是有顺序的：风格 粗细 大小 类型

2.文本

/*需要注意：文本两端对齐只对最后一行有效，因此需要添加一个text-align-last属性来完成两端对齐*/
text-align:justify;
text-align-last: justify;

3. 背景

 4.边框

5.边距

边距分为外边距和内边距。边距有4个方向：上、下、左、右。
外边距： margin

margin-top: 2px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
margin: 2px;

内边距：padding

padding-top: 2px;
padding-bottom: 2px;
padding-left: 2px;
padding-right: 2px;
padding: 2px;

6.浮动

元素浮动有两个方向：left 和 right。

float: left;

7.清除浮动

清除浮动有三种选择：left、right 和 both。
浮动的元素与其他元素不在同一个层级，清除浮动后，浮动的元素就与其他元素在同一个层级了

<style>
  html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
 }
  .container{
    background: red;
  }
  .block1,
  .block2,
  .block3{
    width:200px;
    height: 100px;
 }
  .block1{
    background: black;
    float: left;
 }
  .block2{
    background: orange;
    float: right;
 }
  .block3{
    background: yellowgreen;
    clear: both
 }
</style>
<div class="container">
 <div class="block1"></div>
 <div class="block2"></div>
 <div class="block3"></div>
</div>

8.定位

元素定位分为无定位、绝对定位、相对定位和固定定位四种。元素定位是根据参照物来进行定位，定位时根据元素与参照物上下左右四个方向中任意相邻的两个方向的距离来进行定位，定位方式不同，参照物也不一样。元素定位默认为无定位。绝对定位和固定定位的元素必须设置宽度和高度

position: relative;
top: 10px;
left: 10px;
position: absolute;
top: 10px;
right: 10px;
position:fixed;
left: 20px;
bottom: 20px;

9. 列表样式

10.伪类样式

常用的伪类样式是鼠标悬浮的伪类样式:hover

div:hover{
  background: red;
}

 超链接伪类样式

 当超链接同时拥有上面的伪类样式时，其书写顺序有要求： a:link->a:visited->a:hover->a:active

三.盒子模型

HTML 中的每一个元素都是一个容器，这个容器就像是一个盒子，它包括：外边距，边框，填充，和实际内容

元素的总宽度 = 左外边距 + 左边框 + 左内边距 + 宽度 + 右内边距 + 右边框 + 右外边距
元素的总高度 = 上外边距 + 上边框 + 上内边距 + 高度 + 下内边距 + 下边框 + 下外边距

四.CSS3新特性

1.边框

border-radius:用于创建圆角

#border{
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 5px;
}

2.盒子阴影

box-shadow:用来添加阴影

box-shadow:阴影类型 水平阴影位置 垂直阴影位置 阴影模糊距离 阴影大小 阴影颜色;
示例：
box-shadow: inset 2px 2px 2px 2px red;

3.CSS3渐变

线性渐变—Linear Gradients:颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

linear-gradient(渐变方向, 颜色1,  yanse2, ..., 颜色n)
示例：
.block1 {
  /* 从上到下的线性渐变： */
    background: linear-gradient(red, blue);
}
.block2 {
  /* 从左到右的线性渐变：*/
    background: linear-gradient(to right,red, blue);
}
.block3 {
  /* 从左上角到右下角的线性渐变：*/
    background: linear-gradient(to bottom right, red , blue);
}

径向渐变—Radial Gradients:圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

radial-gradient(center, shape size, start-color, ..., last-color);
示例：
.block1 {
  /* 颜色结点均匀分布的径向渐变：*/
    background: radial-gradient(red, green, blue);
}
.block2 {
  /* 颜色结点不均匀分布的径向渐变： */
    background: radial-gradient(red 5%, green 15%, blue 60%);
}
.block3 {
  /* 形状为圆形的径向渐变：*/
    width: 600px;height: 400px;
    background: radial-gradient(circle, red, yellow, green);
}

4.文本效果

text-shadow:向文本添加阴影

text-overflow:当文本溢出包含元素时发生的事情
超出部分显示省略号
white-space:nowrap 文本不会换行，在同一行继续
overflow:hidden 溢出隐藏
text-overflow:ellipsis 用省略号来代表被修剪的文本

/*文本阴影与盒子阴影的区别在于：文本阴影无内外之分，且文本阴影没有阴影大小的设置*/
text-shadow: 2px 2px 2px red;
/*文本溢出时不换行*/
white-space: nowrap;
/*元素溢出部分隐藏掉*/
overflow: hidden;
/*文本溢出部分使用省略号显示*/
text-overflow: ellipsis;

 5. 字体

@font-face {
  font-family: 必需。规定字体的名称
  src: 必需。定义字体文件的 URL
  font-weight: 可选。定义字体的粗细。默认是 "normal"
  font-style: 可选。定义字体的样式。默认是 "normal"
}

6.变形

CSS3 变形是一些效果的集合。如平移、旋转、缩放、倾斜效果；每个效果都可以称为变形，它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化

/*transform-function是一个变形函数，可以是一个，也可以是多个，中间以空格分开*/
transform:[transform-function];
6.1 平移

translate(x, y)：平移函数，基于X、Y坐标重新定位元素的位置
translateX(x)：表示只设置X轴的位移
translateY(y)：表示只设置Y轴的位移

/*transform: translate(20px, 30PX);*/
/*transform: translateX(20px);*/
transform: translateY(20px);
6.2 2D 缩放

scale(x, y)：缩放函数，可以使任意元素对象尺寸发生变化。当该函数只接收一个值时，表示同时设置X与Y的值
scaleX(x)：表示只设置X轴的缩放
scaleY(y)：表示只设置Y轴的缩放

/*transform: scale(0.5, 1.5);*/
/*transform: scaleX(0.5);*/
transform: scaleY(0.5);
6.3  旋转

rotate(degree)：旋转函数，取值是一个度数值。参数degree单位使用deg表示，参数degree取正值时元素相对原来中心顺时针旋转

transform: rotate(10deg);
6.4 倾斜

skew(x, y)：倾斜函数，取值是一个度数值。
skewX(x)：表示只设置X轴的倾斜
skewY(y)：表示只设置Y轴的倾斜

/*transform: skew(20deg, 60deg);*/
/*transform: skewX(45deg);*/
transform: skewY(45deg);

7. 过渡

transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等
CSS3 transition的过渡功能通过一些 CSS 的简单动作触发样式平滑过渡

transition:[transition-property  transition-duration  transition-timing-function transition-delay ]

transition-property：
过渡或动态模拟的 CSS 属性，为了方便，一般都指定all，表示所有属性
transition-duration：完成过渡所需要的时间，即从设置旧属性到换新属性所花费的时间，单位为秒
transition-timing-function：指定过渡函数
linear：规定以相同速度开始至结束的过渡效果
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）
ease-in：规定以慢速开始的过渡效果
ease-out：规定以慢速结束的过渡效果
ease-in-out：规定以慢速开始和结束的过渡效果
transition-delay：过渡开始出现的延迟时间。
正值表示元素过渡效果不会立即触发，当过了设置的时间值后才会被触发；
负值表示元素过渡效果会从该时间点开始显示，之前的动作被截断；
0是默认值，元素过渡效果立即执行


过渡效果的出发时机
伪类触发： :hover :active :focus :checked
媒体查询：通过@media属性判断设备的尺寸，方向等 

JavaScript触发：用JavaScript脚本触发

#tran{
  width: 200px;
  height: 200px;
  background-color: red;
  /*宽度发生变化时就会触发过渡效果*/
  transition: width .5s ease 0s;
}
#tran:hover{
  width: 50px;
}

 8.媒体查询

@media mediatype and|not|only (media feature) {
  CSS-Code;
}

mediatype : 表示媒体类型
all：用于所有设备
screen：用于电脑屏幕，平板电脑，智能手机等。
media feature ：表示媒体功能
max-width：定义输出设备中的页面最大可见区域宽度。
min-width：定义输出设备中的页面最小可见区域宽度。

.box{
  background-color: red;
  height: 50px;
}
@media screen and (min-width: 700px){
  .box{
    width: 200px;
 }
}
@media screen and (min-width: 900px){
  .box{
    width: 300px;
 }
}
@media screen and (min-width: 1200px){
  .box{
    width: 400px;
 }
}

 五.网格布局

如上图，网格布局就是指通过水平和垂直创建的一种模式，可以在这个模式上排列元素，网格通常具有行和列以及间隙（列跟列之间的距离，gutter）。

fr（fraction ，片段）布局单位

fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。


repeat
CSS 函数表示轨道列表中的重复部分，可以更紧凑地写入列和行重复。

<div class="wrapper">
  <div class="col">11</div>
  <div class="col">12</div>
  <div class="col">13</div>
  <div class="col">14</div>
  <div class="col">21</div>
  <div class="col">22</div>
  <div class="col">23</div>
  <div class="col">24</div>
</div>

用网格创建一个布局，一行四列，每列等宽。

.wrapper {
  /* 转化元素类型 */
  display: grid;
  /* 设置网格的间隙，包含了行和列，也可以使用grid-row-gap和grid-column-gap分开设置 */
  grid-gap: 10px;
  /* 设置每列的尺寸 */
  grid-template-columns: repeat(4, 1fr);
}

repeat（4,1fr） 的作用，创建4列等宽的网格，每列 1fr 它们所占的空间量相等。也可以使用百分比依次设置每一列占比

六.flex 布局

1.Flex简介

Flex 是 Flexible Box 的缩写，意为"弹性布局"。采用 Flex 布局的元素，称为 Flex 容器（flex
container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项（flex item）

 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。

Flex 项默认沿主轴排列。单个项占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 crosssize 。

2 容器的属性

以下6个属性设置在容器上。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

2.1flex-direction属性

flex-direction 属性决定主轴的方向（即项目的排列方向）。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row （默认值）：主轴为水平方向，起点在左端。
row-reverse ：主轴为水平方向，起点在右端。
column ：主轴为垂直方向，起点在上沿。
column-reverse ：主轴为垂直方向，起点在下沿。

 

2.2  flex-wrap属性

默认情况下，Flex 项目都排在一条线（又称"轴线"）上。 flex-wrap 属性定义，如果一条轴线排不下，如何换行。

.box{
     flex-wrap: nowrap | wrap | wrap-reverse;
}

 nowrap （默认）：不换行。

wrap ：换行，第一行在上方

 

 wrap-reverse ：换行，第一行在下方。

2.3 flex-flow

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap 。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}
2.4 justify-content属性

justify-content 属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start （默认值）：左对齐
flex-end ：右对齐
center ： 居中
space-between ：两端对齐，项目之间的间隔都相等。
space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

2.5 align-items属性

align-items 属性定义项目在交叉轴上如何对齐

.box {
 align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start ：交叉轴的起点对齐。
flex-end ：交叉轴的终点对齐。
center ：交叉轴的中点对齐。
baseline : 项目的第一行文字的基线对齐。
stretch （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

2.6 align-content属性

align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
   align-content: flex-start | flex-end | center | space-between | space-around |stretch;
}

flex-start ：与交叉轴的起点对齐。
flex-end ：与交叉轴的终点对齐。
center ：与交叉轴的中点对齐。
space-between ：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around ：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch （默认值）：轴线占满整个交叉轴。

3. Flex 项的属性

以下6个属性设置在Flex 项上。
order
flex-grow
flex-shrink
flex-basis
flex
align-self

3.1 order属性

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: <integer>;
}

 

 3.2 flex-grow属性

flex-grow 属性定义项目的放大比例，默认为 0 ，即如果存在剩余空间，也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

 

如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3.3 flex-shrink属性

flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}

 

如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的 flex-
shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

3.4 flex-basis属性

flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto ，即项目的本来大小。

.item {
 flex-basis: <length> | auto; /* default auto */
}

 它可以设为跟 width 或 height 属性一样的值（比如350px），则项目将占据固定空间。

3.5 flex属性

flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。

.item {
 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值： auto ( 1 1 auto ) 和 none ( 0 0 auto )。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

3.6 align-self属性

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为
auto ，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch 。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

 

 该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

总结

CSS差不多这些了，由于我才大一前端只学完到JavaScript，所以更新完JavaScript就结束前端的更新啦！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1416847.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

win11设置mysql开机自启

win11设置mysql开机自启

目录 命令式 1、打开命令提示符或 PowerShell&#xff1a; 2、使用管理员权限运行命令行工具&#xff1a; 3、设置 MySQL 服务为开机自启动&#xff1a; 4、启动 MySQL 服务&#xff1a; 5、 验证设置是否生效&#xff1a; 操作视图式 1、右击任务栏 ---> 选择任务管…
阅读更多...
[晓理紫]每日论文分享(有中文摘要，源码或项目地址)--强化学习、模仿学习、机器人、开放词汇

[晓理紫]每日论文分享(有中文摘要，源码或项目地址)--强化学习、模仿学习、机器人、开放词汇

专属领域论文订阅 关注{晓理紫|小李子}&#xff0c;每日更新论文&#xff0c;如感兴趣&#xff0c;请转发给有需要的同学&#xff0c;谢谢支持 如果你感觉对你有所帮助&#xff0c;请关注我&#xff0c;每日准时为你推送最新论文。 分类: 大语言模型LLM视觉模型VLM扩散模型视觉…
阅读更多...
经典目标检测YOLO系列(三)YOLOV3的复现(1)总体网络架构及前向处理过程

经典目标检测YOLO系列(三)YOLOV3的复现(1)总体网络架构及前向处理过程

经典目标检测YOLO系列(三)YOLOV3的复现(1)总体网络架构及前向处理过程 和之前实现的YOLOv2一样&#xff0c;根据《YOLO目标检测》(ISBN:9787115627094)一书&#xff0c;在不脱离YOLOv3的大部分核心理念的前提下&#xff0c;重构一款较新的YOLOv3检测器&#xff0c;来对YOLOv3有…
阅读更多...
网络安全科普：SSL证书保护我们的网上冲浪安全

网络安全科普：SSL证书保护我们的网上冲浪安全

当我们在线上愉快冲浪时&#xff0c;各类网站数不胜数&#xff0c;但是如何判定该站点是安全还是有风险呢&#xff1f; 当当当&#xff0c;SSL数字证书登场&#xff01;&#xff01; SSL证书也称为数字证书&#xff0c;是一种用于保护网站和用户之间通信安全的加密协议。由权…
阅读更多...
SERVLET生命周期API

SERVLET生命周期API

SERVLET生命周期API 在servlet的生命周期中，将发生创建Servlet上下文、创建会话、向Servlet上下文添加属性等各种事件。在servlet的生命周期内发生事件时，Web容器将通知侦听器类。要接收事件的通知，侦听器类需要扩展Servlet API的侦听器接口。 1. 事件类型 servlet生命周期…
阅读更多...
DeepL 解除翻译文档的编辑限制

DeepL 解除翻译文档的编辑限制

在使用DeepL官网翻译文档时&#xff0c;您可能会遇到无法编辑的问题。本文将详细介绍如何解除密码限制&#xff0c;使DeepL翻译文档变得可编辑。 第一步&#xff1a;文档翻译和下载 将需要翻译的文档上传至DeepL&#xff0c;进行整篇文档翻译。完成翻译后&#xff0c;下载翻译…
阅读更多...
yum指令——Linux的软件包管理器

yum指令——Linux的软件包管理器

. 个人主页&#xff1a;晓风飞 专栏&#xff1a;数据结构|Linux|C语言 路漫漫其修远兮&#xff0c;吾将上下而求索 文章目录 什么是软件包yum指令1.yum 是什么&#xff1f;2.Linux系统&#xff08;Centos&#xff09;的生态 3.yum的相关操作安装卸载yum的相关操作小结 软件源安…
阅读更多...
[攻防世界]-Web:inget解析

[攻防世界]-Web:inget解析

查看网页 很明显&#xff0c;他是要我们输入id 这里我尝试了直接爆破&#xff0c;没有成功 解法一&#xff08;用万能密码&#xff09;&#xff1a; payload如下&#xff1a; 我这里还尝试了id1 or true # 没有成功&#xff0c;应该是题目把#给过滤了 解法二&#xff1a; …
阅读更多...
【Javaweb程序设计】【C00165】基于SSM的高考志愿辅助填报系统（论文+PPT）

【Javaweb程序设计】【C00165】基于SSM的高考志愿辅助填报系统（论文+PPT）

基于SSM的高考志愿辅助填报系统&#xff08;论文PPT&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于ssm的高考志愿辅助填报系统 本系统分为前台系统模块、后台管理员模块以及后台学生模块 前台系统模块&#xff1a;当游客打开系统的网址后&…
阅读更多...
网络编程套接字(2)

网络编程套接字(2)

UDP数据报套接字编程 API介绍 DatagramSocket DatagramSocket是UDP的Socket,用于发送和接收数据报. 操作系统中有一类文件,就叫做socket文件(普通文件/目录文件:在硬盘上的) socket文件:抽象的表示了网卡这样的硬件设备 DatagramSocket就是对socket文件进行读写,也就是借助网…
阅读更多...
【Java】Spring注解开发

【Java】Spring注解开发

一、Spring注解开发 1 注解开发定义Bean对象【重点】 目的&#xff1a;xml配置Bean对象有些繁琐&#xff0c;使用注解简化Bean对象的定义 问题导入 问题1&#xff1a;使用什么标签进行Spring注解包扫描&#xff1f; 问题2&#xff1a;Component注解和Controller、Service、R…
阅读更多...
2024-1-26学习任务：堆实现算法和topK问题

2024-1-26学习任务：堆实现算法和topK问题

前言 本文的学习任务&#xff1a;关于堆的实现以及相关的基础操作&#xff0c;包括向上调整算法和向下调整算法&#xff0c;同时利用该算法解决常见的topk问题&#xff0c;之后再对两种算法的时间复杂度进行分析&#xff0c;加深理解。 1.堆的实现 前面提到过&#xff0c;堆…
阅读更多...
Jmeter学习系列之一：Jmeter的详细介绍

Jmeter学习系列之一：Jmeter的详细介绍

目录 一、Jmeter的介绍 二、Jemeter的特点 三、Jemter相关概念 3.1采样器&#xff08;Samplers&#xff09; 3.2逻辑控制器&#xff08;Logic Controllers&#xff09; 3.3监听器&#xff08;Listeners&#xff09; 3.4配置元件&#xff08;Configuration Elements&#…
阅读更多...
算法沉淀——滑动窗口（leetcode真题剖析）

算法沉淀——滑动窗口（leetcode真题剖析）

算法沉淀——滑动窗口 01.长度最小的子数组02.无重复字符的最长子串03.最大连续1的个数 III04.将 x 减到 0 的最小操作数05.水果成篮06.找到字符串中所有字母异位词07.串联所有单词的子串08.最小覆盖子串 滑动窗口算法是一种用于解决数组或列表中子数组或子序列问题的有效技巧。…
阅读更多...
不确定优化入门：用简单实例讲明白随机规划、鲁棒优化和分布鲁棒优化

不确定优化入门：用简单实例讲明白随机规划、鲁棒优化和分布鲁棒优化

文章目录 1 引言2 学习动机3 经典问题4 解决方案4.1 忽略不确定性4.2 随机规划4.3 鲁棒优化4.4 分布鲁棒优化 5 总结相关阅读 1 引言 按2024的原定计划&#xff0c;今年开始要学习不确定优化了。 粗略翻阅了一些相关的书籍和教程&#xff0c;大都包含许多数学公式&#xff0c…
阅读更多...
xxl-job相关面试题整理

xxl-job相关面试题整理

什么是xxl-job&#xff1f; ​ xxl-job是一个分布式的任务调度平台&#xff0c;其核心设计目标是&#xff1a;学习简单、开发迅速、轻量级、易扩展&#xff0c;现在已经开放源代码并接入多家公司的线上产品线&#xff0c;开箱即用。xxl是xxl-job的开发者大众点评的许雪里名称的…
阅读更多...
腾讯云幻兽帕鲁4核16G14M服务器性能测评和价格

腾讯云幻兽帕鲁4核16G14M服务器性能测评和价格

腾讯云幻兽帕鲁服务器4核16G14M配置&#xff0c;14M公网带宽&#xff0c;限制2500GB月流量&#xff0c;系统盘为220GB SSD盘&#xff0c;优惠价格66元1个月&#xff0c;277元3个月&#xff0c;支持4到8个玩家畅玩&#xff0c;地域可选择上海/北京/成都/南京/广州&#xff0c;腾…
阅读更多...
在windows环境下安装hadoop

在windows环境下安装hadoop

Hadoop是一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下&#xff0c;开发分布式程序。但这个架构是基于java语言开发的&#xff0c;所以要先进行jdk的安装&#xff0c;如果电脑已经配置过jdk或者是曾经运行成功过java文件&#xff0c;那就可以跳过第一步。 …
阅读更多...
单入双出高电压信号隔离变送器

单入双出高电压信号隔离变送器

定义&#xff1a;一路高电压信号输入&#xff0c;双路国际标准模拟量信号输出的小型仪器设备。 单入双出高电压模拟量信号隔离变送器 型号&#xff1a;JSD TAH-1002 特征&#xff1a; ◆薄体积&#xff0c;低成本&#xff0c;国际标准DIN35mm导轨安装方式 ◆五端隔离(输入、…
阅读更多...
实验2：DEBUG基本命令使用

实验2：DEBUG基本命令使用

目录 1、实验目的&#xff1a; 2、实验内容&#xff1a; 3、实验要求&#xff1a; 4、源代码&#xff1a; 5、实验结果 1、实验目的&#xff1a; 熟悉汇编语言程序设计的上机过程&#xff0c;掌握DEBUG的基本命令和功能。 2、实验内容&#xff1a; 从键盘键入一个大写英…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023