CSS基础汇总

CSS

1. 选择器

  1. 标签选择器

    通过标签名找标签(把指定的样式应用到某一个、组、类标签上)

  2. id选择器

    通过id属性值找标签,关键符号#id值{样式}

  3. 复合选择器

    1、并列选择器:关键符号,用法:选择器1,选择器2{样式}

    2、后代选择器:符号空格,用法:选择器1空格选择器2

    3、属性选择器:选择器[属性=属性值]{样式}

    4、筛选:用法:选择器class选择器

    选择器的优先级:1、内联

            2、id选择器

            3、class选择器

            4、标签选择器

            5、通用选择器

2. 文字

1、有关字体的设置: 1.font-family:

字体的设置,其中需要注意的是一般我们会设置一到多个不同的字体,应包含多个字体确保在 不同浏览器、操作系统上的兼容性,以想用的字体开始,以通用系列字体结束;如果一个字体名称由多个单词组成的话,必须使用双引号 " ",字体的设置需要注意先后顺序。多个字体间用都逗号分隔开。

2.字体样式: ​ font-style:指定斜体文本

font-style有三个值:normal(正常显示)、italic(文本以斜体显示)、oblique(文本为倾斜,与italic相似,但支持较少)

font-weight:指定字体的粗细

属性值;normal、blod(加粗)

font-variant:字体变体

可以看作是小型大写字母,比原始大写字母字体小

属性值:small-caps、normal

3.字体大小 ​ 1.font-size: ​ (1)使用px

可以看作是小型大写字母,比原始大写字母字体小

(2)使用em设置字体大小(仍然是使用font-size)

1em等于当前字体大小。浏览器中的默认文本大小为 16px。因此,默认大小 1em 为 16px。

(3)百分比与em结合使用 ​ (4)vw:可以使用 vw 单位设置文本大小,它的意思是“视口宽度”("viewport width")。

文本大小将遵循浏览器窗口的大小,请调整浏览器窗口的大小,以查看字体大小如何缩放。

2.font:属性简写

注意:font-sizefont-family的值是必需的。如果缺少其他值之一,则会使用其默认值。

所有CSS字体属性:

属性描述
font简写属性。在一条声明中设置所有字体属性;
font-family规定文本的字体系列(字体族);
font-size规定文本的字体大小;
font-style规定文本的字体样式;
font-variant规定是否以小型大写字母的字体显示文本;
font-weight规定字体的粗细。

2、有关文字格式的几个元素以及属性设置: 1.text-align属性:(水平对齐方式)

center、right、left、justify(两端对齐)

2.vertical-align属性:(可设置图片等垂直对齐方式)

middle、bottom(默认)、top

3.文本方向:

direction、Unicode-bidi

例:

p{direction:rtl;unicode-bidi:bidi-override;
}

//这样可以使文字往左书写(反向)

3、文字的装饰: 1.text-decoration

有四个属性:none(常用在超链接中使文字不带下划线)、overline(上划线)、line-through(删除线)、underline(下划线)

注:建议不要在非链接目标下添加文本的下划线,以免文章内容显示较为混乱。

4、字母的大小写转换: text-transform

有三个属性:uppercase(大写)、lowercase(全小写)、capitalize(首字母大写)

5、文字间距: text-indent:

用于指定文本第一行的缩进,属性值:num px;可正可负。可以理解为首行缩进或悬挂缩进

letter-spacing:

文本中字符的间距,同样可正可负。

word-spacing:

文本中单词之间的间距,同样可正可负

line-height:

用于指定行之间的间距(行间距),属性值也是可正可负。

white-space:

指定元素内部空白的处理方式,属性值:nowrap;可以起到禁用元素内的文本换行。

6、文本阴影: 1.text-shadow:()

CSS文本属性:

属性描述
color设置文本颜色。
direction指定文本的方向/书写方向。
letter-spacing设置字符间距。
line-height设置行高。
text-align设置文本的水平对齐方式。
text-decoration指定添加到文本的装饰效果。
text-indent指定文本块中首行的缩进。
text-shadow指定添加到文本的阴影效果。
text-transform控制文本的大小写。
text-overflow指定应如何向用户显示的溢出内容。
unicode-bidi与 direction 属性一起使用,设置或返回是否应重写文本来支持同一文档的多种语言。
vertical-align指定文本的垂直对齐方式。
white-space指定如何处理元素内的空白。
word-spacing设置单词间距。

