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

CSS之我不会

news 2025/11/10 9:24:19

非常推荐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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...

编程新知 2025/11/9 9:12:25

本示例使用的发卡器：https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/11/7 20:25:41

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

🌟 什么是 MCP？ 模型控制协议 (MCP) 是一种创新的协议，旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议，它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。可以把它想象成你的 AI 模型和想要使用它…...

编程新知 2025/11/7 21:08:24

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现，这取决于你是想在组件内部直接设置，还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法： 1. 内联样式你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/10/6 20:49:11

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上，看到基于小智 AI DIY 玩具的演示，感觉有点意思，想着自己也来试试。如果只是想烧录现成的固件，乐鑫官方除了提供了 Windows 版本的 Flash 下载工具之外，还提供了基于网页版的 ESP LA…...

编程新知 2025/11/8 6:31:39

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式：数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本模型并行：将模型分割到不同设备，每个设备处理部分模型计算现代大模型训练通常结合…...

编程新知 2025/11/4 22:16:08

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定，这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中，积分电荷法最为常用，其原理是通过测量在电容器上积累的热释电电荷，从而确定热释电系数…...

编程新知 2025/11/7 21:04:16

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展扩展入口文件文件目录 crmeb\services\sms\Sms.php 默认驱动类型为：一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

编程新知 2025/10/5 5:38:24

GitHub 趋势日报 (2025年06月06日)

📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2025/9/7 2:12:04

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46

一、选择器

基本选择器

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布局）