点进CSS选择器

CSS

1.直接在标签的style属性进行设置(行内式)

//写在数据单元格td标签内的stytle,设置color颜色和font-size字体大小;

<td rowspan="3" style="color: red;font-size: 12px;">Web技术与应用</td>
2.写在head标签中的stytle
 <style>table{border-collapse: collapse;  /*单框线*/width:100%;height:100%;}</style>
3.链接外部样式,编写.css文件,并引用类

<link rel="stylesheet" type="text/css" href="CSS/web.css">
/*写在head标签中的链接link*/
/*href是表示引用了哪个css文件*/
/*rel表示在页面中使用了这个外部的样式表*/
/*type指的是文本的类型是样式表文本*/
 <td rowspan="3" class="web">Web技术与应用</td>
/*在需要定义的标签内定义class值*/
4.导入外部样式表

在stytle标签中使用【注意分号】

<style type="text/css">@import url("style.css");
</style>

注意链接link和导入import的区别

link 是 html 的标签,而@import是CSS提供的一种方式;

当一个页面被加载的时候,link引用的CSS会被同时加载,而@import引用的CSS会等到页面全部被下载完再被加载;

选择器

1.元素选择器
img{ border-width:0; }
2.ID选择器--文档中唯一存在的
<p id="into">测试文本</p>
#into{front-weight:bold;}
3.class类选择器
<p class="into">测试文本1</p>
<p class="into">测试文本1</p>
.class{ front-weight:bold;}
4.选择器的组合
(1) 分组选择器

利用 逗号 分割选择器组合(逗号前后可以有空格)可以看作 并 操作

<style>h1,p{    front-size:12px;}
</style><h1>大标题</h1>
<p>段落1</p>
(2)嵌套(后代)选择器

在选择器之间加空格作为连接符,可以多级嵌套;对于选择器的两个元素间隔不做要求;

可以看作 交 操作

/*CSS样式:*/
p strong {color: blue;
}
/*HTML结构:*/
<p><em>天使<strong>投资</strong></em>是投资方式的一种</p>
(3)子元素选择器

子组合器(>)放置在两个CSS选择器之间,匹配被第二个选择器匹配的元素,这些元素是被第一个选择器匹配的所有元素中的直接子元素

而不是孙子元素,下例中第一个strong标签是em的直接子元素,是p标签的孙元素,第二个strong元素是p的第一个直接子元素,第三个strong元素是p的第二个直接子元素,但是也是p的直接子元素,因此第二三个strong属于被筛选的元素;

【儿子选择器,可以选择多个儿子,但不能选择孙子】

/*CSS样式:*/
p > strong {color: blue;
}
/*
HTML结构:*/
<p><em>天使<strong>投资</strong></em>是<strong>投资</strong>方式的<strong>一种</strong></p>
 (4)相邻兄弟选择器

加号+放置在两个选择器之间,第二个元素在第一个元素的后边,两个元素都是属于同一个父元素,选中第二个元素;

<!--CSS样式:-->
h2+p{color: blue;
}<!--因为h2和p标签属于body中的子元素,选中直接跟在h2后边的p元素-->
<!--HTML结构:-->
<h2>HTML</h2>
<p>超文本标记语言</p>   <!--被选中-->
<p>用于构建网页结构,添加内容。</p>
<h2>CSS</h2>
<p>层叠样式表</p>       <!--被选中-->
<p>用于构建网页样式,美化页面。</p>
(5)通用兄弟选择器 

把 放在两个选择器之间,匹配到第二个选择器的所有元素,(不需要是紧邻的第一个,但要有相同的父级元素)

<!--CSS样式:-->
h2~p{color: blue;
}
<!--HTML结构:-->
<h1>HTML</h1>
<p>超文本标记语言</p>
<p>用于构建网页结构,添加内容。</p>
<h2>CSS</h2>
<p>层叠样式表</p>                     <!--被选中-->
<p>用于构建网页样式,美化页面。</p>    <!--被选中-->
5.属性选择器

