CSS学习笔记4——盒子模型

目录

盒子模型是什么？

盒子模型的组成

一、div标签

 二、边框属性

1、border-style:边框样式

2、border-width:边框宽度

3、border-color:边框颜色、border：综合设置

 4、border-radius:圆角边框

 5、border-image：图像边框

三、边距属性 

1、内边距属​编辑

 2、外边距属性

四、宽度属性和高度属性 

 五、box-shadow属性

 六、box-sizing属性

 七、背景属性

1、设置背景颜色（background-color）、设置背景图像（ background-image）、设置背景图像平铺（background-repeat）

 2、设置背景图像的位置（background-position）

3、设置背景图像固定(background-attachment)

4、设置背景颜色与不透明度 

5、设置背景图像的大小(background-size)

6、设置背景的显示区域 (background-position)

 7、设置背景的裁剪区域(background-clip)

8、设置多重背景图像 

​编辑9、背景复合属性 

 

盒子模型是什么？

想象一下，你正在整理你的房间。你有一个衣柜，里面放着你的衣服（内容）。衣柜的内部有一些架子和抽屉，这些空间是专门用来放衣服的（内边距）。衣柜本身有一个外壳，保护着里面的衣服（边框）。而衣柜外面还有一块空地，用来让你在衣柜和其他家具之间移动（外边距）。

在CSS中，每个元素就像这个衣柜。它不仅包含内容，还有围绕内容的空间（内边距）、保护内容的边界（边框）以及与其他元素保持距离的区域（外边距）。这就是所谓的“盒子模型”。

盒子模型的组成

盒子模型由四个部分组成，从内到外分别是：

  1. 内容（Content）：这是盒子的核心部分，就像衣柜里的衣服。它可以是文本、图片或其他任何你想要展示的东西。内容的大小由width和height属性决定。

  2. 内边距（Padding）：这是内容周围的空白区域，就像衣柜内部的架子和抽屉。它用来在内容和边框之间创建空间。内边距的设置通过padding属性实现。

  3. 边框（Border）：这是围绕在内边距外围的边界，就像衣柜的外壳。它用来定义盒子的边界。边框的样式、宽度和颜色可以通过border属性设置。

  4. 外边距（Margin）：这是边框外围的空白区域，就像衣柜外面的空地。它用来控制当前元素与其他元素之间的距离。外边距通过margin属性设置。

 盒子模型是网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好的控制网页中的各个元素。

一、div标签

<!DOCTYPE html>
<!-- 声明文档类型为HTML5 -->
<html>
<!-- 根元素，整个HTML页面的根节点 --><head><!-- 包含文档的元数据，如字符集、标题、样式等 --><meta charset="utf-8" /><!-- 设置文档的字符编码为UTF-8，支持多种语言字符 --><title>盒子模型——div 标签</title><!-- 设置文档的标题，在浏览器标签页显示 --><style type="text/css">/* 定义CSS样式，type="text/css"指明样式表类型为CSS */.one {width: 600px; /* 设置类名为one的元素宽度为600像素 */height: 50px; /* 设置高度为50像素 */background-color: aqua; /* 设置背景颜色为浅青色（aqua） */font-size: 20px; /* 设置字体大小为20像素 */font-weight: bold; /* 设置字体加粗 */text-align: center; /* 设置文本居中对齐 */}.two {width: 600px; /* 设置类名为two的元素宽度为600像素 */height: 100px; /* 设置高度为100像素 */background-color: lime; /* 设置背景颜色为石灰绿（lime） */font-size: 14px; /* 设置字体大小为14像素 */text-indent: 2em; /* 设置首行缩进2个字符宽度（em） */}</style></head><body><!-- 文档的主体，包含所有可见内容 --><div class="one">爱岗敬业，无私奉献</div><!-- 创建一个div元素，应用类one的样式，显示文字 --><div class="two"><!-- 创建另一个div元素，应用类two的样式 --><p>青春在平凡的岗位上发光。</p><!-- 在div内部添加一个段落p元素，显示文字 --></div></body>
</html>

效果展示

 二、边框属性

