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

【CSS3】筑基篇

news 来源：原创 2025/8/23 8:03:14

复合选择器
- 后代选择器
- 子选择器
- 并集选择器
- 交集选择器
- 伪类选择器
CSS 三大特性
- 继承性
- 层叠性
- 优先级
背景属性
- 背景色
- 背景图
- 背景图平铺方式
- 背景图位置
- 背景图缩放
- 背景图固定
- 背景复合属性
显示模式
- 显示模式
- - 块级元素
  - 行内元素
  - 行内块元素
- 转换显示模式
结构伪类选择器
- 结构伪类选择器
- nth-child(公式)
伪元素选择器
盒子模型
- 组成
- 边框线
- 内边距
- 尺寸计算
- 外边距
- 边距问题
- - 外边距-合并现象
  - 外边距-塌陷问题
  - 行内元素-内外边距问题
- 清除默认样式
- 元素溢出
- 圆角
- 圆角应用
- - 正圆形状
  - 胶囊形状
- 阴影

复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成

作用：更准确、更高效的选择目标元素（标签）

后代选择器

后代选择器：选中某元素的后代元素（所有后代）

格式：

父选择器 子选择器{CSS 属性
}

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div span{color: red;}</style></head><body><span>这是一个span标签</span><div><span>这是div标签中的span标签</span></div></body>
</html>

结果如下：

在这里插入图片描述

子选择器

子代选择器：选中某元素的子代元素

格式：

父选择器>子选择器{CSS 属性
}

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div>span{color: red;}</style></head><body><div><span>大儿子span</span><p><span>孙子span</span></p><span>小儿子span</span></div></body>
</html>

结果如下：
在这里插入图片描述

并集选择器

并集选择器：选中多组标签设置相同的样式

格式：

选择器1,选择器2,...,选择器N{CSS 属性
}

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div,p,span{color: red;}</style></head><body><div>div标签</div><p>p标签</p><span>span标签</span></body>
</html>

结果如下：

在这里插入图片描述

交集选择器

交集选择器：选中同时满足多个条件的元素

格式：

选择器1选择器2{CSS 属性
}

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>p.box{color: red;}</style></head><body><p class="box">p标签，使用了类选择器</p><p>p标签</p><div class="box">div标签，使用了类选择器</div></body>
</html>

结果如下：
在这里插入图片描述

注意事项：

选择器之间连写，没有任何符号
如果交集选择器中有标签选择器，标签选择器必须写在最前面

伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式

格式：

鼠标悬停状态：

选择器:hover{CSS 属性
}

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>a:hover{font-size: 30px;color: red;}</style></head><body><a href="#">这是没有鼠标悬停的a标签</a><br><a href="#">这是有鼠标悬停的a标签</a></body>
</html>

结果如下：
在这里插入图片描述

伪类-超链接：

超链接一共有四个状态

选择器	作用
:link	访问前
:visited	访问后
:hover	鼠标悬停
:active	点击时（激活）

注意事项：如果要给超链接设置以上四个状态，要按 lvha 的顺序书写

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>a:link{color: orange;}a:visited{color: black;}a:hover{color:yellow}a:active{color:gray}</style></head><body><a href="#">这是一段文字</a></body>
</html>

结果如下：

屏幕录制 2025-03-07 171505

CSS 三大特性

继承性

子级默认继承父级的文字控制属性

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>body{font-size: 30px;font-family: "楷体";color: red;}</style></head><body><div>樱花飘落的速度是每秒五厘米，而我对你的思念，始终追不上季节的更迭。</div><p>咖啡杯沿的温度逐渐冷却，书页间夹着的旧车票，还留着那年雨季的褶皱。</p><span>地铁里陌生人的一个微笑，像极了某个黄昏你转身时发梢掠过的风。</span></body>
</html>

结果如下：
在这里插入图片描述

注意事项：当子级有自己的样式的时候，优先生效自己的样式，就不会对父级的样式生效

层叠性

特点：

相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
不同的属性会叠加：不同的 CSS 属性都生效

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{font-size: 30px;color: red;}div{color: purple;font-family: "楷体";}</style></head><body><div>萤火虫提着灯笼穿过月光，在旧砖墙的皱纹里种下星辰的碎片。</div></body>
</html>

结果如下：
在这里插入图片描述

优先级

优先级也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则

规则：选择器优先级高的样式生效

公式：通配选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < ！important（选中标签的范围越大，优先级越低）

!important 提高权重，将优先级提到最高

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>*{color: purple !important;}.style1{color: red;}</style></head><body><div><p>这是一段文字1</p><p class="style1">这是一段文字2</p></div></body>
</html>

结果如下：
在这里插入图片描述

叠加计算规则：

叠加计算：如果是复合选择器，则需要权重叠加计算

规则：（行内样式，id 选择器个数，类选择器个数，标签选择器个数）

从左向右依次比较个数，同一级个数多的优先级高，如果个数相同，则向后比较
!important 权重最高（在继承中变为无效）
继承权重最低

背景属性

背景色

属性名：background-color

属性：

颜色表示方式	属性值	说明	使用场景
颜色关键字	颜色英文单词	red、green、blue…	学习测试
rgb 表示法	rgb(r, g, b)	rgb 表示红绿蓝三原色，取值：0 - 255	了解
rgba 表示法	rgba(r, g, b, a)	a 表示透明度，取值：0 - 1	开发使用，实现透明色
十六进制表示法	#RRGGBB	#000000，#ffcc00，简写：#000，#fc0	开发使用（从设计稿复制）

格式：

选择器{background-color: red;
}

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>p{background-color: red;}</style></head><body><p>这是一段文字</p></body>
</html>

结果如下

在这里插入图片描述

背景图

网页中使用背景图实现装饰性的图片效果

属性名：background-image

属性值：url(背景图路径)

格式：

选择器{background-image: url(./images/1.png);
}

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 504px;height: 495px;background-image: url(./img/1.png);}</style></head><body><div>这是一段文字</div></body>
</html>

结果如下：
在这里插入图片描述

注意事项：背景图默认是平铺的效果

背景图平铺方式

属性名：background-repeat

属性值：

no-repeat：不平铺
repeat：平铺（默认效果）
repeat-x：水平方向平铺
repeat-y：垂直方向平铺

格式：

