CSS学习2

自己在工作中总是有一些自动化开发的需求，总是以为自己是有前端基础的，但是一写页面，布局都布不好，真是搞笑，说起来还是基本功不扎实啊，这里在重新复习一下，然后记录一下文档。后边在写两个综合练习

一、伪类选择器

1.a标签的伪类

<html><head><style>/* 去除a标签文字的下划线 */a {text-decoration: none;}/* a标签没有点击时的默认样式 */a:link {color: black;}/* a标签点击后的样式 */a:visited {color: red;}/* a标签鼠标悬浮或者划过时的样式 */a:hover {color: blue;}/* a标签在鼠标点击时候的样式 */a:active {color: pink;}</style></head><body><a href="https://www.baidu.com">百度</a><br><a href="https://www.jd.com">京东</a></body>
</html>

1.1 伪类的顺序

a标签的书写顺序必须按照link、visted、hover、active的顺序书写，否则有些效果就会不生效。按照首字母顺序可以记忆为lvha

1.2 适用范围

link visted是a标签专属的伪类。只能适用于a标签。而hover、active不仅适用于a标签，还适用于其它元素。
举例：

<html><head><style>.box > div {width: 100px;height: 100px;background-color: red;}.box > div:hover {background-color: black;}.box > div:active {background-color: blue;}</style></head><body><div class="box"><div>1</div><div>2</div></div></body>
</html>

2.结构伪类

这个伪类结构呢，可以理解为 “正则匹配”。
匹配成功就选中该元素，并执行对应的样式
匹配失败，就什么也不会执行

2.1.first-child

注意：这里一定要理解first-child的含义：
first: 第一个元素
child:范围是 在父标签的子元素中寻找
整体含义就是 匹配子元素中的 “第一个元素” 是不是p

2.1.1 针对所有范围
p:first-child #表示 匹配所有子元素中第一个元素是不是p标签错误理解：匹配所有子元素中的第一个p标签

实例：

<html><head><style>p:first-child{color: red;}</style></head><body><!-- 这是body标签子元素中的第一个元素，并且是p标签。所以匹配成功 --><p>body1</p><h1>h1</h1><p>p1</p><div><!-- 这是div子元素中的第一个元素，也是p标签，匹配成功 --><p>d1</p><p>d2</p><p>d3</p><p>d4</p><p>d5</p><p>d6</p></div><div><!-- 这是div的第一个元素，但不是p --><span>11</span><p>22</p></div><div><div><!-- 这是div子元素中的第一个元素，也是p标签，匹配成功 --><p>111</p><p>222</p></div></div></body>
</html>
2.1.2 限定范围
<html><head><style>/* 在class选择器为box的子代元素中 匹配第一个元素是不是p标签 */.box > p:first-child{color: red;}</style></head><body> <p>body1</p><h1>h1</h1><p>p1</p><!-- 设置class选择器 --><div class="box"><p>d1</p><p>d2</p><p>d3</p><p>d4</p><p>d5</p><p>d6</p></div><div><span>11</span><p>22</p></div><div><div><p>111</p><p>222</p></div></div></body>
</html>

2.2 last-child

匹配子元素中的最后一个元素是不是某个标签

<html><head><style>/* 匹配所有子元素中的最后一个元素是不是p标签 */p:last-child{color: red;}</style></head><body> <div class="box"><p>d1</p><p>d2</p><p>d3</p><p>d4</p><p>d5</p><p>d6</p></div></body>
</html>

2.3 nth-child

匹配指定的元素是不是某个标签

<html><head><style>/* 匹配第三个元素是不是p标签 */p:nth-child(3){color: red;}</style></head><body> <div class="box"><p>d1</p><p>d2</p><p>d3</p><p>d4</p><p>d5</p><p>d6</p></div></body>
</html>

验证: 这里看到d2的字体变成了红色，这里再次验证了，这是匹配的第n个元素，而不是第n个p元素