1、border-style:边框样式

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>盒子模型——div 标签</title><style type="text/css">h2{border-style: double;/*四条边均为双实线*/}.one{border-style: dotted solid;/*上下边为点线，左右边为单实线*/ }.two{border-style: solid dotted dashed;/*上边为实线，左右为点线，下边为虚线*/}</style></head><body><h2>《己亥杂诗》</h2><p class="one">段落一：浩荡离愁白日斜，吟鞭东指即天涯。</p><p class="two">段落二：落红不是无情物，化作春泥更护花。</p></body>
</html>

效果展示

2、border-width:边框宽度

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>盒子模型——div 标签</title><style type="text/css">p{border-style: solid;/*四条边均为单实线*/}.one{border-width: 3px;/*统一宽度*/}.two{border-width: 3px 1px;/*上下3px 左右1px*/}.three{border-width: 3px 1px 2px;/*上3px 左右1px 下2px*/}</style></head><body><p class="one">盼望着，盼望着，东风来了，春天的脚步近了。</p><p class="two">盼望着盼望着，盼望着，东风来了，春天的脚步近了。</p><p class="three">盼望着，盼望着，东风来了，春天的脚步近了。</p></body>

效果展示

3、border-color:边框颜色、border：综合设置

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">h2{border-top: 3px dashed #f00;border-right: 10px double #900;border-bottom: 5px double #F60;border-left: 10px solid green;}</style></head><body><h2>盼望着，盼望着，东风来了，春天的脚步近了。</h2></body>
</html>

效果展示 

 4、border-radius:圆角边框

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">img{border:8px solid #75406a;border-radius: 60px/40px ;}</style></head><body><img src="img/tupian1.jpg"/></body>
</html>

原图 

效果展示

 5、border-image：图像边框

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">p{width: 362px;height: 362px;border-style: solid;border-image-source: url(img/4.png);border-image-slice: 33%;/*切割后四角的图像变为边框的四角，每边中间切割图像作为每边的填充图像在每边的中间位置会有一个玩症的切割填充图像对称填充，中间填充后的边（去除四角）是完全对称的*/border-image-width: 40px;/*决定图像的显示大小，不会影响填充效果*/border-image-outset: 0;border-image-repeat: stretch;outline: red 3px solid;}</style></head><body><p></p></body>
</html>

效果展示

 

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">p{width: 362px;height: 362px;border-style: solid;border-image-source: url(img/4.png);border-image-slice: 20% fill;/*切割后四角的图像变为边框的四角，每边中间切割图像作为每边的填充图像在每边的中间位置会有一个玩症的切割填充图像对称填充，中间填充后的边（去除四角）是完全对称的*/border-image-width: 40px;/*决定图像的显示大小，不会影响填充效果*/border-image-outset: 0;border-image-repeat: stretch;outline: red 3px solid;}</style></head><body><p></p></body>
</html>

 效果展示（使用fill,会保存切割后的中间部分）

三、边距属性 

1、内边距属

注意： 内边距属性的百分比数值是相对于父元素宽度的百分比，内边距随父元素宽度的变化而变化，与高度无关

用通俗易懂的语言解释一下父元素宽度的概念。

想象一下，你有一个大的箱子（父元素），你往里面放一些小盒子（子元素）。大箱子的宽度就是“父元素宽度”，它决定了里面的小盒子最多能占据多大的空间。如果大箱子很宽（固定宽度，比如300px），小盒子们就不能超过这个宽度。如果大箱子的宽度是相对的（比如占屏幕宽度的50%），那么小盒子们的可用空间就会随着屏幕大小变化。

简单来说，父元素宽度就是包含子元素的“容器”的宽度，它决定了子元素能使用的最大水平空间。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">.border{border: 5px solid #ccc;}img{padding: 80px;padding-bottom: 0;}p{padding: 5%;/*段落内边距为父元素的5%*/}</style></head><body><img src="img/padding_in.png" alt="内边距" class="border"/><p class="border">段落内边距为父元素宽度的%5。</p></body>
</html>