选择器{background-repeat: no-repeat;
}

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 504px;height: 495px;background-color: rgb(240, 29, 117);background-image: url(./img/1.png);background-repeat: no-repeat;font-size: 80px;}p{width: 504px;height: 495px;background-color: rgb(240, 29, 117);background-image: url(./img/1.png);background-repeat: repeat-x;font-size: 80px;}.y{width: 504px;height: 495px;background-color: rgb(240, 29, 117);background-image: url(./img/1.png);background-repeat: repeat-y;font-size: 80px;}</style></head><body><div>这是不平铺</div><p>这是水平平铺</p><p class="y">这是垂直平铺</p></body>
</html>

结果如下：
在这里插入图片描述

背景图位置

属性名：background-position

属性值：水平方向位置垂直方向位置

关键字
- left：左侧
- right：右侧
- center：居中
- top：置顶
- bottom：置底
偏移量（数字 + px，正负都可以）
- 水平方向：正数向右，负数向左
- 垂直方向：正数向下，负数向上

格式：

选择器{background-position: center bottom;background-position: 50px -100px;background-position: 50px center;
}

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 504px;height: 495px;background-color: rgb(240, 29, 117);background-image: url(./img/1.png);background-repeat: no-repeat;background-position: right center;}p{width: 504px;height: 495px;background-color: rgb(240, 29, 117);background-image: url(./img/1.png);background-repeat: no-repeat;background-position: 126px 123.75px;}</style></head><body><div></div><p></p></body>
</html>

结果如下：
在这里插入图片描述

注意事项：

background-position: 0 0 和 background-position: left top 为默认的左上角
关键字取值方式写法，可以颠倒取值顺序
可以只写一个关键字，另一个方向默认居中；数字只写一个值表示水平方向，垂直方向为居中

背景图缩放

属性：background-size

属性值：

关键字
- cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
- contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
百分比：根据盒子尺寸计算图片大小
数字 + 单位（例如 px）

格式：

选择器{background-size: contain;background-size: cover;
}

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.size1{width: 1500px;height: 1500px;background-color: rgb(240, 29, 117);background-image: url(./img/2.png);background-repeat: no-repeat;background-size: contain;}.size2{width: 1500px;height: 1500px;background-color: rgb(240, 29, 117);background-image: url(./img/2.png);background-repeat: no-repeat;background-size: cover;}</style></head><body><p class="size1"></p><p class="size2"></p></body>
</html>

结果如下：
在这里插入图片描述

背景图固定

作用：背景图不会随着元素的内容滚动

属性名：background-attachment

属性值：fixed

格式：

选择器{background-attachment: fixed;
}

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>body{background-image: url(./img/3.png);background-repeat: no-repeat;background-position: center top;background-size: contain;background-attachment: fixed;}body p{font-size: 20px;font-family: "楷体";font-weight: bold;text-indent: 2em;}h1{font-family: "楷体";text-align: center;}</style></head><body><h1>孔雀东南飞</h1><p>序曰：汉末建安中，庐江府小吏焦仲卿妻刘氏，为仲卿母所遣，自誓不嫁。其家逼之，乃投水而死。仲卿闻之，亦自缢于庭树。时人伤之，为诗云尔。</p><p>孔雀东南飞，五里一徘徊。</p><p>“十三能织素，十四学裁衣，十五弹箜篌，十六诵诗书。十七为君妇，心中常苦悲。君既为府吏，守节情不移。贱妾留空房，相见常日稀。鸡鸣入机织，夜夜不得息。三日断五匹，大人故嫌迟。非为织作迟，君家妇难为！妾不堪驱使，徒留无所施。便可白公姥，及时相遣归。”</p><p>府吏得闻之，堂上启阿母：“儿已薄禄相，幸复得此妇，结发同枕席，黄泉共为友。共事二三年，始尔未为久。女行无偏斜，何意致不厚？”</p><p>阿母谓府吏：“何乃太区区！此妇无礼节，举动自专由。吾意久怀忿，汝岂得自由！东家有贤女，自名秦罗敷，可怜体无比，阿母为汝求。便可速遣之，遣去慎莫留！”</p><p>府吏长跪告：“伏惟启阿母，今若遣此妇，终老不复取！”</p><p>阿母得闻之，槌床便大怒：“小子无所畏，何敢助妇语！吾已失恩义，会不相从许！”</p><p>府吏默无声，再拜还入户。举言谓新妇，哽咽不能语：“我自不驱卿，逼迫有阿母。卿但暂还家，吾今且报府。不久当归还，还必相迎取。以此下心意，慎勿违吾语。”</p><p>新妇谓府吏：“勿复重纷纭。往昔初阳岁，谢家来贵门。奉事循公姥，进止敢自专？昼夜勤作息，伶俜萦苦辛。谓言无罪过，供养卒大恩；仍更被驱遣，何言复来还！妾有绣腰襦，葳蕤自生光；红罗复斗帐，四角垂香囊；箱帘六七十，绿碧青丝绳，物物各自异，种种在其中。人贱物亦鄙，不足迎后人，留待作遗施，于今无会因。时时为安慰，久久莫相忘！”</p><p>鸡鸣外欲曙，新妇起严妆。著我绣夹裙，事事四五通。足下蹑丝履，头上玳瑁光。腰若流纨素，耳著明月珰。指如削葱根，口如含朱丹。纤纤作细步，精妙世无双。</p><p>上堂拜阿母，阿母怒不止。“昔作女儿时，生小出野里。本自无教训，兼愧贵家子。受母钱帛多，不堪母驱使。今日还家去，念母劳家里。” 却与小姑别，泪落连珠子。“新妇初来时，小姑始扶床；今日被驱遣，小姑如我长。勤心养公姥，好自相扶将。初七及下九，嬉戏莫相忘。” 出门登车去，涕落百余行。</p><p>府吏马在前，新妇车在后。隐隐何甸甸，俱会大道口。下马入车中，低头共耳语：“誓不相隔卿，且暂还家去；吾今且赴府，不久当还归。誓天不相负！”</p><p>新妇谓府吏：“感君区区怀！君既若见录，不久望君来。君当作磐石，妾当作蒲苇，蒲苇纫如丝，磐石无转移。我有亲父兄，性行暴如雷，恐不任我意，逆以煎我怀。” 举手长劳劳，二情同依依。</p><p>入门上家堂，进退无颜仪。阿母大拊掌，不图子自归：“十三教汝织，十四能裁衣，十五弹箜篌，十六知礼仪，十七遣汝嫁，谓言无誓违。汝今何罪过，不迎而自归？” 兰芝惭阿母：“儿实无罪过。” 阿母大悲摧。</p><p>还家十余日，县令遣媒来。云有第三郎，窈窕世无双。年始十八九，便言多令才。</p><p>阿母谓阿女：“汝可去应之。”</p><p>阿女含泪答：“兰芝初还时，府吏见丁宁，结誓不别离。今日违情义，恐此事非奇。自可断来信，徐徐更谓之。”</p><p>阿母白媒人：“贫贱有此女，始适还家门。不堪吏人妇，岂合令郎君？幸可广问讯，不得便相许。”</p><p>媒人去数日，寻遣丞请还，说有兰家女，丞籍有宦官。云有第五郎，娇逸未有婚。遣丞为媒人，主簿通语言。直说太守家，有此令郎君，既欲结大义，故遣来贵门。</p><p>阿母谢媒人：“女子先有誓，老姥岂敢言！”</p><p>阿兄得闻之，怅然心中烦。举言谓阿妹：“作计何不量！先嫁得府吏，后嫁得郎君，否泰如天地，足以荣汝身。不嫁义郎体，其往欲何云？”</p><p>兰芝仰头答：“理实如兄言。谢家事夫婿，中道还兄门。处分适兄意，那得自任专！虽与府吏要，渠会永无缘。登即相许和，便可作婚姻。”</p><p>媒人下床去，诺诺复尔尔。还部白府君：“下官奉使命，言谈大有缘。” 府君得闻之，心中大欢喜。视历复开书，便利此月内，六合正相应。良吉三十日，今已二十七，卿可去成婚。交语速装束，络绎如浮云。青雀白鹄舫，四角龙子幡。婀娜随风转，金车玉作轮。踯躅青骢马，流苏金镂鞍。赍钱三百万，皆用青丝穿。杂彩三百匹，交广市鲑珍。从人四五百，郁郁登郡门。</p><p>阿母谓阿女：“适得府君书，明日来迎汝。何不作衣裳？莫令事不举！”</p><p>阿女默无声，手巾掩口啼，泪落便如泻。移我琉璃榻，出置前窗下。左手持刀尺，右手执绫罗。朝成绣夹裙，晚成单罗衫。晻晻日欲暝，愁思出门啼。</p><p>府吏闻此变，因求假暂归。未至二三里，摧藏马悲哀。新妇识马声，蹑履相逢迎。怅然遥相望，知是故人来。举手拍马鞍，嗟叹使心伤：“自君别我后，人事不可量。果不如先愿，又非君所详。我有亲父母，逼迫兼弟兄。以我应他人，君还何所望！”</p><p>府吏谓新妇：“贺卿得高迁！磐石方且厚，可以卒千年；蒲苇一时纫，便作旦夕间。卿当日胜贵，吾独向黄泉！”</p><p>新妇谓府吏：“何意出此言！同是被逼迫，君尔妾亦然。黄泉下相见，勿违今日言！” 执手分道去，各各还家门。生人作死别，恨恨那可论？念与世间辞，千万不复全！</p><p>府吏还家去，上堂拜阿母：“今日大风寒，寒风摧树木，严霜结庭兰。儿今日冥冥，令母在后单。故作不良计，勿复怨鬼神！命如南山石，四体康且直！”</p><p>阿母得闻之，零泪应声落：“汝是大家子，仕宦于台阁。慎勿为妇死，贵贱情何薄！东家有贤女，窈窕艳城郭，阿母为汝求，便复在旦夕。”</p><p>府吏再拜还，长叹空房中，作计乃尔立。转头向户里，渐见愁煎迫。</p><p>其日牛马嘶，新妇入青庐。奄奄黄昏后，寂寂人定初。“我命绝今日，魂去尸长留！” 揽裙脱丝履，举身赴清池。</p><p>府吏闻此事，心知长别离。徘徊庭树下，自挂东南枝。</p><p>两家求合葬，合葬华山傍。东西植松柏，左右种梧桐。枝枝相覆盖，叶叶相交通。中有双飞鸟，自名为鸳鸯。仰头相向鸣，夜夜达五更。行人驻足听，寡妇起彷徨。多谢后世人，戒之慎勿忘！</p></body>
</html>