[attribute]  : 选中带有特定属性的标签;

[attribute=value] :选中带有特定属性和值的标签;

[attribute~=value] : 属性中包含value的标记;

[attribute|=value] :属性值是value或以value开头的值的标记;

[attribute^=value] :以value开头的标记;

[attribute$=value] :以value结尾的标记;

6.通配选择器

星号(*),用来匹配所有HTML的元素;

7.伪类选择器

PE  E:nth-child(exp)

祖先元素PE的第exp个E类型后代元素。exp可为数字、表达式(an+b形式,a、b为常量,n为变量,从0开始取值),先计数后判断类型。

PE  E:nth-of-type(exp)

祖先元素PE的第exp个E类型后代元素。exp可为数字、表达式(an+b形式,a、b为常量,n为变量,从0开始取值),先按类型E找出所有元素,再取第exp个。 PE  E:nth-last-child(n)

PE  E:nth-last-of-type(n)

PE :not(selector) 在祖先元素PE中匹配非指定选择器的每个元素。

E:hover 将鼠标悬停在元素E上时状态。

E:active 元素E获得焦点,处于活动状态时。

E::before 在元素E的内容之前插入一个内容,使用 content 属性来指定要插入的内容。 E::after 在元素E的内容之后插入一个内容,使用 content 属性来指定要插入的内容。

:visited  已经被访问了的样式          a:visited{}  //已经访问的样式
:active   当被鼠标点击那一刻时的样式  a:active{}   //当超链接被鼠标点击那一刻时的样式
:hover    当鼠标移上去的样式          div:hover{}  //当鼠标移在这个层上时的样式
:focus    选择获取焦点的元素          input:focus{}//选择获取焦点的输入框
::before   在该元素前添加的内容样式    p::before{}   //在所有的p元素前添加的内容及内容样式 在{}中的content属性中设置属性值 即确定需要添加的内容;
::after    在该元素后添加内容及样式    p::after{}    //选择所有的p元素在其后添加内容及样式 在{}中的content属性中设置属性值 即确定需要添加的内容;
:first-letter   选择该元素的第一个字母    p:first-letter{}  //选择所有p元素的第一个字母
:first-line     选择该元素的第一行        p:first-line{}    //选择所有p元素的第一行
:first-child    该元素为其父元素的第一个子元素    p:first-child{}  //指定p元素为其父元素的第一个子级
:first-of-type  该元素的父元素的第一个该元素      p:first-of-type{} //选择作为父元素的第一个p元素
:last-of-type   该元素的父元素的最后一个该元素    p:last-of-type{} //指定其父元素的最后一个p元素:last-child     该元素为其父元素的最后一个子元素  p:last-child{}    //选择其父元素最后一个子元素为p元素:nth-child(n)   该元素其父元素的第n个该子元素     p:nth-child(2){}   //选择其父元素正数的第2个p元素
:nth-of-type(n) 该元素其父元素的的第n个子元素 
:root           根元素
:emmpty         没有子元素的元素
:target         当前活动的#news元素(包含锚名)
:enabled        当前启用的元素
:disabled       当前禁用的元素
:checked        每个选中的元素
:not            除该元素外的元素
::selection      匹配元素中被用户选中或处于高亮状态下的部分
:out-of-range   匹配值在指定值域外时的样式
:in-range       匹配值在值域内时的样式
:require        匹配设置了require的元素
:optional       匹配可选的元素
:valid          匹配合法时的样式
:invalid        匹配不合法时的样式
.fancy {text-shadow: 2px 2px 3px gold;
}<!--类名不是 `.fancy` 的 <p> 元素-->
p:not(.fancy) {color: green;
}<!-- 非 <p> 元素 -->
body :not(p) {text-decoration: underline;
}<!-- 既不是 <div> 也不是 <span> 的元素 -->
body :not(div):not(span) {font-weight: bold;
}<!--不是 <div> 或 `.fancy` 的元素-->
body :not(div, .fancy) {text-decoration: overline underline;
}<!-- <h2> 元素中不是有 `.foo` 类名的 <span> 元素 -->
h2 :not(span.foo) {color: red;
}

