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

【CSS3】筑基篇

article 2026/3/18 12:59:08

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

编程日记 2026/3/17 1:53:33

React:类组件（上）

kerwin老师我来了类组件的创建 class组件，js里的类命名首字符大写，类里面包括构造函数，方法组件类要继承React.Component才有效必须包含render方法 import React from react class App extends React.Component{render() {return <…...

编程日记 2026/3/18 10:08:05

开启mysql远程登录

目录前言开启步骤前言为了安全考虑，mysql默认不允许远程登录，需要我们自己开启。当然在远程登录之前mysql的端口也要开放。下面是mysql开启远程登录的步骤。开启步骤本地登录mysql mysql -u root -p然后输入登录密码给登录账号授权 GRANT AL…...

编程日记 2025/7/13 4:58:47

Eclipse 查看 JAVA SE 23 官方API 源代码

第一步：下载 JAVA SE 23 官方API 源代码 JavaSE23API源代码资源-CSDN文库 （或者到open jdk网站JDK Builds from Oracle:）下载https://download.java.net/java/GA/jdk23.0.2/6da2a6609d6e406f85c491fcb119101b/7/GPL/openjdk-23.0.2_windows-…...

编程日记 2026/3/4 7:23:41

Spring Cloud之注册中心之Nacos的使用

目录 Naacos 服务注册/服务发现引⼊Spring Cloud Alibaba依赖引入Nacos依赖引入Load Balance依赖配置Nacos地址服务端调用启动服务 Naacos Nacos是Spring Cloud Alibaba的组件, Spring Cloud Alibaba遵循Spring Cloud中定义的服务注册, 服务发现规范. 因此使⽤Na…...

编程日记 2026/3/17 4:34:02

字符串相乘——力扣

给定两个以字符串形式表示的非负整数 num1 和 num2，返回 num1 和 num2 的乘积，它们的乘积也表示为字符串形式。注意：不能使用任何内置的 BigInteger 库或直接将输入转换为整数。示例 1: 输入: num1 "2", num2 "3" …...

编程日记 2026/3/16 16:05:00

机试准备第13天

第一题是模拟出入栈游戏。 #include <stdio.h> #include <stack> #include <iostream> using namespace std; int main() {string str;while(getline(cin, str)){stack<char> stk;int j 0;//扫描出栈序列strfor(char i a;i<z;i){stk.push(i);//每…...

编程日记 2026/3/13 12:21:42

基于OpenCV的车牌识别系统（源码+论文+部署教程）

运行环境基于OpenCV的车牌识别系统运行环境如下： • Python: ≥ 3.5 • OpenCV: ≥ 4.0 • IDE工具：Visual Studio Code（可自行选择） • 技术栈：Python OpenCV Tkinte 主要功能基于OpenCV的车牌识别系统主要…...

编程日记 2026/3/4 13:40:54

MySQL：CRUD（增删查改）

目录一、准备工作二、Create 新增 1、语法 2、单行数据全列插入 3、单行数据指定列插入 4、多行数据指定列插入 5、多行数据全列插入三、Retrieve 检索 1、语法 2、全列查询 3、指定列查询 4、查询字段为表达式 （1）常量表达式 &…...

编程日记 2026/3/16 1:14:13

德鲁伊连接池

德鲁伊连接池（Druid Connection Pool）是一个开源的Java数据库连接池项目，用于提高数据库连接的性能和可靠性。德鲁伊连接池通过复用数据库连接、定时验证连接的可用性、自动回收空闲连接等机制，有效减少了数据库连接的创建和销毁开…...

编程日记 2026/2/26 14:10:56

【git】【网络】【项目配置运行】HTTP 协议的微型简易 Web 服务器---tinyEasyMuduoWebServer

【git】【网络】【项目配置运行】HTTP 协议的微型简易 Web 服务器—tinyEasyMuduoWebServer csdn项目： 原文链接：https://blog.csdn.net/weixin_45178775/article/details/122257814 github链接：https://github.com/wyewyewye/tinyEasyMuduo…...

编程日记 2026/3/18 3:55:42

每周一个网络安全相关工具——MetaSpLoit

一、Metasploit简介 Metasploit（MSF）是一款开源渗透测试框架，集成了漏洞利用、Payload生成、后渗透模块等功能，支持多种操作系统和硬件平台。其模块化设计（如exploits、auxiliary、payloads等）使其成为全球…...

编程日记 2026/2/23 14:48:26

Python入门———条件、循环

目录语句顺序语句条件语句缩进和代码块判断年份是否是闰年空语句 pass 循环 while 循环求5的阶乘： 求1！2！3！4！5！ for循环打印1-10 打印2，4，6，8&#x…...

编程日记 2026/3/1 14:52:17

InDraw6.2.3 | 甾体、核苷、黄酮类化合物实现简称命名

导语当化学家对着屏幕输入"2-amino-1,9-dihydro-6H-purin-6-one"时，隔壁生物学家可能正在搜索"鸟嘌呤"；这种命名差异如同"火星文"与"地球语"的碰撞。现在，鹰谷InDraw 6.2.3版带着53种多环化合物的…...

编程日记 2026/3/8 12:27:42

Linux中的TCP编程接口基本使用

TCP编程接口基本使用本篇介绍在UDP编程接口基本使用已经介绍过UDP编程相关的接口，本篇开始介绍TCP编程相关的接口。有了UDP编程的基础，理解TCP相关的接口会更加容易，下面将按照两个方向使用TCP编程接口： 基本使用TCP编程接口…...

编程日记 2026/3/15 14:51:49

系统部署【信创名录】及其查询地址

一、信创类型 （一）服务器： 1.华为云 2.腾讯云 3.阿里云 （二）中央处理器（CPU）： 1.海思，鲲鹏920服务器 （三）中间件 1.人大金仓 &#xff0…...

编程日记 2026/3/17 12:30:05

JavaWeb后端基础（7）AOP

AOP是Spring框架的核心之一，那什么是AOP？AOP：Aspect Oriented Programming（面向切面编程、面向方面编程），其实说白了，面向切面编程就是面向特定方法编程。AOP是一种思想，而在Spring框…...

编程日记 2026/3/5 1:10:58

Python 中多种方式获取屏幕的 DPI值

在 Python 中，可以通过多种方式获取屏幕的 DPI（每英寸点数）。以下是几种常见的方法： 方法 1：使用 tkinter 模块 tkinter 是 Python 的标准 GUI 库，可以通过它获取屏幕的 DPI。 import tkinter as tkdef …...

编程日记 2026/2/13 12:24:44

高效数据分析实战指南：Python零基础入门

高效数据分析实战指南 —— 以Python为基石，构建您的数据分析核心竞争力大家好，我是kakaZhui，从事数据、人工智能算法多年，精通Python数据分析、挖掘以及各种深度学习算法。一直以来，我都发现身边有很多在传统行业从…...

编程日记 2026/2/15 1:39:57

Unity DOTS从入门到精通之EntityCommandBufferSystem

文章目录前言安装 DOTS 包ECBECB可以执行的指令示例： 前言 DOTS（面向数据的技术堆栈）是一套由 Unity 提供支持的技术，用于提供高性能游戏开发解决方案，特别适合需要处理大量数据的游戏，例如大型开放世界游…...

编程日记 2026/3/18 2:02:55

开放充电点协议（OCPP）技术解析：架构演进与通信机制 - 慧知开源充电桩平台

开放充电点协议（OCPP）技术解析：架构演进与通信机制引言开放充电点协议（Open Charge Point Protocol, OCPP）作为电动汽车充电基础设施的核心通信标准，其技术架构与实现逻辑直接影响充电桩与中央管理系统&…...

编程日记 2026/2/14 23:22:50

MySQL 索引的数据结构(详细说明)

6. MySQL 索引的数据结构(详细说明) 文章目录 6. MySQL 索引的数据结构(详细说明)1. 为什么使用索引2. 索引及其优缺点2.1 索引概述 3. InnoDB中索引的推演3.1 索引之前的查找3.2 设计索引3.3 常见索引概念1. 聚簇索引2. 二级索引（辅助索引、非聚簇索引）…...

编程日记 2026/3/5 16:46:48

初学者快速入门Python爬虫 (无废话版)

全篇大概 5000 字(含代码)，建议阅读时间 40min 一、Python爬虫简介 1.1 什么是网络爬虫？ 定义： 网络爬虫（Web Crawler）是自动浏览互联网并采集数据的程序，就像电子蜘蛛在网页间"爬行"。分类&…...

编程日记 2026/3/13 13:38:32

【git】ssh配置提交 gitcode-ssh提交

【git】ssh配置提交 gitcode-ssh提交之前一直用的是gitee和阿里云的仓库，前两天想在gitcode上面备份一下我的打洞代码和一些资料就直接使用http克隆了下来。在提交的时候他一直会让我输入账号和密码，但是我之前根本没有设置过这个，根本没…...

编程日记 2026/3/15 20:57:20

【二】JavaScript能力提升---this对象

目录 this的理解 this的原理事件绑定中的this 行内绑定动态绑定 window定时器中的this 相信小伙伴们看完这篇文章，对于this的对象可以有一个很大的提升！ this的理解对于this指针，可以先记住以下两点： this永远指向一个…...

编程日记 2026/3/14 2:09:30

C++————类和对象（一）

1.类定义格式在C中，类（class）是封装数据和操作这些数据的函数的构造。类的定义包含成员变量和成员函数。类的基本定义格式如下： class ClassName {// 访问修饰符public:// 公有成员DataType memberVariable; // 成员变量voi…...

编程日记 2026/2/16 6:34:37

SpringBoot参数校验：@Valid 与 @Validated 详解

SpringBoot参数校验：Valid 与 Validated 详解一、案例（参数校验的必要性） 传统方式（无注解）的缺点： // 需要手动校验每个字段，代码冗余且易出错 public String register(User user) {// 手动…...

编程日记 2025/7/12 21:21:07

＜论文＞MiniCPM：利用可扩展训练策略揭示小型语言模型的潜力

一、摘要本文跟大家一起阅读的是清华大学的论文《MiniCPM: Unveiling the Potential of Small Language Models with Scalable Training Strategies》摘要： 对具有高达万亿参数的大型语言模型（LLMs）的兴趣日益增长，但同时也引发…...

编程日记 2026/3/17 11:13:47

SpringCloud系列教程（十三）：Sentinel流量控制

SpringCloud中的注册、发现、网关、服务调用都已经完成了，现在就剩下最后一部分，就是关于网络控制。SpringCloud Alibaba这一套中间件做的非常好，把平时常用的功能都集成进来了，而且非常简单高效。我们下一步就完成最后一块拼图Se…...

编程日记 2026/3/17 10:55:43

Codeforces Round 502 E. The Supersonic Rocket 凸包、kmp

题目链接题目大意平面上给定两个点集，判定两个点集分别形成的凸多边形能否通过旋转、平移重合。点集大小 ≤ \leq ≤ 1 0 5 10^{5} 105，坐标范围 [0, 1 0 8 10^{8} 108 ]. 思路题意很明显，先求出凸包再判断两凸包是否同构。这里用…...

编程日记 2026/2/15 7:03:42

目录

复合选择器

后代选择器

子选择器

并集选择器

交集选择器

伪类选择器

CSS 三大特性

继承性

层叠性

优先级

背景属性

背景色

背景图

背景图平铺方式

背景图位置

背景图缩放

背景图固定

背景复合属性

显示模式

显示模式

块级元素

行内元素

行内块元素

转换显示模式

结构伪类选择器

结构伪类选择器

nth-child(公式)

伪元素选择器

盒子模型

组成

边框线

内边距

尺寸计算

外边距

边距问题

外边距-合并现象

外边距-塌陷问题

行内元素-内外边距问题

清除默认样式

元素溢出

圆角

圆角应用

正圆形状

胶囊形状

阴影

相关文章：