结果如下：

屏幕录制 2025-03-08 013552

背景复合属性

属性名：background

属性值：背景色背景图背景图平铺方式背景图位置/背景图缩放背景图固定（不区分顺序）

格式：

选择器{background: red url(./img/1.png) no-repeat right center/cover;
}

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 600px;height: 400px;background: red url(./img/1.png) no-repeat right center/cover;}</style></head><body><div>这是一段字</div></body>
</html>

结果如下：
在这里插入图片描述

显示模式

显示模式：标签（元素）的显示方式

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容

块级元素

特点：

独占一行
高度默认是父级的 100%
添加宽高属性生效

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.div1{background-color: red;}.div2{height: 60px;background-color: gray;}</style></head><body><div class="div1">这是一段字</div><div class="div2">这是一段字</div>    </body>
</html>

结果如下：
在这里插入图片描述

行内元素

特点：

一行可共存多个
宽高跟内容宽高一致
添加宽高属性不生效

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.span1{background-color: red;font-size: 30px;}.span2{width: 20px;height: 60px;background-color: gray;}</style></head><body><span class="span1">这是span标签</span><span class="span2">这是span标签</span></body>
</html>

结果如下：
在这里插入图片描述

行内块元素

特点：

一行可共存多个
宽高与内容宽高一致
添加宽高属性生效

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.span1{background-color: red;font-size: 30px;}.span2{width: 20px;height: 60px;background-color: gray;}img{width: 100px;height: 100px;}</style></head><body><span class="span1">这是span标签</span><img src="./img/1.png" alt=""></body>
</html>

结果如下：

在这里插入图片描述

转换显示模式

属性名：display

属性值：

block：块级
inline-block：行内块
inline：行内

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 200px;height: 200px;background-color: red;display: inline;}span{width: 200px;height: 200px;background-color: gray;display: inline-block;}img{width: 100px;height: 100px;display: block;}</style></head><body><div>这是一段字</div><div>这是一段字</div><span>这是span标签</span><span>这是span标签</span><img src="./img/1.png" alt=""><img src="./img/1.png" alt=""></body>
</html>

结果如下：

在这里插入图片描述

结构伪类选择器

作用：根据元素的结构关系查找元素

选择器	说明
E:first-child	查找第一个 E 元素
E:last-child	查找最后一个 E 元素
E:nth-child(N)	查找第 N 个 E 元素（第一个元素 N 值为 1）

格式：