效果展示

 2、外边距属性

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">img{border: 5px solid red;float: left;/* 设置图像左浮动 */margin-right: 50px ;margin-left:30px ;/* 上面两行代码等价于margin :0 50px 0 30px */p{text-indent: 2em;}}</style></head><body><img src="img/tupian2.png" alt="敬业" /><p>爱岗敬业、无私奉献，让青春在平凡的岗位上闪光，这是对每个人在各自岗位上工作的基本需求，这也是“帅”</p></body>
</html>

效果展示

四、宽度属性和高度属性 

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">.box{width: 450px;height: 120px;/* 设置段落的宽度，高度 */border: 8px solid #00f;/* 设置段落的边框 */}</style></head><body><p class="box">爱岗敬业、无私奉献，让青春在平凡的岗位上闪光，这是对每个人在各自岗位上工作的基本需求，这也是“帅”</p></body>
</html>

效果展示

 五、box-shadow属性

可以改变阴影的投射方向以及添加多重阴影效果，与text-shadow类似 

概念详解：

模糊半径：

模糊半径就像是给阴影加上一层“朦胧感”。想象一下，你在看一个物体的影子，如果影子边缘很清晰，就像用硬笔画的一样，没有模糊感。但如果影子边缘有点模糊，就像被雾气笼罩了一样，这就是模糊半径的作用。

  • 值越大：阴影越模糊，就像雾气更浓一样。

  • 值为0：阴影边缘清晰，没有模糊效果。

  • 单位：像素（px）。

扩展半径：

扩展半径可以想象成把阴影“放大”或“缩小”。如果你增加扩展半径，阴影会向外扩展，变得更大；如果你减少扩展半径，阴影会向内收缩，变得更小。

  • 正值：阴影向外扩展，变得更大。

  • 负值：阴影向内收缩，变得更小。

  • 单位：像素（px）。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">img{padding: 20px ;border-radius: 10%;border: 5px solid  red;box-shadow: 5px 5px 15px 2px green inset;/* box-shadow: 水平偏移 垂直偏移 模糊半径 扩展半径 颜色; */}</style> </head><body><img class="border" src="img/tupian3.png" alt="爱岗敬业" /></body>
</html>

原图

效果展示 

 六、box-sizing属性

box-sizing属性用于控制CSS中元素的盒模型尺寸计算方式，它决定了元素的宽度和高度是否包含内边距（padding）和边框（border）。这个属性主要有两个常用的取值：content-box和border-box。

content-box（默认值）

在content-box模式下，元素的宽度和高度仅指内容区域的尺寸，不包括内边距和边框。这意味着，当你设置一个元素的宽度时，实际占用的空间将是宽度加上内边距和边框的总和。例如，如果一个元素的宽度设置为200px，内边距为20px，边框为10px，那么它的总宽度将是200px + 20px + 20px + 10px + 10px = 260px。

border-box

在border-box模式下，元素的宽度和高度包括内容、内边距和边框的总尺寸。这意味着，当你设置一个元素的宽度为200px时，这个宽度将包括内容、内边距和边框。如果内边距为20px，边框为10px，那么内容区域的实际宽度将是200px - 20px - 20px - 10px - 10px = 140px

同样条件下：content- box内容区域更大

注意：box-sizing 属性只作用与、于边框属性border和内边距属性 

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">.a{width: 300px;height: 100px;padding-right: 10px;margin-right: 10px;background: #f90;border: 10px solid #ccc;box-sizing: content-box;}.b{width: 300px;height: 100px;padding-right: 10px;margin-right: 10px;background: #f90;border: 10px solid #ccc;box-sizing: border-box;}</style> </head><body><div class="a">content-box属性值</div><div class="b">border-box属性值</div></body>
</html>

效果展示 

 七、背景属性

1、设置背景颜色（background-color）、设置背景图像（ background-image）、设置背景图像平铺（background-repeat）

注意：当背景图像和背景颜色同时存在时，背景图像优先显示 

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">body{background-color: #ccc;}h2{font-family: "微软雅黑";color: #fff;background-color: #36c;}</style> </head><body><h2>热爱工作，具有奉献精神</h2><p>奉献就像是蒲公英的种子，落到哪里就在哪里生根、成长。</p></body>
</html>

