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

CSS之我不会

news 2025/7/12 9:45:44

非常推荐html-css学习视频：尚硅谷html-css

一、选择器

作用：选择页面上的某一个后者某一类元素

基本选择器

1.标签选择器

格式：标签{}

<h1>666</h1><style>h1{css语法}
</style>

2.类选择器

格式：.类名{}

<h1 class="name">666</h1>
<style>.name{css语法}
</style>

3.id选择器

格式：#名称{}

<h1 id="name">666</h1>
<style>#name{css语法}
</style>

高级选择器（只说一个`id+class`组合）

格式：id

<style>.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: aquamarine;text-align: center;color: gray;text-decoration: none;margin-right: 5px;line-height:50px;font: bold 20px/50px Arial;}/*属性名,属性名 = 属性值（正则）= 表示绝对等于*= 表示包含^= 表示以...开头$= 表示以...结尾存在id属性的元素a[]{}*/a[id]{/*a标签使用id的元素*/background: deeppink;}a[id=first]{/*id=first的元素*/background: greenyellow;}a[class*="links"]{/*class 中有links的元素*/background: green;}a[href^=http]{/*选中href中以http开头的元素*/background: aquamarine;}a[href$=pdf]{/*选中href中以http开头的元素*/background: aquamarine;}
</style><p class="demo"><a href="https://www.taobao.com/" class="links item first" id="first">淘宝</a><a href="" class="links item active" target="_blank " title="test">链接</a><a href="img/hello.html" class="links item">网页</a><a href="img/str1.png" class="links item">png</a><a href="img/str2.jpg" class="links item">jpg</a><a href="abc" class="links item">链2</a><a href="/fy.pdf" class="links item">pdf</a><a href="/quit.pdf" class="links item">pdf2</a><a href="dump.doc" class="links item">doc</a><a href="kiko.doc" class="links item last">doc2</a>
</p>

二、美化

1.字体 font

font-family：字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色

2.文本样式 text

文本对齐方式：text-align：center
首行缩进: text-indent：2em
行高: line-height：300px
下划线:text-decoration

text-decoration:underline /下划线/
text-decoration:line-through /中划线/
text-decoration:overline /上划线/
text-decoration:none /超链接去下划线/

图片、文字水平对齐（行内元素对齐）

img,span{vertical-align: middle;
}

6.文本阴影

<style>
h1 {text-shadow: 2px 2px 5px red;
}
</style><h1>文本阴影效果！</h1>

在这里插入图片描述