选择器:first-child{background color: red;
}

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>li:first-child{background-color: rgb(238, 115, 115);}li:last-child{background-color: rgb(131, 231, 131);}li:nth-child(2){background-color: rgb(174, 174, 235);}</style></head><body><ul><li>床前明月光，疑是地上霜。—— 李白《静夜思》</li><li>独在异乡为异客，每逢佳节倍思亲。—— 王维《九月九日忆山东兄弟》</li><li>欲穷千里目，更上一层楼。—— 王之涣《登鹳雀楼》</li></ul></body>
</html>

结果如下：

在这里插入图片描述

nth-child(公式)

作用：根据元素的结构关系查找多个元素

功能	公式
偶数标签	2n
奇数标签	2n+1，2n-1
找到 5 的倍数的标签	5n
找到第 5 个以后的标签	n+5
找到第 5 个以前的标签	-n+5

格式：

选择器:nth-child(2n){background color: red;
}

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>li:nth-child(2n-1){background-color: rgb(174, 174, 235);}li:nth-child(2n){background-color: rgb(235, 235, 157);}li:first-child{background-color: rgb(238, 115, 115);}li:last-child{background-color: rgb(131, 231, 131);}</style></head><body><ul><li>床前明月光，疑是地上霜。—— 李白《静夜思》</li><li>独在异乡为异客，每逢佳节倍思亲。—— 王维《九月九日忆山东兄弟》</li><li>欲穷千里目，更上一层楼。—— 王之涣《登鹳雀楼》</li><li>问君能有几多愁？恰似一江春水向东流。—— 李煜《虞美人》</li><li>大江东去，浪淘尽，千古风流人物。—— 苏轼《念奴娇・赤壁怀古》</li><li>寻寻觅觅，冷冷清清，凄凄惨惨戚戚。—— 李清照《声声慢》</li><li>落红不是无情物，化作春泥更护花。—— 龚自珍《己亥杂诗》</li><li>黑夜给了我黑色的眼睛，我却用它寻找光明。—— 顾城《一代人》</li><li>你站在桥上看风景，看风景人在楼上看你。—— 卞之琳《断章》</li></ul></body>
</html>

结果如下：
在这里插入图片描述

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容

选择器	说明
E::before	在 E 元素里面的最前面添加一个伪元素
E::after	在 E 元素里面的最后面添加一个伪元素

注意事项：

必须设置content:" "属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
伪元素默认是行内显示模式
权重和标签选择器相同

格式：

选择器::before{content:" ";
}

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 275px;height: 50px;background-color: #f7b7b7;}div::before{content: "寻寻觅觅，";}div::after{content: "凄凄惨惨戚戚。";}</style></head><body><div>冷冷清清，</div></body>
</html>

结果如下：
在这里插入图片描述

盒子模型

作用：布局网页，摆放盒子和内容

组成

盒子模型重要组成部分：

内容区域：width & height
内边距：padding（出现在内容与盒子边缘之间）
边框线：border
外边距：margin（出现在盒子外面）

在这里插入图片描述

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 100px;height: 100px;background-color: #f7b7b7;padding: 20px;border: 2px solid black;margin: 20px;}</style></head><body><div>这是一段文字这是一段文字这是一段文字这是一段文字</div></body>
</html>

结果如下：

在这里插入图片描述

边框线

属性名：border

属性值：边框线粗细线条样式颜色（不区分顺序）

常用线条样式：