CSS的两个特性

 (1)层叠性

因为CSS具有的层叠性导致元素筛选时会有冲突,因此需要考虑选择器的优先级

选择器的优先性:内联/行内样式表>id>class>tag;

用类似(1,0,0,0)的四元组来表示优先级的高低;

(2)继承性

若父元素和子元素没有发生冲突,那么子元素将会继承父元素的样式格式;

不是所有的CSS属性都具有继承性的;

单位

 像素单位用 px--绝对单位;

em和rem都是相对单位,区别在于em是相对当前字符的大小,rem是相对于html元素的大小;

颜色

color : #ff0000;	//红
color : #00ff00;	//绿
color : #0000ff;	//蓝
color : #ffff00;	//黄
color : #000000;	//黑
color : #ffffff;	//白
<!--红色的#ff0000可以写作#f00-->
<!--十六进制-->rgb函数
color : rgb(255,0,0); 		// 红
color : rgb(0,255,0); 		// 绿
color : rgb(0,0,255); 		// 蓝
color : rgb(0,0,0);			// 黑
color : rgb(255,255,255); 	// 白<!--第四个参数表示透明度,0.5是半透明;1是不透明,0是全透明-->
color : rgba(255,0,0,0.5);		//红(半透明)
color : rgba(0,255,0,0.5);		//绿(半透明)
color : rgba(0,0,255,0.5);	 	//蓝(半透明)
color : rgba(0,0,0,0.5);		//黑(半透明)

字体样式

其中,light-height一行内的文字具有垂直居中的特性; 

background-clip:content box; 仅仅设置内容区,默认是border box; 

超链接样式

<style>a:link{		/*默认状态*/color: black;}a:visited{	/*浏览过的*/color:darkgrey;}a:hover{	/*悬浮状态*/color:yellow;}a:active{	/*激活过的*/color: red;}
</style>//编写时要严格按照上图顺序来编写

设置超链接样式需要遵守一定顺序,即。 a:link -> a:visited -> a:hover -> a:active;

以下代码可以去除超链接下的下划线; 

<style>a{text-decoration:none;
}
</style>

列表样式 

盒子模型

content | padding | border | margin 

--->块元素

h1-h6 | p | div | ul | ol | table

不自动设置宽高的时候,块元素宽度自动伸长,高度包裹内容;

--->行内元素
span | b | strong | img | input | textarea | br

不自动伸展,包括内容的最小宽高;

盒子大小

盒子模型的内容区域设置宽高后,在默认情况下,填充、边框和边界值的变化,不会影响内容区域的大小,而是整体上盒子的大小发生变化。此时css的box-sizing属性默认是content-box,即内容区大小不变;

若设置box-sizing属性为border-box,则盒子的整体大小不变,内容区随之变化; 

盒子的margin和padding属性只能设置大小;

边框border可以设置宽度、颜色和样式。border属性主要有三个:border-width、border-color、border-style【线型】;

border-bottom:none;  //下边框无,所以高度也无;

border-bottom-color:transparent;//下边框存在,也有高度,但是透明不显示;

 盒子边界、填充或边框宽度的缩写

如只给定一个值,则表示其上下左右的值都相同;

如给定两个值,则分别表示上下、左右的值;

如给定三个值,则分别表示上、左右、下的值;

如给定四个值,则分别表示上、右、下、左的值;//多个赋值空格隔开;

 margin:0 auto;    //上下是0,左右自动是水平居中的效果;

上述css表达作用于块元素,实现在父元素的基础上水平居中;

如果是行内元素,设置其父元素的text-align属性为center即可以实现;

边框border属性的缩写

border: border-width | border-style | border-color

可以分别设置border-style和border-color

可以类似这样:border-right-color 、border-top-color

大多数HTML元素的盒子属性(margin、padding、border-width)默认值为0。