效果展示 

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">body{background-color: #ccc;background-image: url(img/bg.png);}h2{font-family: "微软雅黑";color: #fff;background-color: #36c;}</style> </head><body><h2>热爱工作，具有奉献精神</h2><p>奉献就像是蒲公英的种子，落到哪里就在哪里生根、成长。</p></body>
</html>

 效果展示

 在body属性中加入background-repeat:repeat-x;效果如下

 2、设置背景图像的位置（background-position）

（1）背景图像默认位置：左上

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">body{background-image: url(img/ai.png);background-repeat: no-repeat;				}</style> </head><body><h2>热爱工作，具有奉献精神</h2><pre>爱岗敬业是社会运转的基石，更是个人价值的彰显。教师以 “三心” 为动力，扎根讲台雕琢灵魂；医护人员在生死线上执着坚守，用仁心诠释职责；基层工作者走街串巷排忧解难，将服务化作无声的承诺。他们以专业为舟，以热忱为桨，在平凡岗位上书写不平凡的坚守。这种精神，既是对职业的敬畏，更是对生命的礼赞。当每个岗位都闪耀责任之光，社会便会汇聚成温暖前行的洪流。</pre> </body>
</html>

效果展示

 若body属性中添加background-position:50px 80px;                                   

效果展示

若 body属性中添加background-position:center;  

3、设置背景图像固定(background-attachment)

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">body {background-image: url(img/ai.png);background-repeat: no-repeat;background-position: 50px 80px;background-attachment: fixed;margin: 0;padding: 0;}</style> 
</head>
<body><h2>热爱工作，具有奉献精神</h2><p>爱岗敬业是社会运转的基石，更是个人价值的彰显。教师以“三心”为动力，扎根讲台雕琢灵魂；医护人员在生死线上执着坚守，用仁心诠释职责；基层工作者走街串巷排忧解难，将服务化作无声的承诺。他们以专业为舟，以热忱为桨，在平凡岗位上书写不平凡的坚守。这种精神，既是对职业的敬畏，更是对生命的礼赞。</p><p>当每个岗位都闪耀责任之光，社会便会汇聚成温暖前行的洪流。</p><p>在平凡的岗位上，每个人都可以成为不平凡的存在。无论是教师、医护人员，还是基层工作者，他们都用自己的方式为社会贡献着力量。</p><p>教师以知识为灯塔，照亮学生前行的道路；医护人员以生命守护生命，带来希望与温暖；基层工作者则以细致入微的服务，解决群众的每一个难题。</p><p>这些平凡而伟大的人们，用他们的行动诠释着奉献的真谛。他们的故事，如同点点星光，照亮了我们前行的道路。</p><p>让我们向这些默默奉献的英雄们致敬，学习他们的精神，在自己的岗位上发光发热，共同创造更加美好的未来。</p>
</body>
</html>

效果展示 （fixed 的固定作用 ）

滑动前

滑动后 

4、设置背景颜色与不透明度 

详细介绍：RGB和RGBA：你知道什么是RGB和RGBA吗❓-CSDN博客

RGBA颜色模式和opacity属性

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">#boxwrap{width: 330px;margin: 10px auto;border: solid 1px #f66;}/* 这是一个宽度为330像素，带有橙红色边框的盒子。 */img:first-child{opacity: 1;}img:nth-child(2){opacity: 0.8;}img:nth-child(3){opacity: 0.5;}img:nth-child(4){opacity: 0.2;}</style> 
</head>
<body><div id="boxwrap"><img src="img/hong.png" width="160"><img src="img/hong.png" width="160"><img src="img/hong.png" width="160"><img src="img/hong.png" width="160"></div>
</body>
</html>

效果展示

5、设置背景图像的大小(background-size)

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">div{width: 300px;height: 300px;border: 3px solid #fcc;margin: 0 auto;background-color: #fcc;background-image: url(img/hong.png);background-repeat: no-repeat;background-position: center center; }</style> 
</head>
<body><div id="boxwrap">300px的盒子。</div>
</body>
</html>

 效果展示

未设置背景图像大小前

设置背景图像大小后 

在div样式设置中加入background-size 100px 200px;

