【CSS3】筑基篇

复合选择器
- 后代选择器
- 子选择器
- 并集选择器
- 交集选择器
- 伪类选择器
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>