有少数HTML元素的margin和padding的默认值 不为0,如:body、p、ul、li等。

表单元素中大部分 input 元素的边框属性默认值 不为0。

 定位方式

一、块级元素

独占一行
默认width是父元素的100%,height取决于内容的height
设置width、height有效
设置margin,上下左右有效
设置padding,上下左右有效

二、内联元素

不会独占一行
默认width取决于内容的width,height取决于内容的height
设置width、height无效
设置margin,左右生效、上下无效
设置padding,左右生效、不建议使用上下内边距(与块内元素不同,其内容相对上下位置不变,如背景颜色会覆盖上下元素)

三、行内块元素

不会独占一行
设置width、height有效
设置margin,上下左右有效
设置padding,上下左右有效

Display属性

(1)取值none:元素不显示。

(2)取值block:显示为块元素。

(3)取值inline:显示为行元素。

(4)取值inline-block:显示为行内块元素。

visibility: hidden,则元素被隐藏。

注意: visibility: hidden  表示元素被隐藏,但是元素占位还在;

display:none        表示元素不显示,其占位也不在文档流中了。 

 水平排列盒子的相邻间隙是左右margin的和;垂直排列盒子的相邻间隙是取最大值;


层定位

①确定定位方式:static(标准流定位)

relative:相对定位,相对于元素原来位置(元素在标准流中)进行定位;

absolute:绝对定位,相对于static定位以外(已定位但不是static)的最近的父元素进行定位。

②确定元素位置:设置left right top bottom 属性决定元素位置

③确定元素层叠顺序:z-index设置上下层叠 z-index值大的在上边;

浮动定位

float属性:用于设定浮动   影响别人

float: left | right | none 

left | right 表示浮动元素在左 | 右边,元素向左 | 右浮动的 ; none表示不浮动,是默认值;

clear属性:清除浮动元素的影响  影响自己

left | right 表示不允许在某元素的左 | 右 边有浮动元素 ;both表示在某元素左右两边都不允许有浮动元素;none表示在某元素左右两边都允许有浮动元素;

一个浮动盒子:①浮动后的盒子将以块级元素显示,但宽度不会自动伸展;②浮动的盒子将脱离标准流,即不再占据浏览器原来分配给它的位置;③未浮动的盒子将占据浮动盒子的位置,同时未浮动盒子内的内容会环绕浮动后的盒子;

多个浮动盒子:多个浮动元素不会相互覆盖,一个浮动元素的外边界(margin)碰到另一个浮动元素的外边界后便停止运动;②若包含的容器太窄,无法容纳水平排列的多个浮动元素,那么最后的浮动盒子会向下移动。但如果浮动元素的高度不同,那当它们向下移动时可能会被卡住;③容器中所有子元素都浮动后,父元素高度将塌陷

弹性盒子布局

【注意:当将一个元素设为Flex布局以后,子元素的 float、clear和vertical-align 属性将失效】

采用Flex布局的元素,称为Flex容器,简称”容器”。它的所有子元素称为Flex项目,简称”项目”;

容器默认存在两根轴:水平主轴(main axis)和垂直交叉轴(cross axis);主轴 | 交叉轴的开始位置(与边框的交叉点)叫做main start | cross start,结束位置叫做main end | cross end;

项目默认沿主轴排列。单个项目占据的主轴 |交叉轴 空间叫做main size | cross size;

容器属性 
  • flex-direction 决定主轴的方向(即项目的排列方向)

row(默认):主轴为水平方向,起点在左端;row-reverse:主轴为水平方向,起点在右端;column:主轴为垂直方向,起点在上沿; column-reverse:主轴为垂直方向,起点在下沿;

  • flex-wrap 

默认情况下,项目都排在一条轴线上;flex-wrap说明如何换行:

nowrap(默认):不换行;wrap:换行,第一行在上方; wrap-reverse:换行,第一行在下方;

  • justify-content 项目在主轴上的对齐方式

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

  •  align-items 项目在交叉轴上对齐方式

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

  • align-content 只适用多行的flex容器,其作用是当flex容器在交叉轴上有多余的空间时,将项目作为一个整体进行对齐。

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

  • flex-flow flex-direction和flex-wrap的合集