6、设置背景的显示区域 (background-position)

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">p{width: 300px;height: 200px;border: 8px solid #fcc;padding: 40px;background-image: url(img/jiangzhang.png);background-repeat: no-repeat;}</style> 
</head>
<body><p>"但行好事，莫问前程" 是镌刻在文明基因里的生命密码。它是敦煌壁画中飞天托举的莲花，是苏州园林曲径尽头的活水，更是中国人血脉中 "为往圣继绝学" 的精神胎记。当我们把每个当下的选择都化作向善的涟漪，时光自会在某个转角，把散落的珍珠串成命运的项链。</p>
</body>
</html>

 效果展示

默认相对位置

使用background-origin属性改变相对位置后

在p的样式设置中加入background-origin:content-box;/*背景图像相对于内容边界定位*/ 

 7、设置背景的裁剪区域(background-clip)

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">p{width: 300px;height: 150px;border: 8px dotted #666;padding: 40px;background-color:rgba(255,0,0,0.1);background-repeat: no-repeat;}</style> 
</head>
<body><p>"但行好事，莫问前程" 是镌刻在文明基因里的生命密码。它是敦煌壁画中飞天托举的莲花，是苏州园林曲径尽头的活水，更是中国人血脉中 "为往圣继绝学" 的精神胎记。当我们把每个当下的选择都化作向善的涟漪，时光自会在某个转角，把散落的珍珠串成命运的项链。</p>
</body>
</html>

 效果展示

默认背景剪裁

 设置内容区域剪裁

在p的样式设置中加入background-clip: content-box;
            /* 从内容区域向外剪裁 */

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">p{width: 300px;height: 150px;border: 8px dotted #666;padding: 40px;background-color:rgba(255,0,0,0.1);background-repeat: no-repeat;background-clip: content-box;/* 从内容区域向外剪裁 */}</style> 
</head>
<body><p>"但行好事，莫问前程" 是镌刻在文明基因里的生命密码。它是敦煌壁画中飞天托举的莲花，是苏州园林曲径尽头的活水，更是中国人血脉中 "为往圣继绝学" 的精神胎记。当我们把每个当下的选择都化作向善的涟漪，时光自会在某个转角，把散落的珍珠串成命运的项链。</p>
</body>
</html>

8、设置多重背景图像 

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">p{width: 300px;height: 300px;border: 1px dotted #666;background-color:rgba(255,0,0,0.1);background-image: url(img/dog.png),url(img/bg1.png),url(img/bg2.png);/* 从内容区域向外剪裁 */}</style> 
</head>
<body><p>"但行好事，莫问前程" 是镌刻在文明基因里的生命密码。</p>
</body>
</html>

未组合前的图片 

 

效果展示

9、背景复合属性 

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">p{width: 200px;height: 200px;border: 5px dashed #b5ffff;padding: 25px;background: #b5ffff url(img/caodi.png) no-repeat left bottom padding-box;/* 设置一个浅蓝色的背景，并在左下角显示一张背景图片，图片不重复显示，且背景的填充区域限制在内边距范围内。 */}</style> 
</head>
<body><p>"但行好事，莫问前程" 是镌刻在文明基因里的生命密码。</p>
</body>
</html>

 效果展示

 

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

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

相关文章

复现文献中的三维重建图像生成，包括训练、推理和可视化

复现文献中的三维重建图像生成，包括训练、推理和可视化

要复现《One - 2 - 3 - 45 Fast Single Image to 3D Objects with Consistent Multi - View Generation and 3D Diffusion (CVPR)2024》文献中的三维重建图像生成&#xff0c;包括训练、推理和可视化&#xff0c;并且确保代码能正常运行&#xff0c;下面是基本的实现步骤和示例…
阅读更多...
stable diffusion 本地部署教程 2025最新版

stable diffusion 本地部署教程 2025最新版

前提&#xff1a; 需要环境 git git下载地址Git - Downloading Package ​ 直接装即可 python3.10.6 下载地址 Python Release Python 3.10.6 | Python.org ​ 记得python环境一定要3.10.6&#xff01;&#xff01;&#xff01; 第一个版本 项目地址https://github.…
阅读更多...
【二刷代码随想录】螺旋矩阵求解方法、推荐习题

【二刷代码随想录】螺旋矩阵求解方法、推荐习题

