从 HTML 到 CSS：开启网页样式之旅（五）—— CSS盒子模型
从 HTML 到 CSS：开启网页样式之旅（五）—— CSS盒子模型
- 前言
- 一、盒子模型的组成
- margin（外边距）：
- border（边框）：
- padding（内边距）：
- content（内容）：
- 二、盒子内容区（content）
- 关于默认宽度
- 三、盒子内边距（padding）
- 四、盒子边框（border）
- 五、盒子外边距（margin）
- 1.margin 属性设置
- 2.margin 注意事项：
- 3.margin 塌陷问题：
- 4.margin 合并问题：
- 六、处理内容溢出
- 1. overflow属性介绍
- 2.visible（默认值）
- 3.hidden
- 4.scroll
- 5.auto
- 6.overflow-x和overflow-y属性
- 七、隐藏元素的方式
- 1.display: none;
- 2.visibility: hidden;
- 3.opacity: 0;
前言
- 在之前的博客中，我们深入了解了 CSS 的长度单位与元素的各种显示模式，这些知识对于我们构建网页样式起到了重要的铺垫作用。
- 而今天，我们要进一步探索CSS 盒子模型，它可是 CSS 布局的核心概念之一，掌握了它，就能更加精准地控制网页元素的呈现效果
一、盒子模型的组成
- CSS 会把所有的 HTML 元素都看成一个盒子， 所有的样式也都是基于这个盒子来设置的。这个盒子主要由以下几个部分组成：
margin（外边距）：
它表示盒子与外界的距离呢。需要注意的是，margin 不会影响盒子本身的大小，但会对盒子的位置产生影响。
- 用法
.box {margin: 20px;}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> Margin Example </title><style>.box1 {background-color: lightblue;margin: 20px;}.box2 {background-color: lightgreen;margin: 10px;}</style>
</head><body><div class="box1">这是第一个盒子，设置了20px的外边距，你可以看到它与页面边缘以及其他元素之间有一定的间隔。</div><div class="box2">这是第二个盒子，设置了10px的外边距，和第一个盒子相比，它与周围的间隔会有所不同。</div>
</body></html>
border（边框）：
就是盒子的边框，通过相关属性可以设置边框的风格、宽度和颜色等。
.box {border-style: solid;border-width: 3px;border-color: black;}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> Border Example </title><style>.box {border-style: solid;border-width: 3px;border-color: black;background-color: lightyellow;padding: 10px;width: 200px;height: 150px;}</style>
</head><body><div class="box">这里是盒子里面的内容哦，通过设置边框的样式、宽度和颜色，让盒子有了一个明显的边界呢。</div>
</body></html>
padding（内边距）：
这是紧贴着内容的补白区域，能让内容和边框之间有一定的间隔。
用法
.box {padding: 15px;}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> Padding Example </title><style>.box {background-color: lightcoral;padding: 15px;border: 1px solid gray;}</style>
</head><body><div class="box">这里是盒子里面的内容哦，通过设置15px的内边距，你可以看到内容与边框之间有了一定的间隔呢，让整个盒子看起来更加美观和清晰啦。</div>
</body></html>
content（内容）：
元素中的文本或者后代元素等都属于它的内容。
盒子的大小计算公式是：
- 盒子的大小 = content + 左右 padding + 左右 border
外边距margin 不会影响盒子的大小，但会影响盒子的位置
二、盒子内容区（content）
在设置内容区的时候，我们有以下这些常用的 CSS 属性：
| 下面来详细讲解一下各部分 |
- width：
用来设置内容区域的宽度，属性值是长度。
- max-width：
可以设置内容区域的最大宽度，同样是长度值。不过要注意，一般它不与 width 一起使用。
- min-width：
这个属性是设置内容区域的最小宽度的，也是长度值，同样通常不与 width 一起用。
- height：
用于设置内容区域的高度，属性值为长度。
- max-height：
设置内容区域的最大高度，是长度值，一般不与 height 一起使用。
- min-height：
设置内容区域的最小高度，也是长度值，通常不与 height 一起使用
关于默认宽度
当我们不设置 width 属性时，元素会呈现出默认宽度。这里有两个关于默认宽度的公式：
- 总宽度 = 父的 content — 自身的左右 margin 。
- 内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右 padding 。
三、盒子内边距（padding）
- padding 是个复合属性它的使用规则如下：
- padding: 10px; 这种情况下，四个方向的内边距都是 10px
- padding: 10px 20px; 此时是上 10px，左右 20px（也就是上下、左右的设置方式）
- padding: 10px 20px 30px; 这里就是上 10px，左右 20px，下 30px（上、左右、下的设置顺序）
- padding: 10px 20px 30px 40px; 那就是上 10px，右 20px，下 30px，左 40px（上、右、下、左的设置顺序）
| 这里还有几个注意点 |
- padding 的值是不能为负数的哟。
- 对于行内元素来说，上下内边距不能完美地设置
- 块级元素、四个方向的内边距都可以完美设置
四、盒子边框（border）
- 边框相关的属性有 20 个之多
- 像 border-style、border-width、border-color 其实也是复合属性
五、盒子外边距（margin）
1.margin 属性设置
- margin-left：设置左外边距，属性值是 CSS 中的长度值。
- margin-right：设置右外边距，也是 CSS 中的长度值。
- margin-top：设置上外边距，同样是长度值。
- margin-bottom：设置下外边距，还是长度值。
- margin：这是个复合属性，可以写 1~4 个值，规律和 padding 是一样的（顺时针方向），属性值也是 CSS 中的长度值呢
例子
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Margin Example</title><style>/* 第一个盒子，设置不同方向的外边距 */.box1 {background-color: lightblue;width: 200px;height: 150px;margin-left: 30px;margin-right: 20px;margin-top: 15px;margin-bottom: 10px;}/* 第二个盒子，使用复合属性margin设置外边距 */.box2 {background-color: lightgreen;width: 150px;height: 120px;margin: 10px 20px 15px 25px; /* 顺时针方向：上 右 下 左 */}/* 第三个盒子，使用复合属性margin设置外边距，只写两个值 */.box3 {background-color: lightcoral;width: 180px;height: 130px;margin: 12px 18px; /* 上下为12px，左右为18px */}/* 第四个盒子，使用复合属性margin设置外边距，只写一个值 */.box4 {background-color: lightyellow;width: 160px;height: 140px;margin: 20px; /* 四个方向的外边距都为20px */}</style>
</head><body><div class="box1">这是第一个盒子，通过分别设置margin-left、margin-right、margin-top和margin-bottom来控制外边距哦。</div><div class="box2">这是第二个盒子，使用复合属性margin设置外边距，这里按照顺时针方向分别设置了上、右、下、左的外边距哦。</div><div class="box3">这是第三个盒子，使用复合属性margin设置外边距，只写了两个值，分别对应上下和左右的外边距哦。</div><div class="box4">这是第四个盒子，使用复合属性margin设置外边距，只写了一个值，四个方向的外边距都设置为相同的值哦。</div>
</body></html>
2.margin 注意事项：
- 子元素的 margin，是参考父元素的 content 来计算的，因为是在父亲的 content 中承装着子元素。
- 上 margin、左 margin 会影响自己的位置；
- 下 margin、右 margin 则会影响后面兄弟元素的位置。
- 块级元素、行内块元素都能完美地设置四个方向的 margin；
- 但行内元素就有点特别，左右margin 可以完美设置，上下 margin 设置可就无效。
- margin 的值还可以是 auto ，如果给一个块级元素设置左右 margin 都为 auto，那这个块级元素就会在父元素中水平居中。
- margin 的值是可以为负值
3.margin 塌陷问题：
什么是 margin 塌陷？就是第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 也会作用在父元素上
- 例如
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 父元素样式 */.parent {width: 300px;height: 300px;background-color: lightblue;/* 为了更明显看出效果，给父元素添加边框 */border: 1px solid black;}/* 子元素样式 */.child {width: 200px;height: 100px;background-color: pink;margin-top: 50px;margin-bottom: 30px;}</style><title>Margin塌陷示例</title>
</head><body><div class="parent"><div class="child"></div></div>
</body></html>
按照正常理解，如果没有 margin 塌陷问题，父元素应该保持自身的高度 300px 不变，子元素在父元素内部根据设置的 margin 来调整位置。但实际上，由于 margin 塌陷现象，你会发现父元素的上边框和子元素的上边缘之间的距离并不是设置的 50px（而是子元素的上 margin 作用到了父元素上，使得父元素的上边框和子元素上边缘重合了），同样，父元素的下边框和子元素的下边缘之间的距离也不是设置的 30px（子元素的下 margin 也作用到了父元素上）
那怎么解决这个问题？
有以下几种方案
- 方案一：给父元素设置不为 0 的 padding 。
- 方案二：给父元素设置宽度不为 0 的 border 。
- 方案三：给父元素设置 css 样式 overflow:hidden
4.margin 合并问题：
什么是 margin 合并？
就是上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。
- 怎么解决这个问题呢？其实呀，在布局的时候上下的兄弟元素，只给一个设置上下外边距就可以啦，无需特别去解决。
六、处理内容溢出
- 当内容超出盒子的范围时，我们可以通过 overflow 相关属性来处理
| 下面来详细降解一下各部分 |
1. overflow属性介绍
2.visible（默认值）
内容会溢出元素框并且可见，超出部分会直接显示在盒子外面
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Overflow Visible Example</title><style>.box {width: 200px;height: 150px;border: 1px solid black;overflow: visible;}</style>
</head><body><div class="box">这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的语文内容，用来测试当overflow设置为visible时的效果，你会发现文字会超出盒子的边界直接显示出来哦。</div>
</body></html>
3.hidden
内容超出盒子范围的部分会被隐藏，不会显示在页面上
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Overflow Hidden Example</title><style>.box {width: 200px;height: 150px;border: 1px solid black;overflow: hidden;}</style>
</head><body><div class="box">同样是一段很长很长的文字内容，这次overflow设置为hidden，你会看到超出盒子范围的文字部分都被隐藏起来啦，看不到咯。</div>
</body></html>
4.scroll
无论内容是否超出盒子范围，都会显示滚动条，用户可以通过滚动条来查看全部内容
5.auto
当内容超出盒子范围时，会自动显示滚动条；如果内容没有超出，则不会显示滚动条
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"="width=device-width, initial-scale=1.0"><title>Overflow Auto Example</title><style>.box {width: 200px;height: 150px;border: 1px solid black;overflow: auto;}</style>
</head><body><div class="box">这里的文字内容长度适中，当overflow设置为auto时，如果文字没有超出盒子范围，就不会有滚动条；但如果把文字内容改得很长很长，超出盒子了，就会自动出现滚动条哦。</div>
</body></html>
6.overflow-x和overflow-y属性
除了overflow属性外，我们还可以分别对水平方向和垂直方向的内容溢出进行单独设置，这就用到了overflow-x和overflow-y属性。它们的取值和overflow属性类似，例如
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"="width=device-width, initial-scale=1.0"><title>Overflow X and Y Example</title><style>.box {width: 200px;height: 150px;border: 1px solid black;overflow-x: scroll; /* 水平方向设置为滚动条显示方式 */overflow-y: hidden; /* 垂直方向设置为隐藏超出部分 */}</style>
</head><body><div class="box">这里是一些内容，其中包含了比较长的文字以及可能会超出盒子宽度的图片等元素哦。通过设置overflow-x和overflow-y，你可以看到水平方向有滚动条可查看超出部分，而垂直方向超出的部分则被隐藏起来啦。</div>
</body></html>
七、隐藏元素的方式
在网页设计中，有时候我们需要根据特定的条件隐藏某些元素。以下是几种常见的隐藏元素的方式
1.display: none;
当我们给一个元素设置display: none;时，该元素及其所有内容都会从页面布局中完全移除，就好像这个元素从来不存在一样。它不会占据任何空间，其他元素会自动填补它原本所在的位置。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"="width=device-width, initial-scale=1.0"><title>Display None Example</title><style>.hidden-element {display: none;}</style>
</head><body><div class="visible-element">这是一个可见的元素哦，你可以看到我正常显示在这里呢。</div><div class="hidden-element">我是被设置为display:none的元素，现在你看不到我啦，而且我原本占的地方也被其他元素占了哦。</div><div class="visible-element">这又是一个可见的元素哦，我在被隐藏元素的后面呢，已经填补了它原本的位置啦。</div>
</body></html>
2.visibility: hidden;
与display: none;不同的是，当设置visibility: hidden;时，元素虽然在页面上不可见了，但它仍然占据着原来的空间位置，其他元素不会填补它的位置。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"="width=device-width, initial-scale=1.0"><title>Visibility Hidden Example</title><style>.invisible-element {visibility: hidden;}</style>
</head><body><div class="visible-element">这是一个可见的元素哦，你可以看到我正常显示在这里呢。</div><div class="invisible-element">我是被设置为visibility:hidden的元素，现在你看不到我啦，但我还占着我原来的地方哦，其他元素可没法填补我的位置呢。</div><div class="visible-element">这又是一个可见的元素哦，我在被隐藏元素的后面呢，它占着位置，我就只能在这儿啦。</div>
</body></html>
3.opacity: 0;
设置opacity: 0;会使元素完全透明，从而在视觉上看起来好像隐藏了一样。但与前两种方式不同的是，它仍然可以响应鼠标事件等交互操作，并且同样占据着原来的空间位置
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"="width=device-width, initial-scale=1.0"><title>Opacity Zero Example</title><style>.transparent-element {opacity: 0;}</style>
</head><body><div class="visible-element">这是一个可见的元素哦，你可以看到我正常显示在这里呢。</div><div class="transparent-element">我是被设置为opacity:0的元素，现在你看不到我啦，但我还占着我原来的地方哦，而且你要是在我这儿点鼠标，还是会有反应的呢，因为我只是透明了而已呀。</div><div class="visible-element">这又是一个可见的元素哦，我在被隐藏元素的后面呢，它占着位置，我就只能在这儿啦。</div>
</body></html>
| 非常感谢您的阅读，喜欢的话记得三连哦 |
相关文章：
从 HTML 到 CSS：开启网页样式之旅（五）—— CSS盒子模型
从 HTML 到 CSS：开启网页样式之旅（五）—— CSS盒子模型 前言一、盒子模型的组成margin（外边距）：border（边框）：padding（内边距）：conten…...
数据分析（一）： 掌握STDF 掌握金钥匙-码农切入半导体的捷径
中国的半导体行业必然崛起！看清这个大势，就会有很多机会。 今天，我们一起来了解一下半导体行业的一朵金花：STDF。 实际上这只是一种文件格式，但是当你熟练掌握解析这种文件的时候，你就已经打开在这个基础…...
HCIA-openGauss_1_4基本功能介绍
openGauss支持标准SQL SQL是用于访问和处理数据库的标准计算机语言，SQL标准的定义分成核心特性以及可选特性，绝大部分的数据库都没有100%支撑SQL标准。openGuass支持SQL2003标准语法，支持主备部署的高性能可用关系型数据库。openGauss数据库…...
医学临床机器学习中算法公平性与偏差控制简析
摘要 随着医疗领域中数据的不断积累和计算能力的提升，临床机器学习技术发展迅速，但算法不公平性和偏差问题凸显。本文深入探讨了临床机器学习算法公平性的重要性、概念与定义、在临床应用中的影响、偏差来源、降低偏差方法及提升公平性策略。通过对不同…...
Leetcode打卡：棋盘上有效移动组合的数目
执行结果：通过 题目：2056 棋盘上有效移动组合的数目 有一个 8 x 8 的棋盘，它包含 n 个棋子（棋子包括车，后和象三种）。给你一个长度为 n 的字符串数组 pieces ，其中 pieces[i] 表示第 i 个棋子的…...
生产看板到底在看什么？
说起生产看板，可能很多人脑海里冒出来的画面是：车间里一块挂在墙上的大板子，上面贴满了各式各样的卡片、表格，甚至还有几个闪闪发光的指示灯。但是，无论是精益生产方式代表——丰田，还是当下以“智能制造”…...
12，攻防世界simple_php
simple_php 题目来源:Cyberpeace-n3k0 题目描述: 小宁听说php是最好的语言,于是她简单学习之后写了几行php代码。 进入靶场 这段PHP代码是一个简单的web应用示例，让我们逐步分析这段代码： show_source(__FILE__);：这行代码会显示当前文件的…...
解决Jupyter Notebook无法转化为Pdf的问题（基于Typora非常实用）
笔者在完成各项作业和做笔记时，经常用到jupyter notebook；其因为可以同时运行python并提供格式化的数字公式的输入方式，得到了广大用户的喜爱。 当我们想要将.ipynb文件导出为pdf时，有两种常用方法。 1.Ctrlp 2.通过File ->…...
齐护机器人ModbusRTU RS485转TTL通信模块与ESP32 Arduino通信可Mixly的图形化编程Scratch图形化编程
齐护机器人ModbusRTU RS485-TTL通信模块 一、概念理解 Modbus协议是一种由Modicon公司（现为施耐德电气Schneider Electric）于1979年发表的网络通信协议，旨在实现可编辑逻辑控制器（PLC）之间的通信。 1.1 什么是Mod…...
python学习笔记15 python中的类
上一篇我们介绍了python中的库 ，学习了一些常见的内置库。详细内容可点击–>python学习笔记14 python中的库，常见的内置库（random、hashlib、json、时间、os） 这一篇我们来看一下python中的类 创建一个类 class 类的名称():de…...
PMP–一、二、三模、冲刺–分类–10.沟通管理
文章目录 技巧十、沟通管理 一模10.沟通管理--1.规划沟通管理--文化意识--军事背景和非军事背景人员有文化差异5、 [单选] 项目团队由前军事和非军事小组成员组成。没有军事背景的团队成员认为前军事团队成员在他们的项目方法中过于结构化和僵化。前军事成员认为其他团队成员更…...
android-studio开发第一个项目，并在设备上调试
恭喜你成功安装并配置好了 Android Studio！下面是开发你的第一个 Android 项目并在设备上调试的详细步骤： 1. 启动 Android Studio 首先，启动 Android Studio。你可以通过以下几种方式启动： 使用桌面快捷方式（如果已…...
springboot/ssm线上教育培训办公系统Java代码web项目在线课程作业源码
springboot/ssm线上教育培训办公系统Java代码web项目在线课程作业源码 基于springboot(可改ssm)htmlvue项目 开发语言：Java 框架：springboot/可改ssm vue JDK版本：JDK1.8（或11） 服务器：tomcat 数据库&…...
Spring 依赖 详解
Spring 依赖详解 在 Spring 框架中，依赖 是指一个对象（Bean）需要另一个对象（Bean）来完成其功能的情况。Spring 通过 依赖注入（Dependency Injection, DI） 和 控制反转（Inversion of…...
千益畅行，旅游卡有些什么优势？
千益畅行共享旅游卡是一种创新的旅游服务模式，旨在通过整合各类旅游资源，为用户提供一站式的旅游解决方案。这张旅游卡支持2至6人同行，涵盖了接机、酒店、用餐、大巴、导游、景区门票等服务，用户只需自行承担往返交通费用即可享受…...
Ubuntu24 cgroupv2导致rancher（k3s）启动失败的处理
方案一： 修改系统镜像为ubuntu18 方案二： 修改当前系统的cgroup版本，由v2改成v1 修改步骤： 1、查看当前cgroup版本 stat -fc %T /sys/fs/cgroup cgroup v2，输出结果为cgroup2fs cgroup v1，输出为tm…...
学习CSS第二天
学习文章目录 一.内部样式 一.内部样式 写在 html 页面内部，将所有的 CSS 代码提取出来，单独放在 <style> 标签中 语法： <style> h1 { color: red; font-size: 40px; } </style>注意点： <style> 标签理…...
2021数学分析【南昌大学】
2021 数学分析 求极限 lim n → ∞ 1 n ( n + 1 ) ( n + 2 ) ⋯ ( n + n ) n \lim_{n \to \infty} \frac{1}{n} \sqrt [n]{(n+1)(n+2) \cdots (n+n)} n→∞limn1n(n+1)(n+2)⋯(n+n) lim n → ∞ 1 n ( n + 1 ) ( n + 2 ) ⋯ ( n + n ) n = lim n → ∞ ( n + …...
单端和差分信号的接线法
内容来源：【单端信号 差分信号与数据采集卡的【RSE】【 NRES】【 DIFF】 模式的连接】 此篇文章仅作笔记分享。 单端输入 单端信号指的是输入信号由一个参考端和一个信号端构成，参考端一般是地端，信号就是通过计算信号端口和地端的差值所得…...
力扣-图论-2【算法学习day.52】
前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向和记录学习过程（例如想要掌握基础用法，该刷哪些题？）我的解析也不会做的非常详细，只会提供思路和一些关键点，力扣上的大佬们的题解质量是非…...
MySQL如何区分幻读和不可重复读
在MySQL中，幻读和不可重复读都是并发事务中可能出现的问题，但它们的表现和原因略有不同。 不可重复读 (Non-Repeatable Read) 不可重复读是指在同一个事务内，多次读取同一行数据时，可能会得到不同的结果。这种情况发生在一个事务…...
界面控件Syncfusion Essential Studio®现在已完全支持 .NET 9
Syncfusion Essential Studio现在完全支持 .NET 9，可最新版本2024 Volume 3 版本中使用！通过此更新，Blazor、.NET MAUI、WPF、WinForms、WinUI和ASP.NET Core 平台中的 Syncfusion 组件以及文档处理库已准备好让您利用 .NET 9 中的最新功能。…...
openEuler安装lsb_release
lsb_release是linux下查看发行版信息用的工具 lsb_release只是一个小程序，它的包名并不是lsb_release lsb_release其实是红帽的一个项目，其名为redhat-lsb 我们的lsb_release就是其中的一部分，更准确的说是redhat-lsb-core 从网站࿱…...
统计数字字符个数
统计数字字符个数 C语言实现C实现Java实现Python实现 💐The Begin💐点点关注，收藏不迷路💐 输入一行字符，统计出其中数字字符的个数。 输入 一行字符串，总长度不超过255。 输出 出为1行，输出…...
44页PDF | 信息化战略规划标准框架方法论与实施方法（限免下载）
一、前言 这份报告详细介绍了企业信息化战略规划的标准框架、方法论以及实施方法，强调了信息化规划应以业务战略和IT战略为驱动力，通过构筑企业架构（EA）来连接长期战略和信息化建设。报告提出了信息化规划原则，探讨了…...
计算机网络期末复习-part1-概述
1、互联网的组成 互联网由两大块组成。 1、边沿部分：由所有连接在互联网上的主机组成，是用户直接使用的部分。 2、核心部分，由大量网络和路由器组成，为边缘部分提供服务。 2、数据传送阶段的三种交换方式的主要特点 1、电路交…...
A1228 php+Mysql旅游供需平台的设计与实现 导游接单 旅游订单 旅游分享网站 thinkphp框架 源码 配置 文档 全套资料
旅游供需平台 1.项目描述2. 开发背景与意义3.项目功能4.界面展示5.源码获取 1.项目描述 随着社会经济的快速发展，生活水平的提高，人们对旅游的需求日益增强，因此，为给用户提供一个便利的查看导游信息，进行导游招募的平…...
RabbitMQ消息可靠性保证机制5--消息幂等性处理
RabbitMQ层面有实现“去重机制”来保证“恰好一次”吗？答案是没并没有，而且现在主流的消息中间件都没有实现。 一般解决重复消息的办法是：在消费端让我们消费消息操作具有幂等性。 幂等性问题并不是消息系统独有，而是࿰…...
Claude3.5如何使用？
Claude 3.5 Sonnet，性能直接吊打了 GPT-4o，甚至价格还更便宜。网友们纷纷展开实测，有人表示自己一半的工作已经可以由它替代了！而最让人惊喜的新功能，莫过于 Artifacts 了。 就在昨天，Anthropic 深夜发布了…...
力扣刷题TOP101：14.BM16 删除有序链表中重复的元素-II
目录： 目的 思路 复杂度 记忆秘诀 python代码 目的 1→1→2→3→3 删除重复后变成2。 思路 这个任务是删除链表里重复的节点包含本身。可以看成是一个抽奖活动的系统升级。某人通过多种方式报名（节点不同），后台数据检测到这些…...