<html><head><style><!-- 在这里加上一个span标签 -->p:nth-child(3){color: red;}</style></head><body> <div class="box"><span>span1</span><p>d1</p><p>d2</p><p>d3</p><p>d4</p><p>d5</p><p>d6</p></div></body>
</html>

2.4 nth-child(-n+数字)

匹配子元素中的前n个元素

3.结构伪类2

:first-of-type表示选择"相同类型元素"的第一个
:last-of-type 表示选择"相同类型元素"的最后一个
:nth-of-type(n)表示选择"相同类型元素"的第n个

3.1 first-of-type

<html><head><style>/* 匹配第三个元素是不是p标签 */p:first-of-type {color: red;}</style></head><body> <div class="box"><!-- 在这里加上一个span标签 --><span>span1</span><span>span2</span><p>d1</p><span>span3</span><p>d2</p><span>span3</span><p>d3</p></div></body>
</html>

3.2 last-of-type

<html><head><style>/* 匹配最后一个span元素 */span:last-of-type {color: red;}</style></head><body> <div class="box"><span>span1</span><span>span2</span><p>d1</p><span>span3</span><p>d2</p><!-- 此行变成了红色 --><span>span4</span><p>d3</p></div></body>
</html>

3.3 nth-of-type(n)

<html><head><style>/* 匹配最后三个span元素 */span:nth-of-type(3) {color: red;}</style></head><body> <div class="box"><span>span1</span><span>span2</span><p>d1</p><!-- 此行变成了红色 --><span>span3</span><p>d2</p><span>span4</span><p>d3</p></div></body>
</html>

4.伪元素选择器

伪元素在前端展示出来后是不能选中的。
::before和::after 必须要结合content属性结合使用

<html><head><style>/* 在所有p标签内容的前边加上￥符号 */p::before{content: "￥";}/* 在所有p标签内容的后边加上".00"字符串 */p::after{content: ".00";}</style></head><body> <p>100</p><p>200</p><p>300</p></body>
</html>

二、隐藏元素的方式

1.display

display:none参数可以设置元素隐藏。不但隐藏元素，也不占用任何位置，没有大小宽高

<html><head><style>.box1 {width: 100px;height: 100px;background-color: yellow;display: none;}.box2 {width: 100px;height: 100px;background-color: red;}</style></head><body> <div class="box1">1</div><div class="box2">2</div></body>
</html>

2.visibility

visibility 默认值是show,如果设置为hidden,会隐藏元素。虽然元素看不见了，但是还会占有原来的位置

<html><head><style>.box1 {width: 100px;height: 100px;background-color: yellow;visibility: hidden;}.box2 {width: 100px;height: 100px;background-color: red;}</style></head><body> <div class="box1">1</div><div class="box2">2</div></body>
</html>

三、布局技巧-垂直居中

1.文本居中

前边已经学过了，这里在复习一下。文本居中主要最常用的属性是

# 文本水平居中
text-align: center;# 文本垂直居中
line-height: 200px;

2.图片居中

2.1 方式1: 背景形式

以背景图片的方式调整图片的位置
居中显示：

<html><head><style>* {margin: 0px;padding: 0px;}.outer {width: 500px;height: 500px;background-color: gray;background-image: url("./image/1.jpg");background-size: 300px 200px;background-repeat: no-repeat;background-position: center;}</style></head><body> <div class="outer"></div></body>
</html>

当然还可以通过以下两个参数的值来调整图片的位置。当然使用这两个值的时候就不要使用 background-position: center参数了

background-position-x
background-position-y

2.2 方式2：行内元素形式

<html><head><style>* {margin: 0px;padding: 0px;}.outer {width: 500px;height: 500px;background-color: gray;/* 设置水平居中 */text-align: center;/* 设置垂直居中，但是不是真正意义上的垂直居中 */line-height: 500px;font-size: 0px;}img {width: 200px;height: 100px;/* 设置图片以父标签的中线对齐，这才是真正的中线对齐，这个和line-height配合使用 */vertical-align: middle;}</style></head><body> <div class="outer"><!-- 这里的文字不显示，被font-size：0px隐藏了，但是这段文件必须存在，否则图片无法居中 --><span>xxxx</span><img src="./image/1.jpg" alt=""></div></body>
</html>