项目属性
  • flex-grow  项目的放大比例

默认为0,划分的是剩余空间;

  • flex-shrink  项目的缩小比例

默认为1

  • flex-basis 主轴空间的大小

它的默认值为auto,即项目的本来大小;flex布局默认的主轴都是横向的,所以在这里可以先理解成 宽(width)属性,只是优先级比 width 更高;

  • flex 

flex-grow, flex-shrink 和 flex-basis的简写;flex:  flex-grow    flex-shrink    flex-basis

  • order  定义项目的排列顺序

数值越小,排列越靠前,默认为0;

  • align-self  允许单个项目有与其他项目不一样的对齐方式

可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch;


border-radius

border-radius:水平方向取值 垂直方向取值;如果两个值相同,则可以合并成一个;

border-radius属性细分:border-top-left-radius ; border-top-right-radius ; border-bottom-left-radius ; border-bottom-right-radius ;   

box-shadow

box-shadow: inset|outset(默认) 水平偏移 垂直偏移 模糊距离 扩散半径 颜色;

text-shadow

text-shadow:水平偏移 垂直偏移 阴影大小 颜色;

transform-origin

用于设置变化元素的基点位置

过渡

必须设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果

过渡效果的时间曲线:

动画设计

①使用 @key-frames 规则对动画命名,并定义动画的关键帧。 ②使用animation属性调用动画,animation属性如下表所示:

视口

视口可以理解为设备或文档对象的逻辑尺寸;移动设备(可以缩放的浏览器中都具有三个视口)上三个viewport: 布局视口、 理想视口、视觉视口 ;

布局视口可以理解为文档对象的逻辑尺寸,单位为逻辑像素;理想视口是与设备相关的,是布局视口的一个理想尺寸,只有当布局视口的尺寸等于设备屏幕的尺寸时才是理想视口,此时文档对象宽度与屏幕宽度相同;用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网页,看到的网页区域将变大,此时视觉视口也变大了,同理,用户放大网页,能看到的网页区域将缩小,此时视觉视口也变小了。不管用户如何缩放,都不会影响到布局视口的宽度;

移动设备的默认布局视口(一般是980px)往往大于理想视口,此时就会在横向出现滚动条才能完整的容纳页面。因此,需要的是将页面的布局视口设置为理想视口;

meta标签设置浏览器的视口(viewport)的宽度:<meta name="viewport“ content="width=device-width,initial-scale=1.0,maximum-scale=1.0,   user-scalable=0" />

视口的相关属性设置

媒体查询

媒体查询语法:

@media 设备名 only(选取条件)not(选取条件)and(选取条件) {           CSS样式规则 }

 

媒体查询在网页使用中有两种方式  ①在样式表中内嵌 @media; ② 在 link 中使用 media 属性; 

<!--适合低分辨率桌面浏览器和横屏iPad--> 
<link rel=“stylesheet” type=“text/css” media=“all and (max-width: 768px)” href=“ipad.css”/>
@media all and (max-width: 1024px) {/* 适合低分辨率桌面浏览器和横屏iPad */
}
@media all and (max-width: 768px) {/* 适合很低分辨率桌面浏览器和竖屏iPad */
}

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

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

相关文章

Python基于卷积神经网络的车牌识别系统开发与实现

1. 简介 车牌识别是人工智能在交通领域的重要应用&#xff0c;广泛用于高速违章检测、停车场管理和智能交通系统等场景。本系统通过基于卷积神经网络&#xff08;CNN&#xff09;的深度学习算法&#xff0c;结合 Python 和 MySQL 实现车牌的快速识别与管理。 系统特点&#x…

【PDF物流单据提取明细】批量PDF提取多个区域内容导出表格或用区域内容对文件改名,批量提取PDF物流单据单号及明细导出表格并改名的技术难点及小节