一、求解方法 &#xff08;1&#xff09;按点模拟路径 在原有坐标的基准上&#xff0c;叠加 横纵坐标 的变化值&#xff0c;求出下一位置&#xff0c;并按题完成要求。但需注意转角的时机判断&#xff0c;特别是最后即将返回上一出发点的位置。 &#xff08;2&#xff09;按层…
阅读更多...
从Manus到OpenManus：AI智能体技术如何重塑未来生活场景？

从Manus到OpenManus：AI智能体技术如何重塑未来生活场景？

从Manus到OpenManus&#xff1a;AI智能体技术如何重塑未来生活场景&#xff1f; 一、现状&#xff1a;AI智能体技术面临的三大核心矛盾 &#xff08;通过分析用户高频痛点与市场反馈提炼&#xff09; 能力与门槛的失衡 Manus展示的复杂任务处理能力&#xff08;如股票分析、代…
阅读更多...
迭代器与可迭代对象

迭代器与可迭代对象

概念层面&#xff1a; 可迭代对象&#xff1a; 一个可迭代对象是指任何可以返回一个迭代器的对象。换句话说&#xff0c;它实现了 __iter__() 方法 比如&#xff1a;列表、元组、字典、字符串、集合等 直接通过 for 循环使用&#xff0c;因为 for 循环内部会调用其 __iter__(…
阅读更多...
总结PostgreSQL创建数据库失败的解决办法

总结PostgreSQL创建数据库失败的解决办法

作者&#xff1a;朱金灿 来源&#xff1a;clever101的专栏 系统环境是Windows 11 专业版&#xff0c;PostgreSQL版本是17。在运行sql语句创建数据库时出现错误&#xff1a; 閿欒: template database \"template1\" has a collation version mismatch DETAIL: Th…
阅读更多...
Mybatis源码 插件机制

Mybatis源码 插件机制

简介 插件是一种常见的扩展方式&#xff0c;大多数开源框架也都支持用户通过添加自定义插件的方式来扩展或者改变原有的功能&#xff0c;MyBatis中也提供的有插件&#xff0c;虽然叫插件&#xff0c;但是实际上是通过拦截器(Interceptor)实现的&#xff0c;在MyBatis的插件模块…
阅读更多...
Android14 SystemUI中添加第三方AIDL

Android14 SystemUI中添加第三方AIDL

由于特殊需求&#xff0c;需要在SystemUI中添加第三方AIDL&#xff0c;去做一些客制化的修改。现在记录一下AIDL添加的过程。 1.将AIDL文件拷贝到frameworks/base/packages/SystemUI/src/下&#xff0c;我要添加的AIDL文件是com/test/myctr/IDevicectr.aidl&#xff0c;添加后的…
阅读更多...
Binlog、Redo log、Undo log的区别

Binlog、Redo log、Undo log的区别

一、binlog和redo log的区别 特性binlogredo log记录对象记录的是 MySQL 服务器的事务操作&#xff0c;针对的是整个数据库实例。记录的是 InnoDB 存储引擎的数据页变化&#xff0c;针对的是具体的存储引擎层面。记录内容记录的是事务的逻辑操作&#xff0c;例如 SQL 语句&…
阅读更多...
TDengine 中的异常恢复

TDengine 中的异常恢复

简介 本章主要介绍在 TDengine 执行命令过程中发生异常&#xff0c;如何手工终于执行的任务。可以终止连接&#xff0c;线上查询及终止事务。 如果一个事务 在一个复杂的应用场景中&#xff0c;连接和查询任务等有可能进入一种错误状态或者耗时过长迟迟无法结束&#xff0c;…
阅读更多...
全球化2.0 | ZStack举办香港Partner Day，推动AIOS智塔+DeepSeek海外实践

全球化2.0 | ZStack举办香港Partner Day，推动AIOS智塔+DeepSeek海外实践

2025年3月21日&#xff0c;云轴科技ZStack在香港成功举办了主题为“ZStack AIOS 智塔与 DeepSeek 私有化方案介绍及企业应用落地实践”的 Partner Day 活动。此次活动吸引了众多海外合作伙伴&#xff0c;共同探讨 AI Infra 平台在企业私有化 AI 中的应用与价值闭环。 ZStack CT…
阅读更多...
ERP、MES和CRM三大企业系统的详细介绍及对比分析