3.文字图片混合居中

<html><head><style>* {margin: 0px;padding: 0px;}.outer {width: 300px;height: 300px;background-color: gray;text-align: center;line-height: 300px;/* 这里之所以这样设置，然后在单独设置span中的字体大小，是因为让图片的位置不因为字体的大小变化而影响图片的位置 */font-size: 0px;}img {width: 50px;height: 50px;vertical-align: middle;box-sizing: 5px;border-radius: 50%;position: relative;left: 20px;}span {font-size: 20px;vertical-align: middle;}</style></head><body> <div class="outer"><span>机器猫:</span><img src="./image/cat.jpg"  ></div></body>
</html>

四、浮动

1.简介

最早先浮动是为了 文字环绕图片而设计的，现在还多用于布局。

2.文本浮动后的特点

1.脱离文档流，会漂浮起来，不会在独占一行，会和其他元素共用一行。
2.不管元素浮动前是什么元素，浮动后，默认宽高都是由内容撑开的（最小原则）而且可以设置宽高
3.漂浮的元素不会margin合并，也不会margin塌陷，能够完美的设置四个方向margin和padding
4.不会像行内块元素那样当作文本处理（没有行内块的空白问题）
5，如果浮动元素的下一个元素中有文字，那么浮动元素不会盖住文字

实例：

<html>
<head><style>.outer {width: 500px;height: 600px;background-color: gray;           }.box {height: 100px;}.box1 {background-color: blue;}.box2 {background-color: red; float: left;}.box3 {background-color: pink;height: 200px;}</style>
</head>
<body><div class="outer"><div class="box box1">盒子1</div><div class="box box2">盒子2</div><div class="box box3">盒子3</div></div></body>
</html>

来张示意图：

在这里插入图片描述

3.解决浮动的影响

最主要的影响是就是元素浮动之后，后边的块元素会顶替原来元素的位置。解决办法就是，在受影响的元素上使用

clear: both

例子：

<html>
<head><style>.outer {width: 500px;height: 600px;background-color: gray;           }.box {height: 100px;}.box1 {background-color: blue;}.box2 {background-color: red; float: left;}.box3 {background-color: pink;/* 清除.box2浮动给box3带来的影响 */clear: both;}</style>
</head>
<body><div class="outer"><div class="box box1">盒子1</div><div class="box box2">盒子2</div><div class="box box3">盒子3</div></div></body>
</html>

4.浮动的使用原则

在一个父元素中有多个子元素，如果要使用浮动的话，尽量要么全浮动，要么全不浮动

5.优雅写法

使用clear:both属性的时候，需要找到浮动元素的下一个元素，也就是受影响的元素，加上这个属性。
如果我们不想编辑受影响的元素，并且子元素全部是浮动属性的话，可以使用以下写法

<html>
<head><style>.outer {width: 500px;background-color: gray;     }/* 在所有子元素的最后一行加上一个隐藏的块元素，来清除浮动 *//* 但是这种写法必须是子元素全部浮动的场景，如果最后一个元素没有浮动，这种写法无效 */.outer::after {content: "";display: block;clear: both;}.box {height: 100px;width: 100px;float: left;}.box1 {background-color: blue;}.box2 {background-color: red; }.box3 {background-color: pink;}.center {width: 800px;height: 300px;background-color: green;}</style>
</head>
<body><div class="outer"><div class="box box1">盒子1</div><div class="box box2">盒子2</div><div class="box box3">盒子3</div></div><div class="center">中间</div></body>
</html>

5.浮动综合练习

示意图如下：

在这里插入图片描述

5.1 html代码