3. 盒子

1.盒子的组成:

一个盒子由外到内可以分成四个部分:margin(外边距)、border(边框)、padding(内边距)、content(内 容)。会发现 margin、border、padding是CSS属性,因此可以通过这三个属性来控制盒子的这三个部分。而content则HTML 元素的内容。

2.盒子的大小:

盒子的大小指的是盒子的宽度和高度。大多数初学者容易将宽度和高度误解为width和height属性,然而默认情况下widthheight属性只是设置content(内容)部分的宽和高。盒子真正的宽和高按下面公式计算:

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
​
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
​
也可以这么认为:
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
​
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

另外一种情况下,widthheight属性设置的就是盒子的宽度和高度。盒子的宽度和高度的计算方式由box-sizing属性控制。

box-sizing属性值
​
content-box:默认值,width和height属性分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距、边框、外边距。
​
border-box:为元素设定的width和height属性决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去 边框 和 内边距 才能得到内容的宽度和高度。
​
inherit:规定应从父元素继承box-sizing属性的值。

box-sizing:content-box时,这种盒子模型成为标准盒子模型,当box-sizing: border-box时,这种盒子模型称为IE盒子模型

3.盒子成分分析:

margin

margin,盒子的外边框,他是完全透明的,开发者只可以设置它的边距。

margin包含了上下左右四条边,开发者可以单独设置每一条边的边距。

  1. margin-top:上边距

  2. margin-buttom:下边距

  3. margin-left:左边距

  4. margin-right:右边距

可以直接使用简写属性margin同时设置四条边的宽度。

/*margin属性后只跟一个值,同时设置四条边的边距相等*/
margin: 10px;
/*margin属性后跟两个值,第一个值设置上下边距,第二个是设置左右边距*/
margin: 10px 20px;
/*margin属性后跟三个值,第一个值设置上边距,第二个是设置左右边距,第三个值设置下边距*/
margin: 10px 20px 30px;
/*margin属性后跟四个值,第一个值设置上边距,第二个是设置右边距,第三个值设置下边距,第四个值设置左边距*/
margin: 10px 20px 30px 40px;
​
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
​

padding

padding表示盒子的内边距(填充)。与外边距不同,padding不是只能完全透明的,可以设置背景颜色和图片。

与margin类似,padding包含了上下左右四条边,开发者可以单独设置每一条边的边距。

  1. padding-top:上部填充

  2. padding-bottom:下部填充

  3. padding-left:左部填充

  4. padding-right:右部填充

可以直接使用简写属性padding同时设置四条边的宽度。这一部分的用法与上面的margin类似,可以参考margin的四个实例。

border

border表示盒子的边界,它可以设置成可见的,样式多样的。

最基本的,border像margin和padding一样可以分别对每一条边进行设置,也可以使用简写属性border进行设置。

  1. border-top:上边界

  2. border-bottom:下边界

  3. border-left:左边界

  4. border-right:右边界

注:当border属性的色值不明确指定时,如border: 1px solid,边框颜色与当前元素的字体颜色color相同。

border例:

/*使用简写属性,同时设置四条边界,四条边界的宽度、样式和颜色都是一样的*/
border: 2px solid green;
/*下面的样式与上面的样式等价*/
border-top: 2px solid green;
border-bottom: 2px solid green;
border-left: 2px solid green;
border-right: 2px solid green;

可以单独对每一条边进行样式设置之外,还可以分别对边界的宽度、样式和颜色进行设置(下面的属性会对四条边进行设置),同样可以使用简写属性border进行设置。

  1. border-width:边界宽度

  2. border-style:边界样式

  3. border-color:边界颜色

border-sytle属性可取值:
​none:定义无边框。hidden:与 “none” 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。dotted:定义点状边框。在大多数浏览器中呈现为实线。dashed:定义虚线。在大多数浏览器中呈现为实线。solid:定义实线。double:定义双线。双线的宽度等于 border-width 的值。groove:定义 3D 凹槽边框。其效果取决于 border-color 的值。ridge:定义 3D 垄状边框。其效果取决于 border-color 的值。inset:定义 3D inset 边框。其效果取决于 border-color 的值。outset:定义 3D outset 边框。其效果取决于 border-color 的值。inherit:规定应该从父元素继承边框样式。

border例:

/*使用简写属性设置宽度、样式和颜色,同时作用于四条边*/
border: 2px dotted green;
/*下面的样式与上面的样式等价*/
border-width: 2px;
border-style: dotted;
border-color: green;

可以对单独一条边界单独设置宽度、样式或颜色。以上两组属性都可以作为下面属性的简写属性。

border-top-width:上边界宽度 ​ border-top-style:上边界样式 ​ border-top-color:上边界颜色 ​ border-bottom-width:下边界宽度 ​ border-bottom-style:下边界样式 ​ border-bottom-color:下边界颜色 ​ border-left-width:左边界宽度 ​ border-left-style:左边界样式 ​ border-left-color:左边界颜色 ​ border-right-width:右边界宽度 ​ border-right-style:右边界样式 ​ border-right-color:右边界颜色

border-image-repeat 该属性设置图片在边框的填充方式。值的个数可以是一个或两个,一个值时设置所有的边框,两个值时分别设置水平与垂直的边框。它具有下面的值:

stretch:拉伸图片以填充边框。 repeat:平铺图片以填充边框。 round:平铺图像。当不能整数次平铺时,根据情况放大或缩小图像。 space:平铺图像 。当不能整数次平铺时,会用空白间隙填充在图像周围(不会放大或缩小图像) inherit:继承父级元素的计算值。

border-image-width 设置图形边界的宽度。当border-image-width的值大于border-width时,图形不会向margin方向扩展,而是会向padding和content方向扩展,覆盖。

border-image-width属性的值可以是长度或百分数,以及auto。值的个数为1-4个,其规则与margin、padding等属性的规则一致。

border-image-outset 该属性设置边框图像可超出边框盒的大小。讲的通俗一点,就是在图像和padding之间增加一些填充,将边框图像往外挤。它的值可以是长度或百分数,值的个数为1-4个,其规则与margin、padding等属性的规则一致。

盒子阴影 在盒子的组成成分之外,CSS3给盒子添加了阴影。盒子的阴影由box-shadow属性控制,阴影的轮廓与盒子边界border的轮廓一样。该属性的正规语法如下:

none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

inset:默认阴影在边框外。使用 inset 后,阴影在边框内(即使是透明边框),背景之上内容之下。 offset-x, offset-y:这是头两个长度值,用来设置阴影偏移量,相对于border外边线开始计算。offset-x 设置水平偏移量,如果是负值则阴影位于元素左边。offset-y 设置垂直偏移量,如果是负值则阴影位于元素上面。如果两者都是0,那么阴影位于元素后面。这时如果设置了 blur-radius 或 spread-radius 则有模糊效果。 blur-radius:这是第三个长度值。值越大,模糊面积越大,阴影就越大越淡。 不能为负值。默认为0,此时阴影边缘锐利。 spread-radius:这是第四个长度值。取正值时,阴影扩大;取负值时,阴影收缩。默认为0,此时阴影与元素同样大。 color:如果没有指定,则由浏览器决定——通常是color的值,不过目前Safari取透明。

设置多个阴影时,使用逗号将每个阴影的值隔开。前面的阴影会在后面阴影之上,如果上层有透明度较低的部分,会与下层的颜色重叠,合成新颜色。例:

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;/* 多个阴影*/
box-shadow: 3px 3px red, -1em 0 0.4em olive, 5px 10px 5px 5px green;/*全局关键字*/
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

4. 布局

布局就是控制元素位置、大小;常见布局有 标准流布、浮动布局、定位布局、弹性布局等。

1.标准布局:

“标准文档流”简称为“标准流”,默认按照文档的顺序从上到下,从左到右,遇块(块级元素)换行。

1.块级元素block,独占一行可以设置宽高,适用于垂直布局;

2.行内元素inline,与其他元素共享一行,不可以设置宽高,宽度由内容决定,适用于水平布局;(注:img是一个特殊的行内元素可设 置宽高) ​ 3.标准流的定位离不开两个属性margin & padding ,margin 影响相邻元素之间的距离,padding 影响边框和内容之间的空白区域; ​ 4.text-align 设置文本对齐方式,line-height 是行内元素用来调整行间距的,都可继承;(注:在一些安卓手机 line-height 会失效)

2.浮动布局:

float 浮动布局, 默认 none 关闭浮动,取 left/right 该元素就会向其容器元素的左/右边框平移,当碰到另外一个浮动的元素时停止平移,超出容器会自动换行,不可以继承。 (1)理解浮动 float存在多层结构布局里,可以理解为在原来页面上面多了一层放浮动的元素,但float只能左右移动不能上下移动。

  • 脱离文档流,浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去,块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素;

  • 行内元素不填充空位,有空隙就会插入;

  • 不脱离文本流/不遮挡文本,有文字环绕效果;

(2)高度塌陷 当浮动元素高度超出容器元素的时候,容器高度不会自动拉伸来闭合浮动元素。

解决方法:

  • 创建BFC给父元素设置 overflow 值为 visible 或 clip,为 auto、scroll、hidden

  • 通过伪元素选择器给父元素后追加内容,清除浮动

 			div::after{content: "";/*在父元素和子元素之间加入空内容,把他们间隔开*/clear: both;display: block;}

3.定位布局:

position 定位布局,有5个值,通过四个方向 top,right,bottom 和 left 决定元素位置。

1.static 静态定位(默认),不脱离文档流,不能使用left…定位,一般用margin定位。

2.relative 相对定位,不脱离文档流,根据本身的位置/当前元素所在位置进行定位。

3.fixed 固定定位,完全脱离文档流(浮起来)不占据屏幕空间,可以对文本进行遮挡(可与float的特性对比学习),根据浏览器视口定位。

4.absolute 绝对定位,完全脱离文档流,不占据屏幕空间,可以对文本进行遮挡,兄弟级的两个元素都设置绝对定位元素,会进行层级叠加,同时设置margin: 0 auto;失效,float不能使用,若父元素有定位属性relative或fixed或absolute,那么根据父元素进行定位,反之根据浏览器定位。

5.sticky 粘性定位,可以被认为是相对定位和固定定位的混合。

4.弹性布局(Flex):

Flex 是 Flexible Box 的缩写,意为"弹性布局",由容器项目组成,容器为父元素,项目为容器成员这里是子元素。容器有两个轴线:主轴和交叉轴呈90度关系。容器通过容器属性控制项目在两个轴线之间的排列,项目通过项目属性控制自身顺序和大小。给父元素设置 display:flex 变成弹性盒子容器。 容器属性:

名称含义
flex-direction指定弹性盒子中子元素的主轴方向row,row-reverse,column,column-reverse,initial,inherit
flex-wrap设置当弹性盒子的子元素超出父容器时是否换行nowrap,wrap,wrap-reverse,initial,inherit
flex-flowflex-direction 和 flex-wrap 两个属性的简写,语法:flex-flow: flex-direction flex-wrap;eg:flex-flow: row-reverse wrap;
justify-content设置弹性盒子中元素在主轴方向上的对齐方式flex-start,flex-end,center,space-between,space-around,initial,inherit
align-items设置弹性盒子中元素在交叉轴方向上的对齐方式flex-start,flex-end,center,space-between,space-around,stretch,baseline,initial,inherit
align-content修改 flex-wrap 属性的行为,类似 align-items,但不是设置子元素对齐,而是设置行对齐lex-start,flex-end,center,space-between,space-around,stretch,initial,inherit

项目属性:

名称含义
order设置项目在容器中出现的顺序,语法:order: number;eg:order: 5;
flex-grow设置项目相对于其他项目的增长量默认为0,即有多余空间时也不放大
flex-shrink设置项目相对于其他项目的收缩量默认为1,即空间不足时缩小
flex-basis项目的长度为 auto(默认值,表示自动)、inherit(表示从父元素继承该属性的值) 或者以具体的值加 “%”、“px”、“em” 等单位的形式
flexgrow,shrink,basis的简写默认默认值为0 1 auto,快捷值auto(1 1 auto)和 none(0 0 auto)
align-self设置某项目不同于其它项目的对齐方式flex-start,flex-end,center,space-between,space-around,stretch,baseline,initial,inherit,auto(默认继承父align-items,没父为stretch)

5. 动画

1.@keyframes规则

如果在@keyframes规则中指定了css样式,动画将在特定时间逐渐从当前样式更改为新样式。 要使动画生效,必须将动画绑定到某个元素。