相关阅读及下载&#xff1a; PDF电子物流单据&#xff1a; 批量PDF提取多个区域局部内容重命名PDF或者将PDF多个局部内容导出表格&#xff0c;具体使用步骤教程和实际应用场景的说明演示https://mp.weixin.qq.com/s/uCvqHAzKglfr40YPO_SyNg?token720634989&langzh_CN扫描…

运行python程序报错 undefined symbol: ffi_type_uint32 的参考解决方法

文章目录 写在前面一、问题描述二、解决方法参考链接 写在前面 自己的测试环境&#xff1a; Ubuntu20.04 ROS-Noetic 一、问题描述 运行 python 程序出现如下问题&#xff1a; Traceback (most recent call last):File "<string>", line 1, in <module&…

鱼眼相机模型与去畸变实现

1.坐标系说明 鱼眼相机模型涉及到世界坐标系、相机坐标系、图像坐标系、像素坐标系之间的转换关系。对于分析鱼眼相机模型&#xff0c;假定世界坐标系下的坐标点,经过外参矩阵的变换转到相机坐标系&#xff0c;相机坐标再经过内参转换到像素坐标&#xff0c;具体如下 进一步进…

ASP.NET Core Web API Hangfire

ASP.NET Core Web API Hangfire 前言一、安装二、相关代码1.代码片段2.代码片段3.运行效果 三、测试代码1.即发即弃作业2.延迟作业3.重复作业4.延续作业5.页面调度作业 前言 &#x1f468;‍&#x1f4bb;&#x1f468;‍&#x1f33e;&#x1f4dd;记录学习成果&#xff0c;以…

DevOps实战:用Kubernetes和Argo打造自动化CI/CD流程(1)

DevOps实战&#xff1a;用Kubernetes和Argo打造自动化CI/CD流程&#xff08;1&#xff09; 架构 架构图 本设计方案的目标是在一台阿里云ECS服务器上搭建一个轻量级的Kubernetes服务k3s节点&#xff0c;并基于Argo搭建一套完整的DevOps CI/CD服务平台&#xff0c;包括Argo CD…

【openGauss】正则表达式次数符号“{}“在ORACLE和openGauss中的差异

一、前言 正则作为一种常用的字符串处理方式&#xff0c;在各种开发语言&#xff0c;甚至数据库中&#xff0c;都有自带的正则函数。但是正则函数有很多标准&#xff0c;不同标准对正则表达式的解析方式不一样&#xff0c;本次在迁移一个ORACLE数据库到openGauss时发现了一个关…

PCL点云库入门——PCL库点云滤波算法之半径滤波(RadiusOutlierRemoval)

1、算法原理 半径滤波算法是一种基于局部邻域的点云数据滤波方法。它通过设定一个半径阈值来确定一个球形邻域&#xff0c;对于点云中的每一个点&#xff0c;算法会检查其邻域内与其他点的位置。如果邻域内的点与中心点的距离小于或等于设定的半径阈值&#xff0c;那么这些点将…

LLMs之o3:《Deliberative Alignment: Reasoning Enables Safer Language Models》翻译与解读

LLMs之o3&#xff1a;《Deliberative Alignment: Reasoning Enables Safer Language Models》翻译与解读 导读&#xff1a;2024年12月&#xff0c;这篇论文提出了一种名为“审慎式对齐 (Deliberative Alignment)”的新方法&#xff0c;旨在提高大型语言模型 (LLM) 的安全性。论…

分布式项目___某污水处理项目

一.分布式项目___污水处理项目 项目地址:https://gitee.com/yanyigege/collaborative-water-springboot.git ​ 1.项目背景 总公司在全国各地有处理污水的项目部,各项目部处理自己的污水,总部需要监控各地分项目部每天处理污水的原料用量,掌握各分部的污水处理情况 ​ 2.功…

PHP框架+gatewayworker实现在线1对1聊天--gatewayworker说明(2)