<html>
<head><link rel="stylesheet" href="./css/index.css">
</head><body><div class="container"><!-- 头部 --><div class="header clearfix"><div class="logo leftfix">logo</div><div class="banner1 leftfix">banner1</div><div class="banner2 leftfix">banner2</div></div><!-- 菜单 --><div class="menu">菜单</div><!-- 内容部分 --><div class="content clearfix"><!-- 左半部分 --><div class="left leftfix"><!-- 第一行 --><div class="oneline clearfix"><div class="item1 leftfix">栏目1</div><div class="item2 leftfix">栏目2</div></div><!-- 第二行4个小布局 --><div class="twoline"><div class="item3 leftfix">栏目3</div><div class="item4 leftfix">栏目4</div><div class="item5 leftfix">栏目5</div><div class="item6 leftfix">栏目6</div></div></div><!-- 右半部分 --><div class="right leftfix"><div class="item7">栏目7</div><div class="item8">栏目8</div><div class="item9">栏目9</div></div></div><!-- 底部 --><div class="footer">页脚</div></div></body>
</html>

5.2 CSS代码

* {padding: 0;margin: 0;
}
/* 设置浮动和清除浮动属性，减少重复CSS代码 */
.leftfix {float: left;
}
.clearfix::after {content: "";display: block;clear: both;
}/* 全局样式 */
.container {width: 960px;margin: 0 auto;
}/* header中的样式 */
.logo,.banner1,.banner2 {height: 80px;line-height: 80px;background-color: #ccc;text-align: center;
}.logo {width: 200px;
}
.banner1 {width: 540px;margin: 0 10px;
}
.banner2 {width: 200px;
}/* 菜单样式 */
.menu {height: 30px;background-color: #ccc;margin-top: 10px;line-height: 30px;text-align: center;
}/* 内容部分样式 */
.content {margin-top: 10px;
}
.item1,.item2 {height: 198px;width: 368px;line-height: 200px;text-align: center;margin-right: 10px;border: 1px solid black;
}
.twoline {margin-top: 10px;
}
.twoline > div {width: 178px;height: 198px;margin-right: 10px;line-height: 200px;text-align: center;border: 1px solid black;
}.right > div {height: 128px;width: 198px;line-height: 130px;text-align: center;border: 1px solid black;
}
.item8 {margin: 10px 0;
}.footer {width: 960px;height: 60px;margin-top: 10px;background-color: #eee;line-height: 60px;text-align: center;
}

小总结：

这里很多父元素并没有设置高度，是靠子元素内容撑起来的。这样会方便一些，如果高度固定，可能在子元素尺寸发生变化的时候，影响比较大

五、定位

1.相对定位

 position: relative;top:left:right:bottom:

特点：
1.元素会相对于自己原理的元素进行移动
2.相对定位不会脱离文档流，不会影响其它的文档的位置
3.定位的元素，层级会比其它元素高。但是层级高不是浮动。
4.应用场景：适合给元素微调，因为它不会影响其它元素的位置

2.绝对定位

position: absolute;
top:
left:
right:
bottom:

特点：
1.绝对定位会脱离文档流，和浮动一样，直接漂浮起来。后边的元素就会顶替它的位置。但是不一样的是，绝对定位不会像浮动那样，产生文字环绕效果。
2.如果绝对定位元素的父元素"没有定位"，它的参考对象就是浏览器左上角。
如果绝对定位元素的父元素"有定位",它的参考对象就是父元素的左上角。

3.相对和绝对配合使用

一般他们两个配置使用：叫做"子绝父相"，也就是父元素开启相对定义，子元素开启绝对定位。这样子元素的定位就是父元素了。

4.固定定位

特点：

1.固定定位也会脱离文档流
2.固定定位的参考点永远是"视口"

实例：

这个盒子就一直固定在视口的左上角
.box {width: 100px;height: 100px;background-color: pink;position: fixed;top: 0;left: 0;
}

5.定位块元素居中

方案1：通过计算

通过计算让块元素居中