属性值	线条样式
solid	实线
dashed	虚线
dotted	点线

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.div1{width: 100px;height: 100px;background-color: #f7b7b7;border: 2px solid black;display: inline-block;}.div2{width: 100px;height: 100px;background-color: #f7b7b7;border: 2px dashed black;display: inline-block;}.div3{width: 100px;height: 100px;background-color: #f7b7b7;border: 2px dotted black;display: inline-block;}</style></head><body><div class="div1">这是一段文字这是一段文字这是一段文字这是一段文字</div><div class="div2">这是一段文字这是一段文字这是一段文字这是一段文字</div><div class="div3">这是一段文字这是一段文字这是一段文字这是一段文字</div></body>
</html>

结果如下：
在这里插入图片描述

设置单方向边框线：

属性名：border-方位名词

属性值：边框线粗细线条样式颜色（不区分顺序）

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 100px;height: 100px;background-color: #f7b7b7;border-right: 2px solid black;border-top: 4px dotted red;border-left: 2px dashed blue;border-bottom: 4px solid yellow;}</style></head><body><div>这是一段文字这是一段文字这是一段文字这是一段文字</div></body>
</html>

结果如下：
在这里插入图片描述

内边距

作用：设置内容与盒子边缘之间的距离

属性名：padding / padding-方位名词

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 100px;height: 100px;background-color: #f7b7b7;padding-left: 20px;padding-right: 40px;padding-top: 10px;padding-bottom: 50px;}</style></head><body><div>这是一段文字这是一段文字这是一段文字这是一段文字</div></body>
</html>

结果如下：
在这里插入图片描述

内边距多值写法

取值个数	示例	含义
一个值	`padding: 10px;`	四个方向内边距均为 10px
两个值	`padding: 10px 80px;`	上下：10px；左右：80px
三个值	`padding: 10px 40px 80px;`	上：10px；左右：40px；下：80px
四个值	`padding: 10px 20px 40px 80px;`	上：10px；右：20px；下：40px；左：80px

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 100px;height: 100px;background-color: #f7b7b7;padding: 10px 20px 40px 80px;}</style></head><body><div>这是一段文字这是一段文字这是一段文字这是一段文字</div></body>
</html>

结果如下：
在这里插入图片描述

注意事项：从上开始顺时针转一圈，如果当前方向没有数值，取值跟对边一样

尺寸计算

默认情况：

盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

结论：给盒子加 border/padding 会撑大盒子

解决方法：

手动做减法：减掉 border/padding 的尺寸
内减模式：box-sizing:border-box

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 200px;height: 200px;background-color: #f7b7b7;padding: 20px;border: 2px solid black;box-sizing: border-box;}</style></head><body><div>这是一段文字</div></body>
</html>

结果如下：
在这里插入图片描述

外边距

作用：拉开两个盒子之间的距离

属性名：margin

提示：与 padding 属性值写法、含义相同

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 200px;height: 200px;background-color: #f7b7b7;margin: 20px;}</style></head><body><div>这是一段文字</div></body>
</html>

结果如下：
在这里插入图片描述

注意事项：外边距不会撑大盒子

外边距版心居中

通过左右两边添加相同的外边距使版心居中

格式：

选择器{margin: 0 auto 0;
}

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 800px;height: 512px;background-color: #f7b7b7;margin: 0 auto 0;}</style></head><body><div><img src="./img/2.png" alt=""></div></body>
</html>

结果如下：
在这里插入图片描述

注意事项：版心居中盒子一定要有宽度

边距问题

外边距-合并现象

场景：垂直排列的兄弟元素，上下 margin 会合并

现象：取两个 margin 中较大值生效

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.div1{width: 200px;height: 100px;background-color: #f0a3a3;margin-bottom: 20px;}.div2{width: 200px;height: 100px;background-color: #b4a3f0;margin-top: 50px;}</style></head><body><div class="div1">这是一段字</div><div class="div2">这是一段字</div></body>
</html>

结果如下：
在这里插入图片描述

外边距-塌陷问题

场景：父子级的标签，子级的添加上外边距会产生塌陷问题

现象：导致父级一起向下移动

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.father{width: 400px;height: 400px;background-color: #f0a3a3;}.son{width: 200px;height: 100px;background-color: #b4a3f0;margin-top: 50px;}</style></head><body><div class="father"><div class="son">son</div></div></body>
</html>

结果如下：
在这里插入图片描述

解决方法：

取消子级 margin，父级设置 padding（规避问题）
父级设置 overflow: hidden
父级设置 border-top

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.father{width: 400px;height: 400px;background-color: #f0a3a3;padding-top: 50px;box-sizing: border-box;}.son{width: 200px;height: 100px;background-color: #b4a3f0;}</style></head><body><div class="father"><div class="son">son</div></div></body>
</html>

结果如下：
在这里插入图片描述

行内元素-内外边距问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>span{margin: 50px;padding: 20px;}</style></head><body><span>这是一行字</span></body>
</html>

结果如下：
在这里插入图片描述

解决方法：给行内元素添加 line-height 可以改变垂直位置

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>span{margin: 50px;padding: 20px;line-height: 100px;}</style></head><body><span>这是一行字</span></body>
</html>

结果如下：
在这里插入图片描述

清除默认样式

清除标签默认的样式，比如：默认的内外边距

格式：

*{margin: 0;padding: 0;
}

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}</style></head><body><h1>标题</h1><p>文本内容</p><ul><li>列表内容</li></ul></body>
</html>

结果如下：
在这里插入图片描述

去掉列表项目符号

格式：

选择器{list-style: none;
}

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>li{list-style: none;}</style></head><body><ul><li>列表内容</li><li>列表内容</li><li>列表内容</li><li>列表内容</li></ul></body>
</html>

结果如下：
在这里插入图片描述

元素溢出

作用：控制溢出元素的内容的显示方式

属性名：overflow

属性值：

hidden：溢出隐藏
scroll：溢出滚动（无论是否溢出，都显示滚动条位置）
auto：溢出滚动（溢出才显示滚动条位置）

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 200px;height: 200px;background-color: #f0a3a3;overflow: auto;}</style></head><body><div>雨丝斜斜地穿过玻璃幕墙，在地面洇开细碎的光斑。咖啡馆里飘着焦糖玛奇朵的甜香，邻座姑娘的笔记本摊开在《雪国》某页，窗外的樱花正与书页上 "银河倾泻进瞳孔" 的句子重叠。地铁报站声从地底传来时，自动贩卖机突然吐出一罐过期的橘子汽水，金属拉环 "咔嗒" 轻响，惊飞了檐下打盹的灰鸽。暮色漫过街道时，修鞋匠终于为最后一只旧皮鞋钉上铜掌，锤子与铁砧碰撞的节奏，恰好吻合十字路口红绿灯交替的频率。</div></body>
</html>

结果如下：

屏幕录制 2025-03-08 175915

圆角

作用：设置元素的外边框为圆角

属性名：border-radius

属性值：（圆角半径）

数字 + px
百分比

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{margin: 50px auto;width: 200px;height: 200px;background-color: #42e2ee;border-radius: 80px 20px 80px 20px;}</style></head><body><div></div></body>
</html>

结果如下：
在这里插入图片描述

注意事项：从左上角顺时针开始赋值，没有赋值的角与对角的值相同

圆角应用

正圆形状

给正方形盒子设置圆角属性值为宽高的一半（50%）

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{margin: 50px auto;width: 200px;height: 200px;background-color: #42e2ee;border-radius: 50%;}</style></head><body><div></div></body>
</html>

结果如下：
在这里插入图片描述

注意事项：圆角最大值是 50%，超过 50% 不会生效

胶囊形状

给长方形盒子设置圆角属性值为盒子高度的一半

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{margin: 50px auto;width: 200px;height: 80px;background-color: #42e2ee;border-radius: 40px;}</style></head><body><div></div></body>
</html>

结果如下：
在这里插入图片描述

阴影

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X轴偏移量 Y轴偏移量模糊半径扩散半径颜色内/外阴影

注意事项：

X 轴偏移量和 Y 轴偏移量必须书写
默认是外阴影，内阴影需要添加 inset

代码示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{margin: 50px auto;width: 200px;height: 80px;background-color: #42e2ee;border-radius: 40px;box-shadow: 2px 5px 10px 2px black inset;}</style></head><body><div></div></body>
</html>

结果如下：
在这里插入图片描述

【CSS3】筑基篇

目录复合选择器后代选择器子选择器并集选择器交集选择器伪类选择器 CSS 三大特性继承性层叠性优先级背景属性背景色背景图背景图平铺方式背景图位置背景图缩放背景图固定背景复合属性显示模式显示模式块级元素行内元素行内块元素转换显示模式结构伪类选择器结构伪类选择器…...

编程日记 2025/8/23 8:03:14

CentOS7 安装docker并配置镜像加速

一、Yum 安装docker【不推荐】 /var/lib/docker 路径主要用于存储容器数据，在使用和操作过程中数据量会逐渐增加。因此，在生产环境中，建议为 /var/lib/docker 单独挂载一个硬盘。也可以使用软连接的方式 1.1 安装必要的一些系统工具 yum i…...

编程日记 2025/8/22 5:21:24

【Go每日一练】统计字符出现的次数

👻创作者：丶重明 👻创作时间：2025年3月9日 👻擅长领域：运维目录 1.😶‍🌫️题目：2.😶‍🌫️资源：3.😶‍🌫️代…...

编程日记 2025/8/19 5:43:04

正向代理与反向代理

代理: 通常称为代理、代理服务器或 Web 代理，代理一般是指正向代理，是位于一组客户端计算机之前的服务器。当这些计算机向 Internet 上的站点和服务发出请求时，代理服务器将拦截这些请求，然后代表客户端与 Web服务器进行通信&…...

编程日记 2025/8/20 23:37:00

报表DSL优化，享元模式优化过程，优化效果怎么样？

报表DSL优化与享元模式应用详解一、报表DSL优化 1. 问题背景报表系统通常使用领域特定语言（DSL）定义模板结构、数据绑定规则及样式配置。随着复杂度提升，DSL可能面临以下问题： 冗余配置：重复定义样式、布局或数据源…...

编程日记 2025/8/20 7:25:23

双击PPT文件界面灰色不可用，需要再次打开该PPT文件才能正常打开

双击PPT文件界面灰色不可用，需要再次打开该PPT文件才能正常打开 1. 软件环境⚙️2. 问题描述🔍3. 解决方法🐡解决步骤 4. 结果预览🤔 1. 软件环境⚙️ Windows10 或 Windows11 专业版64位，安装MotionGo软件&#xff08…...

编程日记 2025/8/18 21:19:36

学习前置知识第18和19天

今天要做什么？ 1：显示数字要求格式 2：无符号除法指令:div 3：前面用vhd和img等格式进行系统界面启动，详细了解多种镜像格式文件的区别一：显示数字要求格式屏幕上显示的数字格式,三个颜色编码和数字属性 1&…...

编程日记 2025/8/23 23:08:04

C#运算符详解

一、运算符分类与功能‌ 1‌.算术运算符‌ 基本运算‌：（加）、-（减）、*（乘）、/（除）、%（取模） int a 10 / 3; // 结果为3（整数除…...

编程日记 2025/8/21 5:43:29

生成任务，大模型

一个生成项目输入：文字描述（但是给的数据集是一串数字，id，ct描述，医生描述） 输出：诊断报告一、数据处理 import pandas as pd #处理表格数据pre_train_file "data/train.csv"tr…...

编程日记 2025/8/23 23:09:40

下载Hugging Face模型的几种方式

1.网页下载直接访问Hugging Face模型页面，点击“File and versions”选项卡，选择所需的文件进行下载。 2.使用huggingface-cli 首先，安装huggingface_hub: pip install huggingface_hub 然后，使用以下命令下载模型&#xff1…...

编程日记 2025/8/19 5:42:48

【Elasticsearch入门到落地】9、hotel数据结构分析

接上篇《8、RestClient操作索引库-基础介绍及导入demo》上一篇我们介绍了RestClient的基础，并导入了使用Java语言编写的RestClient程序Demo以及将要分析的数据库。本篇我们就要分析导入的宾馆数据库tb_hotel表结构的具体含义，并分析如何建立其索引库。 …...

编程日记 2025/8/19 9:37:45

【由技及道】量子构建交响曲：Jenkinsfile流水线的十一维编程艺术【人工智障AI2077的开发日志008】

摘要：当代码提交触发时空涟漪，当构建流水线穿越量子维度——欢迎来到自动化构建的终极形态。本文将揭示如何用Jenkinsfile编写量子构建乐章，让每次代码提交都成为跨维度交响乐的音符。动机：构建系统的量子哲学 “主人啊&#xff…...

编程日记 2025/8/23 9:53:16

Unity开发——CanvasGroup组件介绍和应用

CanvasGroup是Unity中用于控制UI的透明度、交互性和渲染顺序的组件。一、常用属性的解释 1、alpha：控制UI的透明度类型：float，0.0 ~1.0， 其中 0.0 完全透明，1.0 完全不透明。通过调整alpha值可以实现UI的淡入淡…...

编程日记 2025/8/20 10:06:49

jenkins配置连接k8s集群

jenkins配置连接k8s集群前言我这边jenkins是在一个服务器里面，k8s集群在其他服务器，实现连接首先jenkins下载有k8s插件进入配置页面获取k8s-api-server地址对应k8s服务器执行 kubectl config view --minify -o jsonpath{.clusters[0].cluste…...

编程日记 2025/8/20 20:28:04

Linux 入门：常用命令速查手册

目录一.指令 1.pwd（显示所在路径） 2.ls（列出所有子目录与文件） 3.touch（创建文件） 4.mkdir（创建目录） 5.cd（改变所处位置） 6.rm（删除&…...

编程日记 2025/8/19 6:34:55

【VUE】day01-vue基本使用、调试工具、指令与过滤器

【VUE】day01-vue基本使用、调试工具、指令与过滤器 1. 什么是Vue2. Vue的基本使用 1. 什么是Vue Vue（Vue.js）是一个用于构建用户界面的渐进式 JavaScript 框架，其核心设计理念是“自底向上逐层应用”，既能作为轻量级库增强现有项…...

编程日记 2025/8/21 5:43:34

deepseek为什么要开源

一、生态位的抢占与锁定：以 JDK 版本为例在软件开发的世界里，生态位的抢占和先入为主的效应十分显著。就拿 Java 开发中的 JDK 版本来说，目前大多数开发者仍在广泛使用 JDK8。尽管 JDK17 和 JDK21 已经推出，且具备更多先进特性…...

编程日记 2025/8/18 6:55:07

软考中级软件设计师考点知识点笔记总结 day02

文章目录 3、计算机系统组成 （五大部件）3.1、主存储器3.2、运算器3.3、控制器3.4、Flynn分类法 4、指令系统4.1、七种寻址方式4.2、指令的流水处理4.3、流水线的计算上一篇文章软考知识点 day01 3、计算机系统组成 （五大部件） …...

编程日记 2025/8/23 19:37:41

Redis Cluster 客户端定位分片全解析：哈希槽与动态路由机制

Redis Cluster客户端定位分片全解析：哈希槽与动态路由机制一、引言 Redis Cluster通过分片技术将数据分散存储在多个节点，实现水平扩展。客户端如何快速定位目标分片？本文将深入解析哈希槽算法、路由逻辑及实战技巧。二、核心原理&#…...

编程日记 2025/8/21 13:52:18

基于Python+Vue的智能服装商城管理系统的设计与实现

👗 基于PythonVue的智能服装商城管理系统的设计与实现电商级解决方案：全栈技术融合智能推荐系统多维度数据分析项目亮点：课程设计优选 | 企业级架构规范 | 完整电商功能闭环 | 毕业设计选择 🌐 在线资源速览类别地址访问方…...

编程日记 2025/8/21 6:04:09

提升Web可访问性的10个关键实践

在当今互联网时代，确保网站的可访问性（Accessibility）已经成为开发者和设计师的重要任务之一。Web可访问性不仅有助于残障用户更好地访问和使用网站，还能提升整体用户体验。本文将介绍10个关键的Web可访问性实践，帮助你…...

编程日记 2025/8/20 4:43:08

基于DeepSeek的智慧医药系统（源码+部署教程）

运行环境智慧医药系统运行环境如下： 前端： HTMLCSS后端：Java AIGCDeepseekIDE工具：IDEA技术栈：Springboot HTMLCSS MySQL 主要角色智慧医药系统主要分为两个角色。游客尚未进行注册和登录。具备登录注册、…...

编程日记 2025/8/23 20:52:37

yolov5训练自己数据集的全流程+踩过的坑

一，拿到yolov5数据集的第一步是什么呢，安装必要的依赖文件。在requirements.txt文件下存放 pip install -r requirements.txt二，检查是否可以正常进行检测，在detect.py，文件下，里面有默认的设置文件是可以…...

编程日记 2025/8/21 19:21:10

【Recon】Git源代码泄露题目解题方法

CTF中Git源代码泄露题目解题方法 1. 确认存在.git目录泄露2. 下载完整的.git目录3. 恢复Git仓库历史4. 查找Flag的常见位置5. 处理不完整的.git目录6. 其他技巧示例流程在CTF中遇到Git源代码泄露题目时，通常可以通过以下步骤解决： 1. 确认存在.git目录泄…...

编程日记 2025/8/22 5:21:11

Android APP 启动流程详解（含冷启动、热启动）

目录一、流程对比图二、冷启动（Cold Launch） 2.1 用户点击应用图标（Launcher 触发） 2.2 AMS 处理启动请求 2.3 请求 Zygote 创建新进程 2.4 初始化应用进程 2.5 创建 Application 对象 2.6 启动目标 Activity 2.7 执行 …...

编程日记 2025/8/19 3:05:56

Python实现网络通信：Socket模块与TCP/IP协议全解析

Langchain系列文章目录 01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南 02-玩转 LangChain Memory 模块：四种记忆类型详解及应用场景全覆盖 03-全面掌握 LangChain：从核心链条构建到动态任务分配的实战指南 04-玩转 LangChai…...

编程日记 2025/8/23 7:40:24

信奥赛CSP-J复赛集训（模拟算法专题）（1）：P8813 [CSP-J 2022] 乘方

信奥赛CSP-J复赛集训（模拟算法专题）（1）：P8813 [CSP-J 2022] 乘方题目描述小文同学刚刚接触了信息学竞赛，有一天她遇到了这样一个题：给定正整数 a a a 和 b b b，求 a b a^b ab …...

编程日记 2025/8/23 4:06:57

MongoDB https://www.mongodb.com/download-center/community 打开客户端 mongo.exe 注意6.0版本不一样需要自行安装Mongoshell MongoDB Shell Download | MongoDB 创建数据库 use go_db; 创建集合 db.createCollection("student"); 添加MongoDB依赖 go get …...

编程日记 2025/8/20 7:32:14

C#模拟鼠标点击，模拟鼠标双击，模拟鼠标恒定速度移动，可以看到轨迹

C#模拟鼠标点击，模拟鼠标双击，模拟鼠标恒定速度移动，可以看到轨迹 using System; using System.Collections.Generic; using System.Linq; using System.Runtime.InteropServices; using System.Text; using System.Threading.Tasks;namespa…...

编程日记 2025/8/21 17:49:19

时间复杂度空间复杂度

一、时间复杂度时间复杂度（Time Complexity）表示算法运行时间随输入规模增长的变化趋势。通常用大 O 表示法（Big O Notation）来描述。常见时间复杂度复杂度名称例子O(1)常数时间复杂度访问数组中的某个元素。O(log n)对数时间复…...

编程日记 2025/8/19 3:05:52

【科研绘图系列】R语言绘制组合箱线图（grouped boxplot）

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录介绍加载R包数据下载导入数据画图输出图片系统信息介绍【科研绘图系列】R语言绘制组合箱线图（grouped boxplot）加载R包 library(tidyverse) library(lemon) library(ggnewscale)…...

编程日记 2025/8/21 18:11:45

【前缀和与差分 C/C++】洛谷 P8218 求区间和

2025 - 03 - 09 - 第 72 篇 Author: 郑龙浩 / 仟濹【前缀和与差分 C/C】文章目录洛谷 P8218 求区间和题目描述输入格式输出格式输入输出样例 #1输入 #1输出 #1 说明/提示思路代码洛谷 P8218 求区间和题目描述给定 n n n 个正整数组成的数列 a 1 , a 2 , ⋯ , a n a_…...

编程日记 2025/8/16 12:01:29

数据库二三事（14）

备份与恢复数据库备份具体内容包括数据库结构，对象与数据，造成数据丢失的原因有： 存储介质故障（硬件损耗） 用户操作错误（人工） 服务器故障（软硬都可能） 病毒侵害 …...

编程日记 2025/8/22 23:50:11

C++之list

list是链表的意思，由一个个节点组成一、基本接口使用： （1）与vector相同，有个尾插，也可以使用迭代器遍历： void test_list1() {list<int> lt;lt.push_back(1);lt.push_back(2);lt.push…...

编程日记 2025/8/23 4:11:11

数据增强术：如何利用大模型（LLMs）来模拟不同的扰动类型以增强信息提取任务的鲁棒性

一、对抗样本库构建 1. 基于LLMs的领域针对性扰动设计对抗样本生成替换实体、三元组和触发器（Replace Entity, Triple, and Trigger）使用LLMs（如GPT-4）来替换句子中的实体、关系三元组或事件触发器，同时保持其类型不变，并确保其他内容不受影响： xxx名称（如“x方” →…...

编程日记 2025/8/21 8:03:17

《Gradio : AI awesome-demos》

《Gradio : AI awesome-demos》 This is a list of some wonderful demos & applications built with Gradio. Heres how to contribute yours! 🖊️ Natural language processing Demo name (link to demo)input type(s)output type(s)status badgeruDALL-ET…...

编程日记 2025/8/22 11:27:21

物联网中如何增加其可扩展性协议网络设备还包括软件层面上的

物联网（IoT）系统的可扩展性是指系统能够随着设备数量、数据流量和业务需求的增长而灵活扩展的能力。为了增加物联网的可扩展性，需要从协议、网络、设备和软件等多个层面进行优化和设计。以下是一些具体的策略和方法： 1. 协议层面的可扩展性 1.1 采用轻量级协议轻量级协议…...

编程日记 2025/8/22 20:39:21

【每日学点HarmonyOS Next知识】对话框去掉圆角、数组拼接、自定义对话框依附某个控件、平移动画、页面栈管理

1、 HarmonyOS CustomDialog怎么去掉左右和底部的透明以及圆角？ CustomDialog怎么去掉左右和底部的透明以及圆角设置customStyle为true即可开启使用自定义样式。设置borderRadius为0去掉圆角属性。属性用法参考文档：https://developer.huawei.com/c…...

编程日记 2025/8/22 14:36:35

Unity 通用UI界面逻辑总结

概述在游戏开发中，常常会遇到一些通用的界面逻辑，它不论在什么类型的游戏中都会出现。为了避免重复造轮子，本文总结并提供了一些常用UI界面的实现逻辑。希望可以帮助大家快速开发通用界面模块，也可以在次基础上进行扩展修改&…...

编程日记 2025/8/20 2:08:16

【网络】HTTP协议、HTTPS协议

HTTP与HTTPS HTTP协议概述 HTTP（超文本传输协议）：工作在OSI顶层应用层，用于客户端（浏览器）与服务器之间的通信,B/S模式无状态：每次请求独立，服务器不保存客户端状态（通过Cookie/Session扩展状态管理）。基于TCP：默认端口80（HTTP）、443（HTTPS），保证可靠传输。请…...

编程日记 2025/8/18 8:04:12

计算机网络——交换机

一、什么是交换机？ 交换机（Switch）是局域网（LAN）中的核心设备，负责在数据链路层（OSI第二层）高效转发数据帧。它像一位“智能交通警察”，根据设备的 MAC地址精准引导数…...

编程日记 2025/8/16 10:07:14

机器学习：愚者未完成的诗篇（零）

当算法在数据海洋中打捞支离破碎的韵律时，机器学习系统展现出的智慧如同断臂的维纳斯雕像——完美与残缺构成令人战栗的美学悖论。愚者，在词语的混沌中编织逻辑经纬，却总在即将触及诗性本质的瞬间，暴露出认知维度的致命裂隙。一…...

编程日记 2025/8/19 18:45:07

解锁DeepSpeek-R1大模型微调：从训练到部署，打造定制化AI会话系统

目录 1. 前言 2.大模型微调概念简述 2.1. 按学习范式分类 2.2. 按参数更新范围分类 2.3. 大模型微调框架简介 3. DeepSpeek R1大模型微调实战 3.1.LLaMA-Factory基础环境安装 3.1大模型下载 3.2. 大模型训练 3.3. 大模型部署 3.4. 微调大模型融合基于SpirngBootVue2…...

编程日记 2025/8/20 4:09:16

性能测试和Jmeter

文章目录前言性能测试理论知识什么是性能？什么是性能测试？性能测试的作用性能测试与功能测试的区别性能测试常见术语性能测试的策略基准测试负载测试稳定性测试压力测试并发测试常见性能测试指标响应时间并发数吞吐量点击数和错误率资源使用率性能测试…...

编程日记 2025/8/19 22:34:59

Linux网络之数据链路层协议

目录数据链路层 MAC地址与IP地址数据帧 ARP协议 NAT技术代理服务器正向代理反向代理上期我们学习了网络层中的相关协议，为IP协议。IP协议通过报头中的目的IP地址告知了数据最终要传送的目的主机的IP地址，从而指引了数据在网络中的一步…...

编程日记 2025/8/21 12:14:21

数据结构第八节：红黑树（初阶）

【本节要点】红黑树概念红黑树性质红黑树结点定义红黑树结构红黑树插入操作的分析一、红黑树的概念与性质 1.1 红黑树的概念红黑树 ，是一种二叉搜索树 ，但在每个结点上增加一个存储位表示结点的颜色，可以是 Red和 Black 。通过对任何…...

编程日记 2025/8/16 10:07:40

【大模型知识点】位置编码——绝对位置编码，相对位置编码，旋转位置编码RoPE

由于Transformer 中的自注意模块具有置换不变性（不关心输入序列的顺序），因此需要使用位置编码来注入位置信息以建模序列，使模型能够区分不同位置的 token，并捕捉序列的顺序关系。在介绍一些位置编码方法前&#xff0…...

编程日记 2025/8/17 17:48:19

【大模型篇】推理模型大作战（QwQ-32B vs DeepSeek-R1）

大家好，我是大 F，深耕AI算法十余年，互联网大厂技术岗。分享AI算法干货、技术心得。欢迎关注《大模型理论和实战》、《DeepSeek技术解析和实战》，一起探索技术的无限可能！写在前面当我让QwQ-32B vs DeepSeek-R1 写一封未来自己的信大家更喜欢哪种风格？ QwQ-32B 模…...

编程日记 2025/8/16 10:06:19

【汇编语言】单片机程序执行过程

一、任务需求指示灯LED4闪烁，亮0.5秒，灭0.5秒，无限循环二、针对硬件的编程 1、确定原理图2、确定硬件的物理关系三、设计步骤 1.用自己的语言描述工作流程 1.1指示灯LED4亮1.2延时0.5秒1.3指示灯LED4灭1.4延时0.5秒1.5跳转到1.1步 …...

编程日记 2025/8/22 19:48:37

MYSQL之创建数据库和表

创建数据库db_ck （下面的创建是最好的创建方法，如果数据库存在也不会报错，并且指定使用utf8mb4） show databases命令可以查看所有的数据库名，可以找到刚刚创建的db_ck数据库使用该数据库时，发现里面没有…...

编程日记 2025/8/18 4:41:43

目录

复合选择器

后代选择器

子选择器

并集选择器

交集选择器

伪类选择器

CSS 三大特性

继承性

层叠性

优先级

背景属性

背景色

背景图

背景图平铺方式

背景图位置

背景图缩放

背景图固定

背景复合属性

显示模式

显示模式

块级元素

行内元素

行内块元素

转换显示模式

结构伪类选择器

结构伪类选择器

nth-child(公式)

伪元素选择器

盒子模型

组成

边框线

内边距

尺寸计算

外边距

边距问题

外边距-合并现象

外边距-塌陷问题

行内元素-内外边距问题

清除默认样式

元素溢出

圆角

圆角应用

正圆形状

胶囊形状

阴影

相关文章：