文章目录 gatewayworker使用说明onConnect 说明 gatewayworker使用说明 gatewayworker里只需要使用Applications\YourApp下的Events.php文件。 对文件的代码进行一下改造&#xff0c;如下&#xff0c;我们只需要用到onConnect方法&#xff0c;写法固定&#xff0c;其他方法都…

Java 同步锁性能的最佳实践:从理论到实践的完整指南

目录 一、同步锁性能分析 &#xff08;一&#xff09;性能验证说明 1. 使用同步锁的代码示例 2. 不使用同步锁的代码示例 3. 结果与讨论 &#xff08;二&#xff09;案例初步优化分析说明 1. 使用AtomicInteger原子类尝试优化分析 2. 对AtomicInteger原子类进一步优化 …

模型 10-10-10旁观思维

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。超脱当下&#xff0c;透视决策长远影响。 1 10-10-10旁观思维的应用 1.1 职业选择决策 背景&#xff1a;小张是一名大学毕业生&#xff0c;面对未来职业的选择感到迷茫。他擅长营销、策略和经济学&a…

Supermap iClient Webgl 粒子特效案例-消防场景

作者&#xff1a;Lzzzz 前言 WebGL 粒子特效的应用场景非常广泛&#xff0c;几乎可以在任何需要丰富视觉效果或动态表现的地方看到其身影。通过灵活运用颗粒系统&#xff0c;开发者可以创造出引人入胜的用户体验和视觉表现。 一、效果展示 二、实现步骤 1&#xff0c;构建…

使用MFC编写一个paddleclas预测软件

目录 写作目的 环境准备 下载编译环境 解压预编译库 准备训练文件 模型文件 图像文件 路径整理 准备预测代码 创建预测应用 新建mfc应用 拷贝文档 配置环境 界面布局 添加回cpp文件 修改函数 报错1解决 报错2未解决 修改infer代码 修改MFCPaddleClasDlg.cp…

【MySQL】搞懂mvcc、read view:MySQL事务原理深度剖析

前言&#xff1a;本节内容是事务里面最难的一部分&#xff0c; 就是理解mvcc快照读和read view。这两个部分需要了解隔离性里面的四种隔离级别。 博主之前讲过&#xff0c;但是担心友友们不了解&#xff0c; 所以这里开头进行了复习。 下面开始我们的学习吧&#xff01; ps&…

数据库概念(MySQL第一期)

p.s.这是萌新自己自学总结的笔记&#xff0c;如果想学习得更透彻的话还是请去看大佬的讲解 目录 数据库就是管理数据的仓库 数据库&#xff1a;DataBase(DB)&#xff0c;是存储数据的仓库&#xff0c;数据是有组织的进行存储 数据库管理系统&#xff1a;DataBase Management S…

python蓝桥杯刷题4

1.好数 题解&#xff1a;首先分析题目要求奇数位上的数字是奇数&#xff0c;偶数位上的数字是偶数。开始解题&#xff0c;定义一个count变量为0&#xff0c;输入一个数字&#xff0c;for循环从1开始遍历到n1&#xff0c;定义一个x作为一会的判断条件&#xff0c;将数字转换为字…

自动驾驶新纪元:城区NOA功能如何成为智能驾驶技术的分水岭

目录 一、NOA 的定义 二、NOA 的主要特点 导航集成 场景覆盖 智能决策 高级感知能力 驾驶员参与 三、NOA 的优势 四、NOA的衡量指标 定性评价指标 安全性评价指标定义 可靠性评价指标定义 舒适性评价指标定义 通行效率评价指标 定量评价指标 五、代表厂商的实测…

【技术实战】R语言统计分析与可视化从入门到精通

前言 随着大数据时代的到来&#xff0c;数据分析已经成为各行各业的重要技能。R语言作为一种强大的统计分析和数据可视化工具&#xff0c;广泛应用于科学研究、数据分析和商业决策支持。 本文将带领读者从入门到精通&#xff0c;掌握R语言在统计分析和数据可视化方面的核心技…