<html>
<head><style>.outer {width: 500px;height: 500px;background-color: pink;position: relative;}.inner {width: 200px;height: 200px;background-color: gray;position: absolute;top: 150;left: 150;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>

方案2: 不用通过计算

这种方案的好处就是：无论父元素怎么变化，块元素都是居中。

<html>
<head><style>.outer {width: 700px;height: 800px;background-color: pink;position: relative;}.inner {width: 200px;height: 200px;background-color: gray;position: absolute;/* 这五个参数，在设置居中的时候缺一不可 */top: 0;bottom: 0;left: 0;right: 0;margin: auto;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>

6.子充满父元素

当一个父元素的宽高无法确定时，或者二者有一个无法确定
并且子元素不设置宽高的情况，使子元素如果充满父元素。可以使用以下方案

<html>
<head><style>.outer {height: 500px;background-color: pink;position: relative;}.inner {background-color: gray;position: absolute;/* 全部铺满父元素 */top: 0;bottom: 0;left: 0;right: 0;}</style>
</head>
<body><div class="outer"><div class="inner">内部块</div></div>
</body>
</html>

六、布局注意事项

版心

在PC端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这就是版心
版心的宽度一般在960-1200之间
版心是一个，也可以是多个。推荐使用多个版心，这样调整东西都比较方便
设置版心的最终目的就是为了尽可能的满足小的屏幕查看网站不出现横向滚动条

七、less

1.简介

less是一门CSS的预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更容易维护和扩展。less既可以运行在浏览器端，也可以运行在server端(nodejs)端

1.1 安装

在vscode中安装easy less插件
新建index.less文件，保存，自动会生成index.css文件

新建index.less文件，保存，自动会生成index.css文件

1.2.引入

引入的时候不需要引入less文件，还是引入css文件，编写代码是在less文件中

2.语法

2.1 变量

设置变量语法：

@变量名:值

实例：

@color:red;.outer{width: 100px;height: 100px;background-color: @color;
}

2.2 less嵌套

在写CSS文件的时候，所有的CSS属性都是由上到下一次编写，没有层级关系。逻辑性很差，一旦内容很多之，不好找到对应的CSS属性。less就很好的解决了这个问题。
实例

.outer{width: 100px;height: 100px;background-color: green;.header {width: 50px;height: 50px;background-color: #fff;.itme {display: inline-block;}}
}

保存之后css文件的效果

.outer {width: 100px;height: 100px;background-color: green;
}
.outer .header {width: 50px;height: 50px;background-color: #fff;
}
.outer .header .itme {display: inline-block;
}

less的语法还是比价多的，这里不做详细介绍。主要是为了用到它的嵌套功能，逻辑性比较强。

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

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

相关文章

【linux】环境变量（进程二）

【linux】环境变量（进程二）

这里写目录标题 命令行参数&#xff1a;环境变量&#xff1a; 命令行参数&#xff1a; 不谈命令行参数就谈环境变量就是耍流氓。 相信我们在C语言阶段都在main函数里见过参数。 例如int main(int argc, char* argv[]) 这是什么东西呢&#xff1f; 话不多说我们直接打印一下看…
阅读更多...
JupyterNotebook 如何切换使用的虚拟环境kernel

JupyterNotebook 如何切换使用的虚拟环境kernel

在Jupyter Notebook中&#xff0c;如果需要修改使用的虚拟环境Kernel&#xff1a; 首先&#xff0c;需要确保虚拟环境已经安装conda上【conda基本操作】 打开Jupyter Notebook。 在Jupyter Notebook的顶部菜单中&#xff0c;选择 “New” 在弹出的窗口中&#xff0c;列出了…
阅读更多...
“JavaScript: void（0）的替代方案有哪些？”

“JavaScript: void（0）的替代方案有哪些？”

学习目标&#xff1a; 理解javascript:void(0)的工作原理&#xff0c;以及它在前端开发中的作用和用途。掌握javascript:void(0)的正确用法&#xff0c;包括在HTML中使用和在事件处理程序中使用。能够识别javascript:void(0)可能引起的常见问题&#xff0c;并学会相应的解决方…
阅读更多...
numpy的数组深度叠加dstack详解

numpy的数组深度叠加dstack详解

☞ ░ 前往老猿Python博客 ░ https://blog.csdn.net/LaoYuanPython 一、引言 numpy的dstack函数用于沿着第三个维度&#xff08;深度&#xff09;将数组堆叠起来。它将多个数组按照深度方向进行堆叠&#xff0c;生成一个新的数组。具体来说&#xff0c;dstack函数会将输入的…
阅读更多...
docker部署开源多功能监控系统

docker部署开源多功能监控系统

HertzBeat 是一个无需 Agent、高性能、易扩展、功能强大的开源实时监控告警系统&#xff0c;无需 Agent、高性能、易扩展、功能强大&#xff0c;由 Dromara 团队开发并开源&#xff0c;能够帮我们轻松监控应用、服务、基础设施等各种资源的运行状况 部署 docker run -d -p 11…
阅读更多...
腾讯云服务器按月收费价格表，优惠价格5元一个月起

腾讯云服务器按月收费价格表，优惠价格5元一个月起

2024腾讯云服务器多少钱一个月&#xff1f;5元1个月起&#xff0c;腾讯云轻量服务器4核16G12M带宽32元1个月、96元3个月&#xff0c;8核32G22M配置115元一个月、345元3个月&#xff0c;腾讯云轻量应用服务器61元一年折合5元一个月、4核8G12M配置646元15个月、2核4G5M服务器165元…
阅读更多...
01 JDBC介绍

01 JDBC介绍

文章目录 JDBC本质版本使用核心APIDriverDriverManager驱动注册连接对象获取 Connection获取执行对象事务管理 Statement概述 ResultSet概述 JDBC本质 官方&#xff08;sun公司&#xff09;定义的一套操作所有关系型数据库的规则&#xff0c;即接口各个数据库厂商去实现这套接…
阅读更多...
【Week Y2】使用自己的数据集训练YOLO-v5s

【Week Y2】使用自己的数据集训练YOLO-v5s

Y2-使用自己的数据集训练YOLO-v5s 零、遇到的问题汇总&#xff08;1&#xff09;遇到git的import error&#xff08;2&#xff09;Error&#xff1a;Dataset not found&#xff08;3&#xff09;Error&#xff1a;删除中文后&#xff0c;训练图片路径不存在 一、.xml文件里保存…
阅读更多...
框架篇常见面试题

框架篇常见面试题

1、Spring框架的单例bean是线程安全的吗&#xff1f; 2、什么是AOP&#xff1f; 3、Spring的事务是如何实现的&#xff1f; 4、Spring事务失效的场景 5、SpringBean的声明周期 6、Spring的循环依赖 7、SpringMVC的执行流程 8、SpringBoot自动配置原理 9、Spring常见注解
阅读更多...
Java中的实用类讲解(中篇)

Java中的实用类讲解(中篇)

如果想观看更多Java内容 可上我的个人主页关注我&#xff0c;地址子逸爱编程-CSDN博客https://blog.csdn.net/a15766649633?spm1000.2115.3001.5343 使用工具 IntelliJ IDEA Community Edition 2023.1.4 使用语言 Java8 代码能力快速提升小方法&#xff0c;看完代码自己敲…
阅读更多...
AV1：帧内预测（一）

AV1：帧内预测（一）

​VP9支持10种帧内预测模式&#xff0c;包括8种角度模式和非角度模式DC、TM(True Motion)模式&#xff0c;AV1在其基础上进一步扩展&#xff0c;AV1帧内预测角度模式更细化&#xff0c;同时新增了部分非角度模式。 扩展的角度模式 AV1在VP9角度模式的基础上进一步扩展&#xf…
阅读更多...
CSharp的lambda表达式匿名类扩展方法

CSharp的lambda表达式匿名类扩展方法

c#的lamba表达式 之前已经写过一些关于委托还有事件的文章&#xff0c;今天就来介绍一下lambda表达式。 首先定义需要的函数以及委托 { public delegate void DoNothingDelegate(); public delegate void StudyDelegate(int id, string name);private void DoNothing() {Cons…
阅读更多...
蓝桥杯--完全二叉树

蓝桥杯--完全二叉树

import java.util.Scanner;import static java.lang.Math.log;public class top9 {//求树的每一层的和public static void main(String [] args){Scanner scannernew Scanner(System.in);int nscanner.nextInt();int [] arrnew int[n];for(int i0;i<n;i){arr[i]scanner.next…
阅读更多...
Android Studio实现内容丰富的安卓志愿者平台

Android Studio实现内容丰富的安卓志愿者平台

获取源码请点击文章末尾QQ名片联系&#xff0c;源码不免费&#xff0c;尊重创作&#xff0c;尊重劳动 项目编号122 1.开发环境android stuido jdk1.8 eclipse mysql tomcat 2.功能介绍 安卓端&#xff1a; 1.注册登录 2.查看公告 3.查看岗位 4.浏览新闻&#xff0c; 5.个人中心…
阅读更多...
1、Java虚拟机学习-类的生命周期-加载阶段-以及怎样查看方法区中的对象和堆中对象的关联以及静态变量存在什么地方

1、Java虚拟机学习-类的生命周期-加载阶段-以及怎样查看方法区中的对象和堆中对象的关联以及静态变量存在什么地方

类的生命周期 其中连接又可以分为3个小阶段 一、加载阶段 1、加载阶段第一步是类加载器根据类的全限定名通过不同的渠道以二进制流的方式获取字节码信息。 渠道: 2、类加载器在加载完类之后&#xff0c;Java虚拟机会将字节码中的信息保存在内存的方法区中。 方法区是虚拟…
阅读更多...
使用Vscode连接云进行前端开发

使用Vscode连接云进行前端开发

使用Vscode连接云进行前端开发 1、ssh连接腾讯云 本人使用的是腾讯云。 然后vscode,用最新版&#xff0c;插件选择remote ssh&#xff0c;或者remote xxx下载过来。 然后点击远程资源管理器&#xff0c;选择SSH通道 然后输入命令如下。 ssh rootip然后输入密码 腾讯云应该…
阅读更多...
Source Insight使用-添加新的文件类型

Source Insight使用-添加新的文件类型

目录 遇到的问题解决方法结果 遇到的问题 在Source Insight中我们通常查看.c和.h文件&#xff0c;当使用其查看.java 或者.hal等类型文件时&#xff0c;发现找不到 解决方法 以添加.hal文件为例: 选择Options 下面的File Type Options… 选项。 点击左侧的 “C/C Source F…
阅读更多...
哈尔滨工业大学 《材料物理》 笔记-3

哈尔滨工业大学 《材料物理》 笔记-3

原内容请参考哈尔滨工业大学何飞教授&#xff1a;https://www.bilibili.com/video/BV18b4y1Y7wd/?p12&spm_id_frompageDriver&vd_source61654d4a6e8d7941436149dd99026962 或《材料物理性能及其在材料研究中的应用》&#xff08;哈尔滨工业大学出版社&#xff09; 量…
阅读更多...
YOLOv9改进策略：卷积魔改 | 分布移位卷积（DSConv）,提高卷积层的内存效率和速度

YOLOv9改进策略：卷积魔改 | 分布移位卷积（DSConv）,提高卷积层的内存效率和速度

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文改进内容&#xff1a; YOLOv9如何魔改卷积进一步提升检测精度&#xff1f;提出了一种卷积的变体&#xff0c;称为DSConv&#xff08;分布偏移卷积&#xff09;&#xff0c;其可以容易地替换进标准神经网络体系结构并且实现较低的存…
阅读更多...
针对BSV区块链新推出的网络访问规则NAR和警报系统AS的解释与问答

针对BSV区块链新推出的网络访问规则NAR和警报系统AS的解释与问答

​​发表时间&#xff1a;2024年2月22日 BSV区块链社区团队最近开设了一个Twitter&#xff08;X&#xff09;话题空间&#xff0c;讨论BSV区块链协会最新推出的网络访问规则和警报系统的相关问题。 本次讨论由BSV区块链社区负责人Brett Banfe主持&#xff0c;以便社区成员更好…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023