例:下面的例子将 “example” 动画绑定到 < div > 元素。动画将持续 4 秒钟,同时将 < div > 元素的背景颜色从 “red” 逐渐改为 “yellow”。

 <style>/* 动画代码 */@keyframes example {from {background-color: red;}to {background-color: yellow;}}/* 向此元素应用动画效果 */div {width: 100px;height: 100px;background-color: red;//动画名称animation-name: example;//动画持续四秒animation-duration: 4s;}</style>

注意:animation-duration属性定义需要多长时间才能完成动画,若未指定这个属性,则动画不会发生,因为默认值为0(0S)。

2.延迟动画-animation-delay

animation-delay 属性规定动画开始的延迟时间。

下面的例子在开始动画前有 2 秒的延迟:

div {width: 100px;height: 100px;position: relative;background-color: red;animation-name: example;//动画时长animation-duration: 4s;// 这个属性规定动画开始的延迟时间animation-delay: 2s;
}
负值也是允许的。如果使用负值,则动画将开始播放,如同已播放 N 秒。
在下面的例子中,动画将开始播放,就好像它已经播放了 2 秒钟一样:
div {width: 100px;height: 100px;position: relative;background-color: red;animation-name: example;animation-duration: 4s;animation-delay: -2s;
}

3.设置动画应运行多少次animation-iteration-count

animation-iteration-count 属性指定动画应运行的次数。

下面的例子在停止前把动画运行 3 次:

div {width: 100px;height: 100px;position: relative;background-color: red;animation-name: example;animation-duration: 4s;animation-iteration-count: 3;
}
下面的例子使用值 "infinite" 使动画永远持续下去:
div {width: 100px;height: 100px;position: relative;background-color: red;animation-name: example;animation-duration: 4s;animation-iteration-count: infinite;
}

4.反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。 animation-direction 属性可接受以下值: 1,normal - 动画正常播放(向前)。默认值 2,reverse - 动画以反方向播放(向后) 3,alternate - 动画先向前播放,然后向后 4,alternate-reverse - 动画先向后播放,然后向前

下例将以相反的方向(向后)运行动画:

div {width: 100px;height: 100px;position: relative;background-color: red;animation-name: example;animation-duration: 4s;animation-direction: reverse;
}
下面的例子使用值 "alternate" 使动画先向前运行,然后向后运行:
div {width: 100px;height: 100px;position: relative;background-color: red;animation-name: example;animation-duration: 4s;animation-iteration-count: 2;animation-direction: alternate;
}
下面的例子使用值 "alternate-reverse" 使动画先向后运行,然后向前运行:
div {width: 100px;height: 100px;position: relative;background-color: red;animation-name: example;animation-duration: 4s;animation-iteration-count: 2;animation-direction: alternate;
}

5.指定动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。 animation-timing-function 属性可接受以下值: ease - 指定从慢速开始,然后加快,然后缓慢结束的动画(默认) linear - 规定从开始到结束的速度相同的动画 ease-in - 规定慢速开始的动画 ease-out - 规定慢速结束的动画 ease-in-out - 指定开始和结束较慢的动画 cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

例:

下面这些例子展示了可以使用的一些不同速度曲线:
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

6.指定动画的填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。 在不播放动画时(在开始之前,结束之后,或两者都结束时),animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值: none - 默认值。动画在执行之前或之后不会对元素应用任何样式。 forwards - 元素将保留由最后一个关键帧设置的样式值(依赖 animation-direction 和 animation-iteration-count)。 backwards - 元素将获取由第一个关键帧设置的样式值(取决于 animation-direction),并在动画延迟期间保留该值。 both - 动画会同时遵循向前和向后的规则,从而在两个方向上扩展动画属性。

下面的例子让 <div> 元素在动画结束时保留来自最后一个关键帧的样式值:
div {width: 100px;height: 100px;background: red;position: relative;animation-name: example;animation-duration: 3s;animation-fill-mode: forwards;
}
下面的例子在动画开始之前(在动画延迟期间)使 <div> 元素获得由第一个关键帧设置的样式值:
div {width: 100px;height: 100px;background: red;position: relative;animation-name: example;animation-duration: 3s;animation-delay: 2s;animation-fill-mode: backwards;
}
下面的例子在动画开始之前使 <div> 元素获得第一个关键帧设置的样式值,以及在动画结束时保留最后一个关键帧的样式值:
div {width: 100px;height: 100px;background: red;position: relative;animation-name: example;animation-duration: 3s;animation-delay: 2s;animation-fill-mode: both;
}

7.动画简写属性(六种动画属性)

div {animation-name: example;animation-duration: 5s;animation-timing-function: linear;animation-delay: 2s;animation-iteration-count: infinite;animation-direction: alternate;
}
使用简写的 animation 属性也可以实现与上例相同的动画效果:
div {animation: example 5s linear 2s infinite alternate;
}

8.总结

CSS动画属性:

属性描述
@keyframes规定动画模式。
animation设置所有动画属性的简写属性。
animation-delay规定动画开始的延迟。
animation-direction规定动画是向前播放、向后播放还是交替播放。
animation-duration规定动画完成一个周期应花费的时间。
animation-fill-mode规定元素在不播放动画时的样式(在开始时、结束后、或者两者同时)。
animation-iteration-count规定动画应播放的次数。
animation-name规定 @keyframes 动画的名称。
animation-play-state规定动画是运行还是停止。
animation-timing-tunction规定动画的速度曲线。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Appium+python自动化(二十九)- 模拟手指在手机上多线多点作战 - 多点触控(超详解)

简介 在网页中我们经常使用缩放操作来便利的查看具体的信息&#xff0c;在appium中使用MultiAction多点触控的类来实现。MultiAction是多点触控的类&#xff0c;可以模拟用户多点操作。主要包含加载add()和执行perform()两个方法. 问题思考 在使用地图App中&#xff0c;我们…

Lyapunov-Krasovskii泛函三重积分项求导_原理

Lyapunov-Krasovskii泛函三重积分项求导_原理 1 Lyapunov-Krasovskii泛函三重积分项举例2 Lyapunov-Krasovskii泛函三重积分项求导3 基于辅助函数的一重积分不等式4 基于辅助函数的二重积分不等式 本人为研二小白&#xff0c;在看论文的过程中记录一下自己的学习过程和想法。 在…

ORACLE同步数据(dblink+物化视图)

1.创建dblink create public database link xirEvalDBlink connect to "XIR_TRD" identified by "xpar" USING (DESCRIPTION (ADDRESS (PROTOCOL TCP)(HOST 191.168.0.11)(PORT 1521)) (CONNECT_DATA (SERVER DEDICATED) (SERVICE_NAME orcl) ) )…

nginx 配置页面重定向,并携带链接和参数

期望 将 ip:port//oldPrefix/pages?a1 重定向到ip:port//oldPrefix/targetPrefix?a1 nginx 配置 # 原始前缀 # permanent 重定向 location /oldPrefix/ {rewrite ^/oldPrefix/(.*)$ /targetPrefix/$1 permanent; }# 目标前缀 location /targetPrefix/ {# 相关配置 }

echarts实现堆叠图加折线混合图

vue组件实现代码: <template><div :id="chartId" style="width: 100%; height: 300px"></div> </template><script>import * as echarts from "echarts";export default {name: "doubleStackLine", /…

Embedding 、词嵌入、向量模型说的是一回事么?AI是如何理解世界?AI人不能不看的Embedding白话科普!

在AI理解世界的过程中&#xff0c;向量模型扮演着一个至关重要的角色&#xff0c;甚至可以说它是AI大模型用以构建和理解复杂数据的基础&#xff0c;也是对不同形态数据的一种标准化的“浓缩”。它能够将语言、图像、声音等多样化的信息&#xff0c;转化为一种通用的、数学化的…

pg_rewind实现原理简单分析

pg_rewind的功能是在主备切换后回退旧主库上多余的事务变更&#xff0c;以便可以作为新主的备机和新主建立复制关系。通过pg_rewind可以在故障切换后快速恢复旧主&#xff0c;避免整库重建。对于大库&#xff0c;整库重建会很耗时间。 如何识别旧主上多余的变更&#xff1f; 这…

基于51单片机的银行排队呼叫系统设计

一.硬件方案 本系统是以排队抽号顺序为核心&#xff0c;客户利用客户端抽号&#xff0c;工作人员利用叫号端叫号&#xff1b;通过显示器及时显示当前所叫号数&#xff0c;客户及时了解排队信息&#xff0c;通过合理的程序结构来执行排队抽号。电路主要由51单片机最小系统LCD12…

K8S Pod常见状态

这是自己所遇到 Pod 常见状态及可能原因&#xff0c;持续更新。 如有其他的错误状态&#xff0c;可私我更新 1. ImagePullBackOff 问题分析&#xff1a; 镜像拉取失败。 可能原因&#xff1a; 可能是网络问题导致&#xff0c;检查Pod所在节点是否能够正常访问网络; 镜…

Vue-cli项目及Element UI 环境搭建 保姆级教程

一、Vue-cli介绍及其作用 什么是Vue-cli手脚架 vue-cli 官方提供的一个脚手架&#xff0c;用于快速生成一个 vue 的项目模板&#xff1b;预先定义 好的目录结构及基础代码&#xff0c;就好比咱们在创建 Maven 项目时可以选择创建一个 骨架项目&#xff0c;这个骨架项目就是脚…

electron本地运行请求端口

本地运行&#xff1a; npm run electron:start 运行后项目请求地址为&#xff1a; http://localhost:5173/api/xxxx const {protocol } require(electron); app.commandLine.appendSwitch(--ignore-certificate-errors, true); // Scheme must be registered before the app…

手把手教你玩转AD9361数字调制解调系列(二) ----纯逻辑实现FSK信号的数字调制解调

因最近客户需求&#xff0c;用纯PL实现AD9361的数字信号调制解调&#xff0c;于是就把各种数字调制都在AD9361上都实现了一遍。优点就是&#xff1a;既可以在zynq系列上配置9361&#xff0c;也可以在纯FPGA系列配置9361。并且理解起来比较简单&#xff01;&#xff01;&#xf…

lidar3607.2 雷达点云数据处理软件功能介绍

LiDAR360 是北京数字绿土科技股份有限公司自主研发的点云后处理及行业应用软件。平台可处理 TB 级点云数据&#xff0c;并拥有 10 余种国际领先的点云处理及 AI 算法&#xff0c;推动激光雷达 的多行业应用。700 余项强大且灵活的功能&#xff0c;解决用户最后一公里的应用难题…

云仓是如何发展起来的?

1、电子商务的繁荣&#xff1a; 随着电商的兴起&#xff0c;对高效仓储和物流的需求越来越大。传统的仓储方式难以满足海量订单处理和快速配送的要求&#xff0c;因此需要一种更加灵活和高效的仓储解决方案。 ------------------------------------------------- 2、科技进步…

速盾:cdn动态加速上传

CDN&#xff08;Content Delivery Network&#xff0c;内容分发网络&#xff09;是一种通过在全球范围内分布的服务器群组来提供高速、可靠内容传递的技术。CDN在网络上广泛应用&#xff0c;可以加速网站中的静态内容和动态内容的传输&#xff0c;并提高用户的访问速度和体验。…

Nuxt 的路由结构系统(七)

基本路由配置 在 Nuxt.js 中&#xff0c;每个 .vue 文件在 pages/ 目录下都会自动成为一个路由。文件名决定了路由的路径。例如&#xff1a; pages/ |-- index.vue # 映射到根路径 / |-- about.vue # 映射到路径 /about |-- contact.vue # 映射到路径 /conta…

Git clone解释

git clone gitgithub.com:tancolo/MOOC.git 是一个 Git 命令&#xff0c;用于从远程 Git 仓库复制一个仓库到本地计算机。下面我将详细解释这个命令的各个部分及其作用&#xff1a; git clone&#xff1a; 这是一个 Git 命令&#xff0c;用于从远程仓库克隆&#xff08;复制&am…

罗盘复杂网络教程—3步轻松构建社团检测任务

作为复杂网络领域中重要的课题之一&#xff0c;社团检测有助于揭示网络中存在的功能性模块或群集&#xff0c;旨在于仅利用网络中蕴含的来识别模块&#xff0c;并可能进而识别它们的层次组织。社团检测在各个领域具有重要的应用&#xff0c;可以帮助深入理解复杂系统潜在的模式…

一键进阶ComfyUI!懂AI的设计师现在都在用的节点式Stable Diffusion

前言 _ 万字教程&#xff01;奶奶看了都会的 ComfyUI 入门教程 推荐阅读 一、川言川语 大家好&#xff0c;我是言川。 阅读文章 > ](https://www.uisdc.com/comfyui-3) 目前使用 Stable Diffusion 进行创作的工具主要有两个&#xff1a;WebUI 和 ComfyUI。而更晚出现的…

SceneXplain 图片叙事升级:如何让图片听得到

SceneXplain 是一个由多模态 AI 驱动的产品服务&#xff0c;它不仅 提供一流的图像和视频标注解决方案&#xff0c;还具备卓越的多模态视觉问答能力&#xff0c;为用户解锁视觉内容的全新维度。 在[《图像描述算法排位赛》中&#xff0c;我们探讨了图像描述&#xff08;Image …