ERP、MES和CRM三大企业系统的详细介绍及对比分析

以下是关于ERP、MES和CRM三大企业系统的详细介绍及对比分析&#xff1a; 1. ERP&#xff08;企业资源计划&#xff0c;Enterprise Resource Planning&#xff09; 核心功能&#xff1a; 集成管理&#xff1a;财务、采购、库存、生产、人力资源等核心业务流程资源优化&#xf…
阅读更多...
（二十）Dart 中的多态

（二十）Dart 中的多态

Dart 中的多态教程 一、多态的概念 多态是面向对象编程中的一个重要概念。它允许将子类类型的指针赋值给父类类型的指针&#xff0c;同一个函数调用会有不同的执行效果。换句话说&#xff0c;子类的实例可以赋值给父类的引用。多态的核心在于父类定义一个方法不去实现&#x…
阅读更多...
【C++初阶】第12课—list

【C++初阶】第12课—list

文章目录 1. list的构造2. list迭代器的常见接口2.1 list遍历的迭代器接口2.2 list修改数据的迭代器接口2.3 list排序、逆序、合并相关操作的成员函数 3. 模拟实现list3.1 模拟实现list的构造3.2 模拟实现list的尾插3.3 模拟实现迭代器iterator3.4 模拟实现list的插入删除3.5 模…
阅读更多...
思维链技术(Chain-of-Thought, CoT)

思维链技术(Chain-of-Thought, CoT)

思维链&#xff08;Chain-of-Thought, CoT&#xff09;是一种通过模拟人类逐步推理过程来提升大型语言模型&#xff08;LLM&#xff09;复杂任务表现的技术。其核心思想是让模型在生成最终答案前&#xff0c;先输出中间推理步骤&#xff0c;从而增强逻辑性和可解释性。 1. 基础…
阅读更多...
谷粒微服务高级篇学习笔记整理---异步线程池

谷粒微服务高级篇学习笔记整理---异步线程池

多线程回顾 多线程实现的4种方式 1. 继承 Thread 类 通过继承 Thread 类并重写 run() 方法实现多线程。 public class MyThread extends Thread {Overridepublic void run() {System.out.println("线程运行: " Thread.currentThread().getName());} }// 使用 pub…
阅读更多...
Windows学习笔记（4）关于MITRE

Windows学习笔记（4）关于MITRE

基本术语 APT&#xff08;威胁组&#xff0c;高级持续威胁&#xff09; TTP&#xff08;攻击目的技术过程&#xff0c;战术技术和程序&#xff09; ATT&CK框架 网站 https://attack.mitre.org/ CAR知识库 MITRE Engage MITRE D3FEND 网址 https://d3fend.mitre.org/
阅读更多...
Go 语言规范学习（2）

Go 语言规范学习（2）

文章目录 VariablesTypesBoolean typesNumeric typesString typesArray typesSlice typesStruct typesPointer typesFunction typesInterface typesBasic interfacesEmbedded interfacesGeneral interfaces【泛型接口】Implementing an interface【实现一个接口】 Map typesCha…
阅读更多...
创意 Python 爱心代码分享

创意 Python 爱心代码分享

创意 Python 爱心代码分享 在编程中&#xff0c;用代码表达创意和情感是一种非常有趣的方式。本文将分享几段用 Python 编写的爱心代码&#xff0c;涵盖简单到复杂的实现方式&#xff0c;适合初学者和进阶开发者。 1. 简单爱心图案 代码实现 print("\n".join([&qu…
阅读更多...
NLP高频面试题（二十四）——RAG相关内容简介

NLP高频面试题（二十四）——RAG相关内容简介

检索增强生成&#xff08;Retrieval-Augmented Generation&#xff0c;简称 RAG&#xff09;是一种将信息检索与生成模型相结合的技术&#xff0c;旨在提升大型语言模型的响应准确性、相关性和时效性。通过在生成过程中引入外部知识&#xff0c;RAG 能够有效弥补 LLM 在知识局限…
阅读更多...
最新文章

Copyright @ 2022~2023