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.pswp.cn/news/899477.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/899477.shtml
英文地址，請注明出處：http://en.pswp.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