3.超链接伪类

	<style>/*超链接有默认的颜色*/a{text-decoration: hotpink;color: #000000;}/*鼠标悬浮的状态*/a:hover{color: dodgerblue;}/*鼠标按住未释放的状态*/a:active{color:green}/*点击之后的状态*/a:visited{color:mediumpurple;}</style>

列表 ui li

有序 ui li
无序 ol li
list-style-type: circle
list-style-type: square
list-style-type: upper-roman
list-style-type: lower-alpha

背景

1.背景颜色 `background-color`

2.透明度 `opacity`

3.背景图片 `background-image: url("name.jpg")`

三、盒子模型

布局三大核心：盒子模型、浮动、定位

1.元素的显示模式

1.块元素（block）

又称：块级元素特点：

在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
默认宽度：撑满父元素。
默认高度：由内容撑开。
可以通过 CSS 设置宽高。

主体结构标签： <html> 、 <body>
排版标签： <h1> ~ <h6> 、 <hr> 、 <p> 、 <pre> 、 <div>
列表标签： <ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd>
表格相关标签： <table> 、 <tbody> 、 <thead> 、 <tfoot> 、 <tr> 、 <caption>
<form> 与 <option>

2.行内元素（inline）

又称：内联元素特点:

在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
默认宽度：由内容撑开。
默认高度：由内容撑开。
无法通过 CSS 设置宽高。

文本标签： <br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、 <ins>
<a> 、 <label>、<span>、<input>

3.行内块元素（inline-block）

又称：内联块元素特点：

在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
默认宽度：由内容撑开。
默认高度：由内容撑开。
可以通过 CSS 设置宽高。

图片： <img>
单元格： <td> 、 <th>
表单控件： <textarea> 、 <select> 、 <button>
框架标签： <iframe>

2.盒子模型

在这里插入图片描述

网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子 Box 。
利用 CSS 设置好盒子样式，然后摆放到相应位置。 （难点）
往盒子里面装内容

3.盒子模型（Box Model）组成

在这里插入图片描述

1.边框

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

在这里插入图片描述
边框样式 border-style 可以设置如下值：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线

2.内边距（padding）

和写属性
在这里插入图片描述
分写属性

3.外边距（margin）

在这里插入图片描述

margin 注意事项：

子元素的 margin ，是参考父元素的 content 计算的。（因为是父亲的 content 中承装着子元素）
上 margin 、左 margin ：影响自己的位置；下 margin 、右 margin ：影响后面兄弟元素的位置。
块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右 margin 可以完美设置，上下 margin 设置无效。
margin 的值也可以是 auto ，如果给一个块级元素设置左右 margin 都为 auto ，该块级元素会在父元素中水平居中。
margin 的值可以是负值

4.处理内容溢出

在这里插入图片描述

注意：

overflow-x 、 overflow-y 不能一个是 hidden ，一个是 visible ，是实验性属性，不建议使用。
overflow 常用的值是 hidden 和 auto ，除了能处理溢出的显示方式，还可以解决很多疑难杂症。

5.布局小技巧（重点）

行内元素、行内块元素，可以被父元素当做文本处理。

即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
例如： text-align 、 line-height 、 text-indent 等。

如何让子元素，在父亲中 水平居中：

若子元素为块元素，给子元素加上： margin:0 auto
若子元素为行内元素、行内块元素，给父元素加上：text-align:center

如何让子元素，在父亲中 垂直居中：

若子元素为块元素，给子元素加上： margin-top ，值为：父元素 content －子元素盒子(margin+border+padding) / 2。
若子元素为行内元素、行内块元素：让父元素的 line-height=height（父元素高度），每个子元素都加上： vertical-align:middle 。
补充：若想绝对垂直居中，父元素 font-size 设置为 0 。

不知到父元素高度，子元素在父元素垂直居中

通过数学计算calc()，计算出父元素高度：用100%视口高度-已经占用的高度 100vh - height 然后同上

height: calc(100vh - 70px);

6.常用布局练习

块元素水平垂直居中

 	<style>.outer{height: 400px;width: 400px;background-color: gray;overflow: hidden;}.inner{height: 100px;width: 200px;padding: 10px;border: 10px solid red;background-color: orange;margin: 130px auto 0;text-align: center;line-height: 100px;}</style><div class="outer"><div class="inner">inner</div></div>

行内元素水平垂直居中

	<style>.outer{height: 400px;width: 400px;background-color: pink;text-align: center;line-height: 400px;}</style><div class="outer"><span style="background-color: salmon;height: 20px">出来玩</span></div>

行元素、行内块绝对居中

	<style>.outer{height: 400px;width: 400px;background-color: salmon;text-align: center;line-height: 400px;font-size: 0;}.outer img{vertical-align: middle;height: 100px;width: 100px;}.outer span{background-color: #35BAF6;vertical-align: middle;font-size: 40px;}</style><div class="outer"><span style="">头像：</span><img src="../image/小姐姐.gif"></div>

背景图片铺满

		html, body{width: 100%;height: 100%;}body{background: url("../image/bg.jpg");background-repeat: no-repeat; /*图片不重复*/background-size: cover;  /*图片铺满整个视口*/}

四、浮动 float

场景：布局

1.简介

在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。
在这里插入图片描述

2.元素浮动后的特点

🤢脱离文档流。
😊不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽
高。
😊不会独占一行，可以与其他元素共用一行。
😊不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。
😊不会像行内块一样被当做文本处理（没有行内块的空白问题）。

3.解决浮动产生的影响

3.1元素浮动后会有哪些影响

对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

3.2 解决浮动产生的影响（清除浮动）

解决方案：

方案一：给父元素指定高度。
方案二：给父元素也设置浮动，带来其他影响。
方案三：给父元素设置 overflow:hidden 。
方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。
方案五： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===> 推荐使用

.parent::after {
content: "";
display: block;
clear:both;
}

布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

3.3 浮动小练习

整体效果如下：
在这里插入图片描述

盒子分析
在这里插入图片描述

	<style>* {margin: 0;padding: 0;}.float-left {float: left;}.float-right{float: right;}.clear-float::after{content: '';display: block;clear: both;}.container {text-align: center;width: 960px;margin: 0 auto;}.header {height: 80px;width: 960px;text-align: center;line-height: 80px;}.log{width: 200px;margin-right: 10px;}.banner1{width: 540px;margin-right: 10px;}.banner2{width: 200px;}.log,.banner1,.banner2{background-color: #ccc;height: 80px;}.menu{margin-top: 10px;background-color: #CCC;line-height: 30px;}.content{width: 960px;}.item1,.item2{width: 368px;height: 198px;border: 1px solid black;margin-top: 10px;margin-right: 10px;line-height: 198px;}.item3,.item4,.item5,.item6{height: 198px;width: 178px;margin-right: 10px;margin-top: 10px;border: 1px solid black;line-height: 198px;}.item7,.item8,.item9{border: 1px solid black;height: 128px;width: 198px;margin-top: 10px;line-height: 128px;}.footer{background-color: #ccc;width: 960px;height: 60px;margin-top: 10px;line-height: 60px;}</style><div class="container"><!--头--><div class="header clear-float"><div class="log float-left">log</div><div class="banner1 float-left">banner</div><div class="banner2 float-left">banner</div></div><!--菜单--><div class="menu">菜单</div><!--内容--><div class="content clear-float"><!--左--><div class="content-left float-left"><!--上--><div class="left-up clear-float"><div class="item1 float-left">栏目一</div><div class="item2 float-left">栏目二</div></div><!--下--><div class="left-down clear-float"><div class="item3 float-left">栏目三</div><div class="item4 float-left">栏目四</div><div class="item5 float-left">栏目五</div><div class="item6 float-left">栏目六</div></div></div><!--右--><div class="content-right clear-float"><div class="item7 float-left">栏目七</div><div class="item8 float-left">栏目八</div><div class="item9 float-left">栏目九</div></div></div><!--页脚--><div class="footer">页脚</div></div>

五、定位 position

1.相对定位

1.1 如何设置相对定位？

给元素设置 position:relative 即可实现相对定位。
可以使用 left 、 right 、 top 、 bottom四个属性调整位置

1.2 相对定位的参考点在哪里？

相对自己原来的位置

1.3 相对定位的特点：

1.不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

默认规则是：
定位的元素会盖在普通元素之上。
都发生定位的两个元素，后写的元素会盖在先写的元素之上。
3.left 不能和 right 一起设置， top 和 bottom 不能一起设置。
4. 相对定位的元素，也能继续浮动，但不推荐这样做。
5. 相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。

注意：绝大多数情况下，相对定位，会与绝对定位配合使用。（子元素绝对定位，父元素相对定位——子绝父相）

2.绝对定位

2.1 如何设置绝对定位？

给元素设置 position: absolute 即可实现绝对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

2.2 绝对定位的参考点在哪里？

参考它的包含块。

什么是包含块？

对于没有脱离文档流的元素：包含块就是父元素；
对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）

2.3 绝对定位元素的特点：

脱离文档流，会对后面的兄弟元素、父元素有影响。
left 不能和 right 一起设置， top 和 bottom 不能一起设置。
绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。
无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。

何为定位元素？ —— 默认宽、高都被内容所撑开，且能自由设置宽高。

3.固定定位

3.1 如何设置为固定定位？

给元素设置 position: fixed 即可实现固定定位。
可以使用 left 、 right 、 top 、 bottom四个属性调整位置。

3.2 固定定位的参考点在哪里？

参考它的视口

什么是视口？—— 对于 PC 浏览器来说，视口就是我们看网页的那扇“窗户”。

3.3 固定定位元素的特点

脱离文档流，会对后面的兄弟元素、父元素有影响。
left 不能和 right 一起设置， top 和 bottom 不能一起设置。
固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
固定定位的元素，也能通过 margin 调整位置，但不推荐这样做。
无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。

4. 粘性定位

4.1 如何设置为粘性定

给元素设置 position:sticky 即可实现粘性定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置，不过最常用的是 top 值。

4.2 粘性定位的参考点在哪里？

离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

4.3 粘性定位元素的特点

不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
最常用的值是 top 值。
粘性定位和浮动可以同时设置，但不推荐这样做。
粘性定位的元素，也能通过 margin 调整位置，但不推荐这样做。

粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。

5.定位层级

定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
可以通过 css 属性 z-index 调整元素的显示层级。
z-index 的属性值是数字，没有单位，值越大显示层级越高。
只有定位的元素设置 z-index 才有效。
如果 z-index 值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级。

6. 定位的特殊应用

注意：

发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。
发生相对定位后，元素依然是之前的显示模式。
以下所说的特殊应用，只针对绝对定位和固定定位的元素，不包括相对定位的元素。

让定位元素的宽充满包含块

块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为 0 。
高度想与包含块一致， top 和 bottom 设置为 0 。

让定位元素在包含块中居中

方案一：

left:0;
right:0;
top:0;
bottom:0;
margin:auto;

方案二：

left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;

注意：该定位的元素必须设置宽高！！！

七、布局

1.版心

在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心。
版心的宽度一般是 960 ~1200 像素之间。
版心可以是一个，也可以是多个。

2. 常用布局名词

位置	名词
顶部导航条	`topbar`
页头	`header` 、 `page-header`
导航	`nav` 、 `navigator` 、 `navbar`
搜索框	`search` 、 `search-box`
横幅、广告、宣传图	`banner`
主要内容	`content` 、 `main`
侧边栏	`aside` 、 `sidebar`
页脚	`footer` 、 `page-footer`

八、伸缩盒模型（display：flex布局）

1.伸缩容器、伸缩项目

伸缩容器：开启了 flex 的元素，就是：伸缩容器。

给元素设置： display:flex 或 display:inline-flex ，该元素就变为了伸缩容器。
display:inline-flex 很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。
一个元素可以同时是：伸缩容器、伸缩项目。

伸缩项目：伸缩容器所有子元素自动成为了：伸缩项目。

仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。
无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”。

2.主轴与侧轴

主轴： 伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）。
侧轴： 与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边
是终点）。

3.主轴方向

属性名： flex-direction
常用值如下：

1.row ：主轴方向水平从左到右 —— 默认值
2.row-reverse ：主轴方向水平从右到左。
3.column ：主轴方向垂直从上到下。
4.column-reverse ：主轴方向垂直从下到上。

在这里插入图片描述

注意：改变了主轴的方向，侧轴方向也随之改变。

4.主轴的换行方式

属性名： flex-wrap
常用值如下：
1. nowrap ：默认值，不换行。
2. wrap ：自动换行，伸缩容器不够自动换行。
3. wrap-reverse ：反向换行。

5.flex-flow

flex-flow 是一个复合属性，复合了 flex-direction 和 flex-wrap 两个属性。值没有顺序要求
```
flex-flow: row wrap;
```

6.主轴对齐方式

属性名： justify-content
常用值如下：
1. flex-start ：主轴起点对齐。—— 默认值
2. flex-end ：主轴终点对齐。
3. center ：居中对齐
4. space-between ：均匀分布，两端对齐（最常用）。
5. space-around ：均匀分布，两端距离是中间距离的一半。
6. space-evenly ：均匀分布，两端距离与中间距离一致。

7.侧轴对齐方式

7.1 一行的情况

所需属性： align-items
常用值如下：
1. flex-start ：侧轴的起点对齐。
2. flex-end ：侧轴的终点对齐。
3. center ：侧轴的中点对齐。
4. baseline : 伸缩项目的第一行文字的基线对齐。
5. stretch ：如果伸缩项目未设置高度，将占满整个容器的高度。—— （默认值）

7.2 多行的情况

所需属性： align-content
常用值如下：
1. flex-start ：与侧轴的起点对齐。
2. flex-end ：与侧轴的终点对齐。
3. center ：与侧轴的中点对齐。
4. space-between ：与侧轴两端对齐，中间平均分布。
5. space-around ：伸缩项目间的距离相等，比距边缘大一倍。
6. space-evenly : 在侧轴上完全平分。
7. stretch ：占满整个侧轴。—— 默认值

8. flex 实现水平垂直居中

方法一：父容器开启 flex 布局，随后使用 justify-content 和 align-items 实现水平垂直居中

.outer {width: 400px;height: 400px;background-color: #888;display: flex;justify-content: center;align-items: center;
}
.inner {width: 100px;height: 100px;background-color: orange;
}

方法二：父容器开启 flex 布局，随后子元素 margin: auto

.outer {width: 400px;height: 400px;background-color: #888;display: flex;
}
.inner {width: 100px;height: 100px;background-color: orange;margin: auto;
}

九、H5布局简介

新增布局标签

标签名	语义	单/双标签
header	整个页面，或部分区域的头部	双
footer	整个页面，或部分区域的底部	双
nav	导航	双
article	文章、帖子、杂志、新闻、博客、评论等。	双
section	页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题）。	双
aside	侧边栏	双
main	文档的主要内容 ( WHATWG 没有语义， IE 不支持)，几乎不用。	双
hgroup	包裹连续的标题，如文章主标题、副标题的组合（ W3C 将其删除）	双

关于 article 和 section ：
1. artical 里面可以有多个 section 。
2. section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 section 元素。
3. article 比 section 更强调独立性，一块内容如果比较独立、比较完整，应该使用
4. article 元素。

CSS之我不会

非常推荐html-css学习视频：尚硅谷html-css 一、选择器作用：选择页面上的某一个后者某一类元素基本选择器 1.标签选择器格式：标签{} <h1>666</h1><style>h1{css语法} </style>2.类选择器格式：.类…...

编程日记 2024/9/11 12:54:55

AI绘画：SD打光神器！（Stable Diffusion进阶篇：Imposing Consistent Light）

前言在上一篇笔记中学习了如何简单地下载以及使用IC-Light，今天的内容会稍微有点不一样。对于学过stable diffusion的小伙伴来说，forge UI和Comfy UI会更加熟悉一些。在IC-Light发布后，Openpose editor的开发者将其制作成了一个Forge UI上…...

编程日记 2024/9/11 12:53:54

QQ频道机器人零基础开发详解(基于QQ官方机器人文档)[第二期]

QQ频道机器人零基础开发详解(基于QQ官方机器人文档)[第二期] 第二期介绍：频道模块之频道管理目录 QQ频道机器人零基础开发详解(基于QQ官方机器人文档)[第二期]第二期介绍：频道模块之频道管理获取用户详情获取用户频道列表获取频道详情获取子频道列表获…...

编程日记 2024/9/11 12:48:49

参赛心得和思路分享：2021第二届云原生编程挑战赛2：实现一个柔性集群调度机制

关联比赛: 2021第二届云原生编程挑战赛2：实现一个柔性集群调度机制参赛心得历时快两个月的第二届云原生编程挑战赛结束了，作为第一次参赛的萌新，拿下了28名的成绩，与第一名差了19万分，因为赛制时间太长&#xff0c…...

编程日记 2024/9/11 12:46:46

具体函数的卡诺图填入

目录用卡诺图表示逻辑函数基本步骤例子1 例子2 例子3 用卡诺图表示逻辑函数基本步骤例子1 由真值表得卡诺图。在函数值为1的地方在卡诺图上画上1。例子2 例子3 非标准与或式，要找到公共部分。将AB所在的那一行填上1。将A非D的那个部分也填上1。再…...

编程日记 2024/9/11 12:45:44

STM32 HAL freertos零基础（六）计数型信号量

1、计数型信号量计数型信号量（Counting Semaphore）是另一种类型的信号量，它可以保持一个大于等于0的整数值，这个值表示可用资源的数量。本质上相当于队列长度大于1得队列。经典问题就是剩余车辆统计，出入车辆，车辆数据可以实时更新。 2、相关API函数 xSemaphoreCreat…...

编程日记 2024/9/11 12:44:43

Dynamics CRM Ribbon Workbench-the solution contains non-entity components

今天在一个低版本的环境里准备用Ribbon Workbench去编辑一个按钮时，遇到了如下错误一开始没当回事，以为是我的解决方案问题，去检查了下，只有一个组件，并且哪怕我把组件换成了某个实体也不行，尝试了其他任何…...

编程日记 2024/9/11 12:43:42

谷歌对抗司法部：为什么谷歌的“数百个竞争对手”说法站不住脚

随着谷歌反垄断陪审团审判的进行，谷歌声称美国司法部对广告技术市场的看法狭隘，并且广告商和出版商有很多替代选择。然而，证据并不支持这一说法。谷歌误导性地声称有“数百个竞争对手。” 虽然存在许多广告技术提供商，但谷歌在…...

编程日记 2024/9/11 12:42:41

重生奇迹MU 沉迷升级的快感法魔升级机器人

重生奇迹MU是一款以升级为主要玩法的游戏。升级是游戏基础，也是最重要的部分。通过升级，玩家可以获得更多的基础属性奖励和自由点数奖励，同时还能够穿戴最好的装备和翅膀。因此，升级在游戏中具有极其重要的地位。史上升级最快的…...

编程日记 2024/9/11 12:41:40

从地图到智能地图：空间索引技术如何改变我们的世界

图源：WL 为什么空间索引很有用? 在处理地理空间数据时，空间索引是一个至关重要的功能，它决定了我们如何高效地从海量的地理数据中检索出所需的信息。想象一下，如果你正在处理一个包含数千万乃至数亿条记录的数据库，…...

编程日记 2024/9/11 12:40:39

深入理解AI Agent架构，史上最全解析！赶紧码住！

AI Agent框架（LLM Agent）：LLM驱动的智能体如何引领行业变革，应用探索与未来展望 1. AI Agent（LLM Agent）介绍 1.1. 术语 Agent：“代理” 通常是指有意行动的表现。在哲学领域，Agen…...

编程日记 2024/9/11 12:37:36

苹果iOS/ iPadOS18 RC 版、17.7 RC版更新发布

iPhone 16 / Pro 系列新机发布后，苹果一同推出了 iOS 18 和 iPadOS 18 的 RC 版本，iOS 18 RC 的内部版本号为22A3354，本次更新距离上次发布 Beta/RC 间隔 12 天。在 iOS 18 中，苹果给我们带来了 Apple Intelligence，这…...

编程日记 2024/9/11 12:36:35

CAN集线器（工业级、隔离式）

型号： MS-HUB-C 概述 MS-HUB 是一款可通过一路 CAN ，一路 RS-232为主口扩展出 7 路 CAN 从口的工业级光电隔离型 CAN 分配器。可以有效的实现 CAN 网络的中继、扩展与隔离。采用先进的自动流控技术自动侦测CAN 信号流向。MS-HUB 具备光电隔离功能&#x…...

编程日记 2024/9/11 12:34:33

代码随想录训练营 Day57打卡图论part07 53. 寻宝（prim，kruskal算法）

代码随想录训练营 Day57打卡图论part07 卡码53. 寻宝题目描述在世界的某个区域，有一些分散的神秘岛屿，每个岛屿上都有一种珍稀的资源或者宝藏。国王打算在这些岛屿上建公路，方便运输。不同岛屿之间，路途距离不同，…...

编程日记 2024/9/11 12:33:32

Hibernate QueryPlanCache 查询计划缓存引发的内存溢出

目录 1.排查方式2.结论3.解决办法前言：在生产环境中有一个后端程序多次报oom然后导致程序中断。 1.排查方式通过下载后端程序产生的oom文件，将oom文件导入MemoryAnalyzer程序分析程序堆内存使用情况。 1、将oom文件导入MemoryAnalyzer后可以看到概览信…...

编程日记 2024/9/11 12:32:31

前端开发的观察者模式

什么是观察者设计模式观察者模式（Observer Pattern）是前端开发中常用的一种设计模式。它定义了一种一对多的依赖关系，使得当一个对象的状态发生改变时，其所有依赖对象都能收到通知并自动更新。观察者模式广泛应用于事件驱动的系…...

编程日记 2024/9/11 12:31:30

Pycharm 输入三个引号没有自动生成函数(方法)注释

配置项路径：pycharm–>Settins–>Tools–>Python Integrated Tools–>Docstrings–>Docstrings format选择对应的工程，如果有多个工程的话将 Docstrings format 的值从 Plain 换成 reStructuredText...

编程日记 2024/9/11 12:30:29

lammps后处理：多帧孔洞体积和孔隙率的计算

本文介绍lammps后处理技巧：多帧孔洞体积和孔隙率的计算方法。在前面的专栏中，已经介绍了单帧孔洞体积的计算方法，有不少粉丝朋友咨询多帧孔洞体积的计算方法。在上一次案例代码的基础上，稍加修改，添加一个for循环遍历所有的帧即可实现多帧孔洞体积的计算。计算的结果…...

编程日记 2024/9/11 12:29:28

免费且实用：UI设计常用的颜色参考网站和一些Icon设计网站

用心去分享！请给我点个关注和点赞收藏！谢谢各位努力的人才！ 1.在UI设计的时候，没有灵感，怎么办？可以参考这个网站（需要魔法能量） 网址如下： Color Hunt - Color Palette…...

编程日记 2024/9/11 12:28:27

log4j日志封装说明—slf4j对于log4j的日志封装-正确获取调用堆栈

日志是项目中必用的东西，日志产品里最普及应该就是log4j了。(logback这里暂不讨论。) 先看一下常用的log4j的用法，一般来说log4j都会配合slf4j或者common-logging使用，这里已slf4j为例。添加gradle依赖： dependencies { compile(l…...

编程日记 2024/9/11 12:27:26

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致：梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/6/18 19:00:20

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。一、useAsyncError 用途处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/6/18 6:31:56

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。一、遭遇攻击的紧急应…...

编程新知 2025/7/7 12:11:39

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分）《Learning Humanoid Standing-up Control across Diverse Postures》系列文章：论文深度解读 + 算法与代码分析（二）作者机构：上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学论文主题：人形机器人…...

编程新知 2025/6/17 5:29:50

SciencePlots——绘制论文中的图片

文章目录安装一、风格二、1 资源安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源论文绘图神器来了：一行…...

编程新知 2025/7/12 6:45:46

基于服务器使用 apt 安装、配置 Nginx

🧾 一、查看可安装的 Nginx 版本首先，你可以运行以下命令查看可用版本： apt-cache madison nginx-core输出示例： nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/7/8 20:09:11

pam_env.so模块配置解析

在PAM（Pluggable Authentication Modules）配置中， /etc/pam.d/su 文件相关配置含义如下： 配置解析 auth required pam_env.so1. 字段分解字段值说明模块类型auth认证类模块，负责验证用户身份&am…...

编程新知 2025/7/7 3:31:35

【机器视觉】单目测距——运动结构恢复

ps：图是随便找的，为了凑个封面前言在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛&#xf…...

编程新知 2025/7/11 13:40:12

【2025年】解决Burpsuite抓不到https包的问题

环境：windows11 burpsuite:2025.5 在抓取https网站时，burpsuite抓取不到https数据包，只显示： 解决该问题只需如下三个步骤： 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2025/7/11 13:46:02

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中，高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司，近期做出了一个重大技术决策：弃用长期使用的 Nginx，转而采用其内部开发…...

编程新知 2025/7/8 16:00:54

一、选择器

基本选择器

1.标签选择器

2.类选择器

3.id选择器

高级选择器（只说一个id+class组合）

二、美化

1.字体 font

2.文本样式 text

3.超链接伪类

列表 ui li

背景

1.背景颜色 background-color

2.透明度 opacity

3.背景图片 background-image: url("name.jpg")

三、盒子模型

1.元素的显示模式

1.块元素（block）

2.行内元素（inline）

3.行内块元素（inline-block）

2.盒子模型

3.盒子模型（Box Model）组成

1.边框

2.内边距（padding）

3.外边距（margin）

4.处理内容溢出

5.布局小技巧（重点）

6.常用布局练习

四、浮动 float

1.简介

2.元素浮动后的特点

3.解决浮动产生的影响

3.1元素浮动后会有哪些影响

3.2 解决浮动产生的影响（清除浮动）

3.3 浮动小练习

五、定位 position

1.相对定位

1.1 如何设置相对定位？

1.2 相对定位的参考点在哪里？

1.3 相对定位的特点：

2.绝对定位

2.1 如何设置绝对定位？

2.2 绝对定位的参考点在哪里？

2.3 绝对定位元素的特点：

3.固定定位

3.1 如何设置为固定定位？

3.2 固定定位的参考点在哪里？

3.3 固定定位元素的特点

4. 粘性定位

4.1 如何设置为粘性定

4.2 粘性定位的参考点在哪里？

4.3 粘性定位元素的特点

5.定位层级

6. 定位的特殊应用

让定位元素的宽充满包含块

让定位元素在包含块中居中

七、布局

1.版心

2. 常用布局名词

八、伸缩盒模型 （display：flex布局）

1.伸缩容器、伸缩项目

2.主轴与侧轴

3.主轴方向

4.主轴的换行方式

5.flex-flow

6.主轴对齐方式

7.侧轴对齐方式

7.1 一行的情况

7.2 多行的情况

8. flex 实现水平垂直居中

九、H5布局简介

新增布局标签

相关文章：

高级选择器（只说一个`id+class`组合）

1.背景颜色 `background-color`

2.透明度 `opacity`

3.背景图片 `background-image: url("name.jpg")`

八、伸缩盒模型（display：flex布局）