【CSS3】完整修仙功法
目录
- CSS 基本概念
- CSS 的定义
- CSS 的作用
- CSS 语法
- CSS 引入方式
- 内部样式表
- 外部样式表
- 行内样式表
- 选择器
- 基础选择器
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
- 画盒子
- 文字控制属性
- 字体大小
- 字体粗细
- 字体倾斜
- 行高
- 字体族
- font 复合属性
- 文本缩进
- 文本对齐
- 文本修饰线
- 文字颜色
- 复合选择器
- 后代选择器
- 子选择器
- 并集选择器
- 交集选择器
- 伪类选择器
- CSS 三大特性
- 继承性
- 层叠性
- 优先级
- 背景属性
- 背景色
- 背景图
- 背景图平铺方式
- 背景图位置
- 背景图缩放
- 背景图固定
- 背景复合属性
- 显示模式
- 显示模式
- 块级元素
- 行内元素
- 行内块元素
- 转换显示模式
- 结构伪类选择器
- 结构伪类选择器
- nth-child(公式)
- 伪元素选择器
- 盒子模型
- 组成
- 边框线
- 内边距
- 尺寸计算
- 外边距
- 边距问题
- 外边距-合并现象
- 外边距-塌陷问题
- 行内元素-内外边距问题
- 清除默认样式
- 元素溢出
- 圆角
- 圆角应用
- 正圆形状
- 胶囊形状
- 阴影
- 标准流
- 概念
- 元素类型及排列规则
- 块级元素
- 行内元素
- 行内块元素
- 标准流的特点
- 打破标准流
- 浮动
- 基本使用
- 清除浮动
- 额外标签法
- 单伪元素法
- 双伪元素法（推荐）
- overflow 法
- Flex 布局
- Flex 组成
- 主轴对齐方式
- 侧轴对齐方式
- 修改主轴方向
- 弹性盒子伸缩比
- 弹性盒子换行
- 行对齐方式
- 定位
- 相对定位
- 绝对定位
- 定位居中
- 固定定位
- 堆叠层级 z-index
- CSS 精灵
- 字体图标
- 下载字体
- 使用字体
- 垂直对齐方式
- 过渡
- 修饰属性
- 透明度
- 光标类型
- 平面转换
- 平移
- 旋转
- 改变旋转原点
- 多重转换
- 缩放
- 倾斜
- 渐变
- 线性渐变
- 径向渐变
- 空间转换
- 平移
- 视距
- 旋转
- 立体呈现
- 缩放
- 动画
- 使现步骤
- animation 复合属性
- animation 属性拆分
- 逐帧动画
- 多组动画
CSS 基本概念
CSS 的定义
CSS（Cascading Style Sheets）即层叠样式表，是一种用于描述网页呈现样式的标记性语言，主要用于定义 HTML（超文本标记语言）或 XML（可扩展标记语言）文档的显示风格。
CSS 的作用
CSS 可以用来设置网页元素的字体、颜色、大小、布局、背景等各种样式属性。通过将样式与内容分离，使得网页的维护和更新更加容易，同时也提高了网页的性能和用户体验。例如，通过 CSS 可以将整个网站的标题字体统一设置为某种特定的字体和大小，而无需在每个 HTML 文件中单独设置。
CSS 语法
CSS 语法由选择器（Selector）和声明块（Declaration Block）组成。
选择器{属性名 : 属性值;
}
选择器用于指定要应用样式的 HTML 元素，声明块则包含一个或多个属性 - 值对，用于定义元素的样式。
p {color: blue;font-size: 16px;
}
上述代码中，p是选择器，表示要选择所有的<p>标签元素；color: blue;和font-size: 16px;是声明块中的属性 - 值对，分别设置了文本颜色为蓝色和字体大小为 16 像素。
CSS 引入方式
内部样式表
将 CSS 代码写在 HTML 代码中：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>p{color: red;}</style></head><body><p>内部样式表</p></body>
</html>
注意事项：
- CSS 应该写在 HTML 中 title 标签的下方
- CSS 代码要写在
<style></style>块中
外部样式表
CSS 代码写在单独的 CSS 文件中（.css），在 HTML 中使用 link 标签引入：<link rel = "stylesheet" href = "css文件相对路径">：
p{color: green;
}
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><link rel="stylesheet" href="./CSS/style.css"></head><body><p>外部样式表</p></body>
</html>
行内样式表
CSS 写在标签的 style 属性值里：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title></head><body><p style="color: purple;">外部样式表</p></body>
</html>
选择器
基础选择器
标签选择器
标签选择器：使用标签名作为选择器 → 选中同名标签设置相同样式
语法格式：
标签名{属性名 : 属性值;
}
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>p{color: red;}</style></head><body><p>这是第一行字</p><div>这是第二行字</div><p>这是第三行字</p><div>这是第四行字</div><p>这是第五行字</p></body>
</html>
注意事项：选中同名标签设置相同的样式，无法差异化同名标签的样式
类选择器
作用：查找标签，差异化设置标签的显示效果
步骤：
- 定义类选择器 → .类名
- 使用类选择器 → 标签添加 class = “类名”
语法格式：
.类名{属性名 : 属性值;
}
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.red{color: red;}</style></head><body><p>这是第一行字</p><p class="red">这是第二行字</p><p>这是第三行字</p><p class="red">这是第四行字</p><p>这是第五行字</p></body>
</html>
注意事项：
- 一个类选择器可以给多个标签使用
- 一个标签可以使用多个类名，class 属性值写多个类名，类名之间用空格隔开
id 选择器
作用：查找标签，差异化设置标签的显示效果
步骤：
- 定义 id 选择器 → #id 名
- 使用 id 选择器 → 标签添加 id = “id 名”
语法格式：
#id 名{属性名 : 属性值;
}
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>#red{color: red;}</style></head><body><p>这是第一行字</p><p id="red">这是第二行字</p><p>这是第三行字</p><p>这是第四行字</p><p>这是第五行字</p></body>
</html>
注意事项：同一个 id 选择器在一个页面只能使用一次
通配符选择器
作用：查找页面所有标签，设置相同样式
通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
语法格式：
*{属性名 : 属性值;
}
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>*{color: yellow;}</style></head><body><p>这是第一行字</p><p>这是第二行字</p><p>这是第三行字</p><p>这是第四行字</p><p>这是第五行字</p></body>
</html>
画盒子
目标：使用合适的选择器画盒子
新属性：
| 属性名 | 说明 |
|---|---|
| width | 宽度 |
| height | 高度 |
| background-color | 背景色 |
如图，《关雎》的宽为 360、高为 125，背景色为红色；《蒹葭》的宽为 700、高为75，背景色为蓝色，按照该要求画盒子
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.first{width: 360px;height: 125px;background-color:red;}.second{width: 700px;height: 75px;background-color:blue;}</style></head><body><div class="first"><ul><li>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</li><li>参差荇菜，左右流之。窈窕淑女，寤寐求之。</li><li>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</li><li>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</li><li>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</li></ul></div><div class="second"><ul><li>蒹葭苍苍，白露为霜。所谓伊人，在水一方。溯洄从之，道阻且长。溯游从之，宛在水中央。</li><li>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。溯洄从之，道阻且跻。溯游从之，宛在水中坻。</li><li>蒹葭采采，白露未已。所谓伊人，在水之涘。溯洄从之，道阻且右。溯游从之，宛在水中沚。</li></ul></div></body>
</html>
文字控制属性
字体大小
属性名：font-size
属性值：文字尺寸，PC 端网页最常用的单位 px（像素）
格式：
选择器{font-size: 30px;
}
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.bigger{font-size: 30px;}</style></head><body><p>这是一段普通文字</p><p class="bigger">这是一段加大了的文字</p></body>
</html>
结果如下：
字体粗细
属性名：font-weight
属性值：
- 正常：normal（400）
- 加粗：bold（700）
格式：
选择器{font-weight: normal;font-weight: 400;font-weight: bold;font-weight: 700;
}
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>h3{font-weight: normal;}p{font-weight: bold;}h4{font-weight: 400;}div{font-weight: 700;}</style></head><body><h3>这是h3标签</h3><p>这是一句文字</p><h4>这是h4标签</h4><div>这是一段文字</div></body>
</html>
结果如下：
字体倾斜
作用：清除文字默认的倾斜效果
属性名：font-style
属性值：
- 正常：normal
- 倾斜：italic
格式：
选择器{font-style: normal;ront-style: italic;
}
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.normaldemo{font-style: normal;}.italicdemo{font-style: italic;}</style></head><body><em>这是一段倾斜的字</em><br><em class="normaldemo">这是一段倾斜的字使用 font-style 后的效果</em><div>这是一段正常的字</div><div class="italicdemo">这是一段正常的字使用 font-style 后的效果</div></body>
</html>
结果如下：
行高
作用：设置多行文本的间距
属性名：line-height
属性值：
- 数字 + px
- 数字（当前标签 font-size 属性值的倍数）
格式：
选择器{line-height: 2;line-height: 30px;
}
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.style1{line-height: 40px;}.style2{line-height: 2;}</style></head><body><div style="width: 400px;background-color: red;">生命的意义就是在于奋斗，人生的意义则在于积累。不要乞求太多，每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态，我们就会拥有整个世界</div><div style="width: 400px;background-color: gray;" class="style1">生命的意义就是在于奋斗，人生的意义则在于积累。不要乞求太多，每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态，我们就会拥有整个世界</div><div style="width: 400px;background-color: green;" class="style2">生命的意义就是在于奋斗，人生的意义则在于积累。不要乞求太多，每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态，我们就会拥有整个世界</div></body>
</html>
结果如下：
注意事项：
- 行高 = 文本高度 + 上间距 + 下间距
- 行高测量方法：从一行文字的最顶端（最低端）量到下一行文字的最顶端（最低端）
利用行高进行垂直居中：
技巧：行高属性等于盒子高度属性
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{height: 100px;background-color: red;line-height: 100px;}</style></head><body><div>生命的意义就是在于奋斗，人生的意义则在于积累。不要乞求太多，每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态，我们就会拥有整个世界</div></body>
</html>
结果如下：
注意事项：只能是单行文字垂直居中
字体族
属性名：font-family
属性值：字体名
格式：
选择器{font-family: "楷体";
}
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{font-family: "楷体";}</style></head><body><div>将进酒</div></body>
</html>
结果如下：
font 复合属性
复合属性：属性的简写方式，一个属性对应多个值的写法，各属性值之间用空格隔开
font：是否倾斜 是否加粗 字号/行高 字体（必须按照顺序书写）
注意事项：字号和字体值必须书写，否则 font 属性不生效
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{font: italic bold 30px/2 "楷体";}</style></head><body><div>君不见黄河之水天上来，奔流到海不复回。</div><div>君不见高堂明镜悲白发，朝如青丝暮成雪。</div><div>人生得意须尽欢，莫使金樽空对月。</div><div>天生我材必有用，千金散尽还复来。</div><div>烹羊宰牛且为乐，会须一饮三百杯。</div></body>
</html>
结果如下：
文本缩进
属性名：text-indent
属性值：
- 数字 + px
- 数字 + em（推荐：1em = 当前标签的字号大小）
格式：
选择器{text-indent: 2em;
}
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>p{text-indent: 2em;}</style></head><body><p>我们可以度过美好时光，也可以虚度光阴，但我希望你活得精彩。我希望你能看到令你惊叹的事物，我希望你体会从未有过的感觉，我希望你遇见具有不同观点的人，我希望你的一生能让自己过得自豪。如果你发现你的生活并非如此，我希望你能有勇气重新来过。 你是独特的，但你必须向统一让步；你是自由的，但你必须向禁忌妥协。因为你渴望亲近群体，渴望他们的接受。你害怕被群体驱逐。因而你是孤独的，你是独特但孤独的心魂。生来如此。生，就是这样，永远都是这样。</p></body>
</html>
结果如下：
文本对齐
作用：控制内容水平对齐方式
属性名：text-align
属性值：
- left：左对齐（默认）
- center：居中对齐
- right：右对齐
格式：
选择器{text-align: center;
}
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>p{text-indent: 2em;text-align: center;}</style></head><body><p>我要留下昨晚做的梦，</p><p>把它保存在冰箱里。</p><p>很久很久以后的一天，</p><p>当我变成一个白发老翁，</p><p>便要取出我冻结的美梦，</p><p>把它融化，把它烧开，</p><p>然后我就慢慢坐下，</p><p>用它来浸泡我的一双苍老冰冷的脚。</p></body>
</html>
结果如下：
注意事项：居中的是文字内容，并不是标签
图片水平居中方式：
text-align本质是控制内容的对齐方式，属性要设置给内容的父级
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{text-align: center;}</style></head><body><div><img src="./img/image.png" alt=""></div></body>
</html>
结果如下：
文本修饰线
属性名：text-decoration
属性值：
- none：去掉文本修饰线
- underline：下划线
- line-through：删除线
- overline：上划线
格式：
选择器{text-decoration: none;
}
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>a{text-decoration: none;}p{text-decoration: underline;}div{text-decoration: line-through;}span{text-decoration: overline;}</style></head><body><a href="https://www.baidu.com">去掉a标签访问百度的下划线</a><p>给这行字加下划线</p><div>把这行字删了</div><span>给这行字加上划线</span></body>
</html>
结果如下：
文字颜色
属性名：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 | 开发使用（从设计稿复制） |
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>h1{color: red;}h2{color: rgb(0, 0, 255)}h3{color: rgba(4, 94, 67, 0.5)}h4{color: #FFAACC;}</style></head><body><h1>颜色关键字</h1><h2>rgb表示法</h2><h3>rgba表示法</h3><h4>十六进制表示法</h4></body>
</html>
结果如下：
复合选择器
定义：由两个或多个基础选择器，通过不同的方式组合而成
作用：更准确、更高效的选择目标元素（标签）
后代选择器
后代选择器：选中某元素的后代元素（所有后代）
格式：
父选择器 子选择器{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>
结果如下：
标准流
CSS 标准流是网页布局的基础，也被称为文档流，是元素在网页中默认的排列和显示方式
概念
标准流是指元素按照其在 HTML 文档中出现的先后顺序依次排列，并根据元素自身的类型（块级元素、行内元素、行内块元素）和相关的 CSS 属性（如 width、height、margin、padding 等）来确定其在页面中的位置和大小
元素类型及排列规则
在标准流中，HTML 元素主要分为块级元素和行内元素，它们的排列规则有所不同：
块级元素
- 特点：
- 独占一行，即使内容宽度小于父元素宽度，也会自动换行
- 可以设置宽度和高度，如果不设置宽度，默认宽度是父元素宽度的 100%
- 常见元素：
<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>等 - 排列规则：块级元素会从上到下依次排列，每个元素之间会有换行
行内元素
- 特点：
- 不会独占一行，多个行内元素会在同一行内依次排列，直到该行排满后自动换行
- 宽度和高度由内容决定，不能直接设置宽度和高度（
width和height属性无效）
- 常见元素：
<a>、<span>、<img>、<input>、<label>等 - 排列规则：行内元素会从左到右依次排列，如果一行排不下，会自动换行到下一行继续排列
行内块元素
- 特点：
- 不会独占一行，多个行内块元素可以在同一行内排列
- 可以设置宽度和高度
- 常见元素：
<img>、<input>等元素默认具有行内块元素的特性，也可以通过display: inline-block将其他元素转换为行内块元素 - 排列规则：与行内元素类似，从左到右依次排列，当一行排不下时会自动换行
标准流的特点
- 自动换行：当块级元素排满一行或者行内元素、行内块元素在一行排不下时，会自动换行到下一行继续排列
- 文档顺序：元素按照 HTML 文档中的先后顺序依次显示，先出现的元素先显示
- 受父元素影响：元素的宽度、高度等尺寸和布局会受到父元素的影响，例如块级元素默认宽度是父元素宽度的 100%
打破标准流
虽然标准流是默认的布局方式，但在实际开发中，有时需要打破标准流来实现更复杂的布局。常见的打破标准流的方式有：
- 浮动（
float）：使用float: left或float: right可以让元素脱离标准流，向左或向右浮动，其他元素会围绕浮动元素排列 - 绝对定位（
position: absolute）和固定定位（position: fixed）：设置这两种定位方式后，元素会脱离标准流，相对于特定的参考元素进行定位
浮动
基本使用
作用：让块元素水平排列
属性名：float
属性值：
- left：左对齐
- right：右对齐
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.one{width: 100px;height: 100px;background-color: #e98989;float: left;}.two{width: 200px;height: 200px;background-color: #ace989;float: right;}</style></head><body><div class="one">one</div><div class="two">two</div></body>
</html>
结果如下：
特点：
- 浮动后的盒子顶部对齐
- 浮动后的盒子具备行内块特点
- 浮动后的盒子会脱离标准流，不占用标准流的位置
清除浮动
作用：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能会导致页面布局错乱）
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.top{margin: auto;width: 600px;/* height: 200px; */background-color: #e66d6d;}.bottom{height: 100px;background-color: #7059f3;}.left{float: left;width: 100px;height: 200px;background-color: #011f09;}.right{float: right;width: 400px;height: 200px;background-color: #2f0241;} </style></head><body><div class="top"><div class="left"></div><div class="right"></div></div><div class="bottom"></div></body>
</html>
结果如下：
解决方法：清除浮动（清除浮动带来的影响）
额外标签法
在父元素内容的最后添加一个块级元素，设置 CSS 属性clear: borth
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.top{margin: auto;width: 600px;/* height: 200px; */background-color: #e66d6d;}.bottom{height: 100px;background-color: #7059f3;}.left{float: left;width: 100px;height: 200px;background-color: #011f09;}.right{float: right;width: 400px;height: 200px;background-color: #2f0241;} .clearfix{clear: both;}</style></head><body><div class="top"><div class="left"></div><div class="right"></div><div class="clearfix"></div></div><div class="bottom"></div></body>
</html>
结果如下：
单伪元素法
使用单伪元素：
.clearfix::after{content: "";display: block;clear: both;
}
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.top{margin: auto;width: 600px;/* height: 200px; */background-color: #e66d6d;}.bottom{height: 100px;background-color: #7059f3;}.left{float: left;width: 100px;height: 200px;background-color: #011f09;}.right{float: right;width: 400px;height: 200px;background-color: #2f0241;} .clearfix::after{content: "";display: block;clear: both;}</style></head><body><div class="top clearfix"><div class="left"></div><div class="right"></div></div><div class="bottom"></div></body>
</html>
双伪元素法（推荐）
使用双伪元素：
.clearfix::before,.clearfix::after{content: "";display: table;
}
.clearfix::after{clear: both;
}
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.top{margin: auto;width: 600px;/* height: 200px; */background-color: #e66d6d;}.bottom{height: 100px;background-color: #7059f3;}.left{float: left;width: 100px;height: 200px;background-color: #011f09;}.right{float: right;width: 400px;height: 200px;background-color: #2f0241;} .clearfix::before,.clearfix::after{content: "";display: table;}.clearfix::after{clear: both;}</style></head><body><div class="top clearfix"><div class="left"></div><div class="right"></div></div><div class="bottom"></div></body>
</html>
注意事项：
clearfix::before解决外边距塌陷问题clearfix::after清除浮动
overflow 法
父元素添加 CSS 属性 overflow: hidden
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.top{margin: auto;width: 600px;/* height: 200px; */background-color: #e66d6d;overflow: hidden;}.bottom{height: 100px;background-color: #7059f3;}.left{float: left;width: 100px;height: 200px;background-color: #011f09;}.right{float: right;width: 400px;height: 200px;background-color: #2f0241;}</style></head><body><div class="top"><div class="left"></div><div class="right"></div></div><div class="bottom"></div></body>
</html>
Flex 布局
Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力
Flex 布局不会产生浮动布局中的脱标现象，布局网页更简单、更灵活
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.box{display: flex;justify-content: space-between;height: 300px;border: 1px solid black;}.box div{width: 200px;height: 100px;background-color: pink;}</style></head><body><div class="box"><div>1</div><div>2</div><div>3</div></div></body>
</html>
结果如下：
Flex 组成
设置方式：给父元素设置display: Flex，子元素可以自动挤压或拉伸
组成部分：
- 弹性容器
- 弹性盒子
- 主轴：默认在水平方向
- 侧轴/交叉轴：默认在垂直方向
主轴对齐方式
属性名：justify-content
属性值：
- flex-start：默认值，弹性盒子从起点开始依次排列
- flex-end：弹性盒子从终点开始依次排列
- center：弹性盒子沿主轴居中排列
- space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
- space-around：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
- space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.box{display: flex;justify-content: space-evenly;height: 300px;border: 1px solid black;}.box div{width: 200px;height: 100px;background-color: pink;}</style></head><body><div class="box"><div>1</div><div>2</div><div>3</div></div></body>
</html>
结果如下：
侧轴对齐方式
属性名：
align-items当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）align-self单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
属性值：
- stretch：弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸才能拉伸）
- center：弹性盒子沿侧轴居中排列
- flex-start：弹性盒子从起点开始依次排列
- flex-end：弹性盒子从终点开始依次排列
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.box{display: flex;align-items: flex-end;height: 300px;border: 1px solid black;}.box div:nth-child(2){align-self: center;}.box div{width: 200px;height: 100px;background-color: pink;}</style></head><body><div class="box"><div>1</div><div>2</div><div>3</div></div></body>
</html>
结果如下：
修改主轴方向
主轴默认在水平方向，侧轴默认在垂直方向
属性名：flex-direction
属性值：
- row：水平方向，从左向右（默认）
- column：垂直方向，从上向下
- row-reverse：水平方向，从右向左
- column-reverse：垂直方向，从下向上
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.box{display: flex;flex-direction: column;justify-content: center;align-items: center;height: 300px;border: 1px solid black;}img{width: 40%;height: 50%;}span{font-size: 30px;font-family: "楷体";}</style></head><body><div class="box"><img src="./img/1.jpg" alt=""><span>山水水墨画</span></div></body>
</html>
结果如下：
注意事项：修改主轴方向为垂直方向，侧轴会自动变换到水平方向
弹性盒子伸缩比
作用：控制弹性盒子的主轴方向的尺寸
属性名：flex
属性值：整数数字，表示占用父级剩余尺寸的份数
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.box{display: flex;height: 300px;border: 1px solid black;}.box div{height: 100px;}.box div:nth-child(1){flex: 1;background-color: red;}.box div:nth-child(2){flex: 2;background-color: blue;}.box div:nth-child(3){flex: 3;background-color: gray;}</style></head><body><div class="box"><div>1</div><div>2</div><div>3</div></div></body>
</html>
结果如下：
弹性盒子换行
弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示
属性名：flex-wrap
属性名：
- wrap：换行
- nowrap：不换行（默认）
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.box{display: flex;justify-content: space-around;flex-wrap: wrap;height: 300px;border: 1px solid black;}.box div{width: 200px;height: 100px;background-color: pink;}</style></head><body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>1</div><div>2</div><div>3</div><div>4</div></div></body>
</html>
结果如下：
行对齐方式
属性名：align-content
属性值：
- flex-start：默认值，弹性盒子从起点开始依次排列
- flex-end：弹性盒子从终点开始依次排列
- center：弹性盒子沿主轴居中排列
- space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
- space-around：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
- space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.box{display: flex;justify-content: space-around;flex-wrap: wrap;align-content: space-around;height: 300px;border: 1px solid black;}.box div{width: 200px;height: 100px;background-color: pink;}</style></head><body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>1</div><div>2</div><div>3</div><div>4</div></div></body>
</html>
结果如下：
注意事项：align-content对单行不生效
定位
作用：灵活的改变盒子在网页中的位置
实现：
- 定位模式：
position - 边偏移：设置盒子的位置
- 水平：left、right
- 垂直：top、bottom
相对定位
属性名：position: relative
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}div{position: relative;top: 100px;left: 100px;}</style></head><body><p>樱花飘落的坡道上，校服裙摆被春风掀起涟漪。少女抱着素描本驻足，看花瓣像融化的蜂蜜般缓缓坠落。忽然有片花瓣在她眼前悬停，折射出七重光晕，化作蓝紫色蝴蝶振翅欲飞。远处传来棒球击打声与蝉鸣交织的午后，自动贩卖机旁的少年正对着她微笑，玻璃瓶装的橘子汽水在阳光下泛着金色泡沫。</p><div><img src="./img/1.png" alt=""></div><p>樱花飘落的坡道上，校服裙摆被春风掀起涟漪。少女抱着素描本驻足，看花瓣像融化的蜂蜜般缓缓坠落。忽然有片花瓣在她眼前悬停，折射出七重光晕，化作蓝紫色蝴蝶振翅欲飞。远处传来棒球击打声与蝉鸣交织的午后，自动贩卖机旁的少年正对着她微笑，玻璃瓶装的橘子汽水在阳光下泛着金色泡沫。</p></body>
</html>
结果如下：
注意事项：
- 改变位置的参照物是原来的位置
- 改变位置后不会脱标，仍然占原来的位置
- 标签显示模式不会改变
绝对定位
属性名：position: absolute
使用场景：子级绝对定位，父级相对定位
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}img{width: 600px;}.news{position: relative;margin: 100px auto;width: 600px;height: 540px;background-color: #f1c0c0;}.news span{position: absolute;right: 0;top: 0;display: block;width: 55px;height: 25px;background-color: rgba(0, 0, 0, 0.4);text-align: center;line-height: 25px;color: white;}</style></head><body><div class="news"><img src="./img/4.png" alt=""><span>花卉展</span><p>晴空如洗，湛蓝底色纯粹而明亮。繁茂的蔷薇在枝头铺展开绚烂画卷，粉白花瓣层层叠叠，似被阳光吻过的云朵，与翠绿枝叶交织缠绕。微风拂过，花朵轻颤，仿佛在低吟春日的浪漫絮语，每一簇绽放都浸满温柔气息，将画面晕染成动漫中独有的梦幻景致 —— 阳光倾洒，花香漫溢，连时光都在此刻变得柔软又诗意。</p></div> </body>
</html>
结果如下：
注意事项：
- 改变位置后会脱标，不会占用原来位置
- 参照物：先找最近的已经定位的先代元素，如果所有先代元素都没有定位，会参照浏览器可视区改变位置
- 显示模式会改变，宽高生效，具备了行内块的特点
定位居中
实现步骤：
- 绝对定位
- 水平、垂直边偏移为 50%
- 子级向左、上移动自身尺寸的一半
- 左、上的外边距为 -(尺寸的一半)
transform: translate(-50%,-50%);
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}img{position: absolute;left: 50%;top: 50%;/* margin-top: -150px;margin-left: -100px; */transform: translate(-50%,-50%);width: 200px;}.news{position: relative;margin: 200px auto;width: 400px;height: 400px;background-color: #e24242;} </style></head><body><div class="news"><img src="./img/1.jpg" alt=""></div> </body>
</html>
结果如下：
固定定位
属性名：position: fixed
场景：元素的位置在网页滚动时不会改变
代码示例：
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}img{position: fixed;width: 1897px;height: 50px;}p{line-height: 50px;}</style></head><body><img src="./img/2.jpg" alt=""><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-09 165009
注意事项：
- 固定定位会脱标，不会占有原来的位置
- 参照物是浏览器窗口
- 显示模式具备行内块特点
堆叠层级 z-index
默认效果：按照标签书写顺序，后来者居上
作用：设置定位元素的层级顺序，改变定位元素的显示顺序
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{position: absolute;width: 200px;height: 200px;}.box1{background-color: #eca8a8;z-index: 2;}.box2{background-color: #a2a9ee;left: 80px;top: 80px;z-index: 1;}</style>
</head>
<body><div class="box1">box1</div><div class="box2">box2</div>
</body>
</html>
结果如下：
注意事项：
-
堆叠顺序默认按标签顺序后来居上
-
z-index取值是整数，默认是0，取值越大显示顺序越靠上
CSS 精灵
CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置
优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度
实现步骤：
- 创建盒子，盒子尺寸与小图尺寸相同
- 设置盒子背景图为精灵图
- 添加
background-position属性，改变背景图位置- 使用测量工具测量图片左上角坐标
- 取负数坐标为
background-position属性值（向左上移动图片位置）
假如要将下图的字母 N 显示出来
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 45px;height: 50px;background-color: pink;background-image: url(./img/5.png);background-position: -106px -110px;}</style>
</head>
<body><div></div>
</body>
</html>
结果如下：
字体图标
字体图标：展示的是图标，本质是字体
作用：在网页中添加简单的、颜色单一的小图标
优点：
- 灵活性：灵活地修改样式，例如：尺寸、颜色等
- 轻量级：体积小、渲染快、降低服务器请求次数
- 兼容性：几乎兼容所有主流浏览器
- 使用方便：先下载再使用
下载字体
iconfont 图标库：https://www.iconfont.cn/
下载字体：登录→素材库→官方图标库→进入图标库→选图标，加入购物车→购物车添加至项目→下载至本地
屏幕录制 2025-03-09 220036
使用字体
操作步骤：
- 引入字体样式表（iconfont.css）
<link rel="stylesheet" href="./iconfont.css">
- 挑选相应图标并获取类名，应用于页面
<span class="iconfont icon-xxx"></span>
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./iconfont/font_4851524_dfjzseqnraq/iconfont.css"><style>.iconfont{font-size: 100px;color: rgb(168, 37, 168);margin: 20px;}</style>
</head>
<body><span class="iconfont icon-kongtiao"></span><span class="iconfont icon-nuanqi"></span><span class="iconfont icon-bingxiang"></span><span class="iconfont icon-xiyiji"></span><span class="iconfont icon-dianshiji"></span><span class="iconfont icon-reshuiqi"></span>
</body>
</html>
结果如下：
注意事项：如果要调整字体大小，选择器的优先级要高于 iconfont 类
垂直对齐方式
属性名：vertical-align
属性值：
- baseline：基线对齐（默认）
- top：顶部对齐
- middle：居中对齐
- bottom：底部对齐
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{border: 2px solid black;}img{vertical-align: middle;}</style>
</head>
<body><div><img src="./img/1.png" alt="">醉后不知天在水，满船清梦压星河</div>
</body>
</html>
结果如下：
过渡
作用：可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名：transition（复合属性）
属性值：过渡的属性 花费时间（s）
注意事项：
- 过渡的属性可以是具体的 CSS 属性
- 也可以为 all（两个状态属性值不同的所有属性都产生过渡效果）
- transition 设置给元素本身
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{width: 300px;height: 300px;transition: all 1s;}img:hover{width: 450px;height: 450px;}</style>
</head>
<body><img src="./img/1.png" alt="">
</body>
</html>
结果如下：
屏幕录制 2025-03-09 230108
修饰属性
透明度
作用：设置整个元素的透明度（包含背景和内容）
属性名：opacity
属性值：
- 0：完全透明（元素不可见）
- 1：不透明
- 0 - 1 之间小数：半透明
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 400px;height: 400px;background-color: rgb(226, 115, 115);opacity: 0.5;}</style>
</head>
<body><div><img src="./img/1.png" alt=""></div>
</body>
</html>
结果如下：
光标类型
作用：鼠标悬停在元素上时指针显示样式
属性名：cursor
属性值：
- default：默认值，通常是箭头
- pointer：小手效果，提示用户可以点击
- text：工字型，提示用户可以选择文字
- move：十字光标，提示用户可以移动
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 300px;background-color: #e08b8b;cursor: pointer;}</style>
</head>
<body><div></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-09 231536
平面转换
作用：为元素添加动态效果，一般与过渡配合使用
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
平面转换又叫 2D 转换
属性名：transform
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{margin: 100px 0;width: 100px;height: 100px;background-color: #e08b8b;transition: all 1s;}div:hover{transform: translate(700px) rotate(360deg) scale(2) skew(360deg);}</style>
</head>
<body><div></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 153147
平移
属性名：transform: translate(X轴移动距离, Y轴移动距离);
属性值：
- 像素单位数值
- 百分比（参照盒子自身尺寸计算结果）
- 正负均可
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father{width: 500px;height: 300px;margin: 100px auto;border: 1px solid black;}.son{width: 200px;height: 100px;background-color: antiquewhite;transition: all 0.5s;}.father:hover .son{transform: translate(150%,200%);}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 154956
注意事项：
- translate() 只写一个值，表示沿着 X 轴移动
- 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()
旋转
属性名：transform: rotate(旋转角度);
属性值：
- 角度单位是 deg
- 取值正负均可
- 取正顺时针旋转，取负逆时针旋转
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{width: 200px;transition: all 1s;}img:hover{transform: rotate(360deg);}</style>
</head>
<body><img src="./img/3.jpg" alt="">
</body>
</html>
结果如下：
屏幕录制 2025-03-13 162633
改变旋转原点
默认情况下，旋转远点是盒子中心点
属性名：transform-origin: 水平原点位置 垂直原点位置;
属性值：
- 方位名称（left、top、right、bottom、center）
- 像素单位数值
- 百分比
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{width: 200px;transition: all 1s;transform-origin: right bottom;}img:hover{transform: rotate(360deg);}</style>
</head>
<body><img src="./img/3.jpg" alt="">
</body>
</html>
结果如下：
屏幕录制 2025-03-13 163957
多重转换
先平移再旋转
属性名：transform: translate() rotate();
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 1200px;height: 200px;border: 1px solid black;}img{width: 200px;transition: all 4s;}div:hover img{transform: translateX(500%) rotate(360deg);}</style>
</head>
<body><div><img src="./img/4.jpg" alt=""></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 165216
注意事项：
- 不能先旋转再平移，因为旋转会改变坐标轴向
- 复合属性不能分开写，否则后面的属性会覆盖前面的属性
缩放
属性名：
transform: scale(缩放倍数);transform: scale(X轴缩放倍数, Y轴缩放倍数);
属性值：
- 通常只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
- 取值大于 1 表示放大，取值小于 1 表示缩小
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 143px;margin: 100px auto;}img{width: 200px;transition: all 4s;}div:hover img{transform: scale(2);}</style>
</head>
<body><div><img src="./img/4.png" alt=""></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 171831
倾斜
属性名：transform: skew();
属性值：
- 角度度数 deg
- 取正向左倾斜，取负向右倾斜
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 143px;margin: 100px auto;}img{width: 200px;transition: all 2s;}div:hover img{transform: skew(30deg)}</style>
</head>
<body><div><img src="./img/4.png" alt=""></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 174606
渐变
渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景
线性渐变
属性名：
background-image: linear-gradient(渐变方向,颜色1 终点位置,颜色2 终点位置,......
);
属性值：
- 渐变方向：（可选）
- to 方位名词
- 角度度数
- 终点位置：（可选）
- 百分比
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: #a0adf7;background-image: linear-gradient(45deg, red,#f8a4a4,#a0adf7);}</style>
</head>
<body><div></div>
</body>
</html>
结果如下：
径向渐变
作用：给按钮添加高光效果
属性名：
background-image: radial-gradient(半径 at 圆心位置,颜色1 终点位置,颜色2 终点位置,......
);
属性值：
- 半径可以是两条，则为椭圆
- 圆心位置取值：像素单位数值/百分比/方位名词
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background-color: pink;border-radius: 50%;background-image: radial-gradient(50px at center center,red,pink);}button{width: 100px;height: 40px;background-color: purple;border: 0;border-radius: 5px;color: white;background-image: radial-gradient(30px at center center,rgba(255,255,255,0.2),transparent);}</style>
</head>
<body><div></div><button>按钮</button>
</body>
</html>
结果如下：
空间转换
空间：是从坐标轴角度定义的 X、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴与视线方向相同
空间转换也叫 3D 转换
属性：transform
平移
属性名：
transform: translate3d(x,y,z);transform: translateX();transform: translateY();transform: translateZ();
属性值：
- 像素单位数值
- 百分比（参照盒子自身尺寸计算结果）
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.box:hover{transform: translate3d(100px,200px,300px);}</style>
</head>
<body><div class="box"></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 194159
注意事项：默认无法观察 Z 轴平移效果
视距
作用：制定了观察者与 z=0 平面的距离，为元素添加透视效果
透视效果：近大远小、近实远虚
属性名：perspective: 视距;
属性值：
- 添加给父级，取值范围 800-1200
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father{perspective: 1000px;}.son{width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5;}.son:hover{transform: translateZ(-300px);}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 195356
旋转
属性名：
transform: rotateZ() 沿着 Z 轴旋转
transform: rotateX() 沿着 X 轴旋转
transform: rotateY() 沿着 Y 轴旋转
transform: rotate3d(x,y,z,角度度数); x，y，z 取值为 0-1 之间的数字
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;margin: 100px auto;perspective: 1000px;}img{width: 200px;transition: all 2s;}.d1 img:hover{transform: rotateZ(360deg);}.d2 img:hover{transform: rotateX(60deg);}.d3 img:hover{transform: rotateY(60deg);}</style>
</head>
<body><div class="d1"><img src="./img/3.jpg" alt=""></div><div class="d2"><img src="./img/1.png" alt=""></div><div class="d3"><img src="./img/2.png" alt=""></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 201450
左手法则
根据旋转方向确定取值正负
左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向
立体呈现
作用：设置元素的子元素是位于 3D 空间中还是平面中
属性名：transform-style
属性值：
- flat：子级处于平面中
- preserve-3d：子级处于 3D 空间中
呈现立体图形步骤：
- 父元素添加
transform-style: preserve-3d; - 子级定位
- 调整子盒子的位置（位移或旋转）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.cube{position: relative;width: 200px;height: 200px;margin: 100px auto;/* background-color: pink; */transition: all 1s;transform-style: preserve-3d;}.cube div{position: absolute;left: 0;top: 0;width: 200px;height: 200px;}.front{background-color: orange;transform: translateZ(100px);}.back{background-color: green;transform: translateZ(-100px);}.cube:hover{transform: rotateY(90deg);}</style>
</head>
<body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 213518
缩放
属性名：
transform: scale3d(x,y,z);transform: scaleX();transform: scaleY();transform: scaleZ();
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.cube{position: relative;width: 200px;height: 200px;margin: 100px auto;/* background-color: pink; */transition: all 4s;transform-style: preserve-3d;transform: scale3d(1.5,2,3);}.cube div{position: absolute;left: 0;top: 0;width: 200px;height: 200px;}.front{background-color: orange;transform: translateZ(100px);}.back{background-color: green;transform: translateZ(-100px);}.cube:hover{transform: rotate3d(1,1,1,90deg);}</style>
</head>
<body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 220517
动画
过渡：实现两个状态间的变化过程
动画：实现多个动态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.d1{width: 1000px;height: 200px;border: 1px solid black;}.d2{width: 200px;height: 200px;background-color: pink;animation: change 1s infinite alternate;}@keyframes change {0% {transform: translate(0);}100% {transform: translate(800px);}}</style>
</head>
<body><div class="d1"><div class="d2"></div></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 221903
使现步骤
定义动画
- 两个状态
@keyframes 动画名称 {from {}to {}
}
- 多个状态
@keyframes 动画名称 {0% {}10% {}......100% {}
}
使用动画
animation: 动画名称 动画花费时长;
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: pink;animation: change 10s;}@keyframes change {0% {width: 200px;height: 200px;}25% {width: 400px;height: 200px;}75% {width: 400px;height: 400px;}100% {border-radius: 50%;}}</style>
</head>
<body><div></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-13 235715
animation 复合属性
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
- 速度曲线：
- linear：匀速运动
- steps()：括号里填数字，表示分几步完成动画
- 重复次数：
- infinite：无限循环重复播放
- 动画方向：
- alternate：反向执行
- 执行完毕时状态：
- backwards：开始状态
- forwards：结束状态
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 100px;background-color: pink;animation: change 1s linear 1s 3 alternate forwards;}@keyframes change {from {width: 200px;}to {width: 800px;}}</style>
</head>
<body><div class="box"></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-14 002430
注意事项：
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有两个时间值，第一个时间值表示动画时长，第二个时间值表示延迟时间
animation 属性拆分
| 属性 | 作用 | 取值 |
|---|---|---|
animation-name | 动画名称 | |
animation-duration | 动画时长 | |
animation-delay | 延迟时间 | |
animation-fill-mode | 动画执行完毕时状态 | forwards：最后一帧状态 backwards：第一帧状态 |
animation-timing-function | 速度曲线 | steps (数字)：逐帧动画 |
animation-iteration-count | 重复次数 | infinite 为无限循环 |
animation-direction | 动画执行方向 | alternate 为反向 |
animation-play-state | 暂停动画 | paused 为暂停，通常配合:hover 使用 |
逐帧动画
核心原理：
- steps() 逐帧动画
- CSS 精灵图
精灵动画制作步骤：
- 准备显示区域：盒子尺寸与一张精灵小图尺寸相同
- 定义动画：移动背景图（移动距离 = 精灵图宽度）
- 使用动画：strps(N)，N 与精灵小图个数相同
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 140px;height: 140px;border: 1px solid black;background-image: url(./img/01.png);animation: run 1s steps(12) infinite;}</style>
</head>
<body><div></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-14 144049
多组动画
语法格式：
animation: 动画1,动画2,......
;
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 140px;height: 140px;/* border: 1px solid black; */background-image: url(./img/01.png);animation: run 1s steps(12) infinite,move 5s linear forwards;}@keyframes run {from {background-position: 0 0;} to {background-position: -1680px 0;}}@keyframes move {0% {transform: translate(0);}100% {transform: translate(800px);}}</style>
</head>
<body><div></div>
</body>
</html>
结果如下：
屏幕录制 2025-03-14 144234
相关文章：
【CSS3】完整修仙功法
目录 CSS 基本概念CSS 的定义CSS 的作用CSS 语法 CSS 引入方式内部样式表外部样式表行内样式表 选择器基础选择器标签选择器类选择器id 选择器通配符选择器 画盒子文字控制属性字体大小字体粗细字体倾斜行高字体族font 复合属性文本缩进文本对齐文本修饰线文字颜色 复合选择器后…...
C++ 的 if-constexpr
1 if-constexpr 语法 1.1 基本语法 if-constexpr 语法是 C 17 引入的新语法特性，也被称为常量 if 表达式或静态 if（static if）。引入这个语言特性的目的是将 C 在编译期计算和求值的能力进一步扩展，更方便地实现编译期的分支…...
【电气设计】接地/浮地设计
在工作的过程中，遇到了需要测量接地阻抗的情况，组内讨论提到了保护接地和功能接地的相关需求。此文章用来记录这个过程的学习和感悟。 人体触电的原理： 可以看到我们形成了电流回路，导致触电。因此我们需要针对设备做一些保护设计…...
Gone v2 配置管理3：连接 Nacos 配置中心
🚀 发现 gone-io/gone：一个优雅的 Go 依赖注入框架！💻 它让您的代码更简洁、更易测试。🔍 框架轻量却功能强大，完美平衡了灵活性与易用性。⭐ 如果您喜欢这个项目，请给我们点个星！&a…...
深度强化学习中的深度神经网络优化策略：挑战与解决方案
I. 引言 深度强化学习（Deep Reinforcement Learning，DRL）结合了强化学习（Reinforcement Learning，RL）和深度学习（Deep Learning）的优点，使得智能体能够在复杂的环境中学…...
浅拷贝与深拷贝
浅拷贝和深拷贝是对象复制中的两种常见方式，它们在处理对象的属性时有本质的区别。 一. 浅拷贝（Shallow Copy） 浅拷贝是指创建一个新对象，然后将当前对象的非静态字段复制到新对象中。如果字段是值类型的，那么将复制字…...
macOS 安装 Miniconda
macOS 安装 Miniconda 1. Quickstart install instructions2. 执行3. shell 上初始化 conda4. 关闭 终端登录用户名前的 base参考 1. Quickstart install instructions mkdir -p ~/miniconda3 curl https://repo.anaconda.com/miniconda/Miniconda3-latest-MacOSX-arm64.sh -o…...
分布式限流方案：基于 Redis 的令牌桶算法实现
分布式限流方案：基于 Redis 的令牌桶算法实现 前言一、原理介绍：令牌桶算法二、分布式限流的设计思路三、代码实现四、方案优缺点五、 适用场景总结 前言 在分布式场景下，接口限流变得更加复杂。传统的单机限流方式难以满足跨节点的限流需求…...
OpenHarmony子系统开发 - 电池管理（二）
OpenHarmony子系统开发 - 电池管理（二） 五、充电限流限压定制开发指导 概述 简介 OpenHarmony默认提供了充电限流限压的特性。在对终端设备进行充电时，由于环境影响，可能会导致电池温度过高，因此需要对充电电流或电…...
Cocos Creator版本发布时间线
官网找不到，DeepSeek给的答案，这里做个记录。 Cocos Creator 1.x 系列 发布时间：2016 年 - 2018 年 1.0（2016 年 3 月）： 首个正式版本，基于 Cocos2d-x 的 2D 游戏开发工具链，集成可…...
修形还是需要再研究一下
最近有不少小伙伴问到修形和蜗杆砂轮的问题，之前虽然研究过一段时间，但是由于时间问题放下了，最近想再捡起来。 之前计算的砂轮齿形是一整段的，但是似乎这种对于有些小伙伴来说不太容易接受，希望按照修形的区域进行分…...
Java面试黄金宝典11
1. 什么是 JMM 内存模型 定义 JMM（Java Memory Model）即 Java 内存模型，它并非真实的物理内存结构，而是一种抽象的概念。其主要作用是规范 Java 虚拟机与计算机主内存（Main Memory）之间的交互方式&#x…...
华为p10 plus 鸿蒙2.0降级emui9.1.0.228
需要用到的工具 HiSuite Proxy V3 华为手机助手11.0.0.530_ove或者11.0.0.630_ove应该都可以。 官方的通道已关闭，所以要用代理，127.0.0.1端口7777 https://www.firmfinder.ml/ https://professorjtj.github.io/v2/ https://hisubway.online/articl…...
高速开源镜像站网址列表2503
高速开源镜像站网址列表 以下是国内常用的高速开源镜像站网址列表，涵盖企业和教育机构的主要站点，适用于快速下载开源软件和系统镜像： 一、企业镜像站 阿里云镜像站 地址：https://mirrors.aliyun.com/ 特点：覆盖广泛…...
函数))
Python----计算机视觉处理（Opencv：绘制图像轮廓：寻找轮廓，findContours()函数)
一、轮廓 轮廓是图像中目标物体或区域的外部边界线或边界区域，由一系列相连的像素构成封闭形状，代表了物体的基本外形。与边缘不同，轮廓是连续的，而边缘则不一定是连续的。 轮廓与边缘的区别： 轮廓是一组连续的点或线…...
/活体检测)
python --face_recognition(人脸识别,检测,特征提取,绘制鼻子,眼睛,嘴巴,眉毛)/活体检测
dlib 安装方法 之前博文 https://blog.csdn.net/weixin_44634704/article/details/141332644 环境: python==3.8 opencv-python==4.11.0.86 face_recognition==1.3.0 dlib==19.24.6人脸检测 import cv2 import face_recognition# 读取人脸图片 img = cv2.imread(r"C:\U…...
【测试工具】如何使用 burp pro 自定义一个拦截器插件
在 Burp Suite 中，你可以使用 Burp Extender 编写自定义拦截器插件，以拦截并修改 HTTP 请求或响应。Burp Suite 支持 Java 和 Python (Jython) 作为扩展开发语言。以下是一个完整的流程，介绍如何创建一个 Burp 插件来拦截请求并进行自定义处理…...
51单片机和STM32 入门分析
51单片机和STM32是嵌入式开发中两种主流的微控制器，它们在架构、性能、应用场景等方面存在显著差异。以下是两者的对比分析及选择建议： 1. 51单片机与STM32的定义与特点 51单片机 定义：基于Intel 8051内核的8位微控制器，结构简单…...
python暴力破解html表单
import requests import time# 目标URL url "http://192.168.3.101/pikachu/vul/burteforce/bf_form.php" # 请替换为实际的目标URL# 已知的用户名 username "admin"# 密码字典文件路径 password_file "passwords.txt"# 伪造请求头ÿ…...
DeepSeek+RAG局域网部署
已经有很多平台集成RAG模式，dify，cherrystudio等，这里通过AI辅助，用DS的API实现一个简单的RAG部署。框架主要技术栈是Chroma,langchain,streamlit，答案流式输出，并且对答案加上索引。支持doc,docx,pdf,txt。…...
流影---开源网络流量分析平台（一）（小白超详细）
目录 流影介绍 一、技术架构与核心技术 二、核心功能与特性 流影部署 流影介绍 一、技术架构与核心技术 模块化引擎设计 流影采用四层模块化架构：流量探针（数据采集）、网络行为分析引擎（特征提取）、威胁检测引擎&…...
在IDEA中快速注释所有console.log
在IDEA中快速注释所有console.log 在前端IDEA中，快速注释所有console.log语句可以通过以下步骤实现2： 打开要修改的文件。使用快捷键CtrlF打开搜索框。点击打开使用正则搜索的开关或者通过AltR快捷键来打开。在搜索框输入[]*console.log[]*，…...
python全栈-前端
python全栈-前端 文章目录 HTML标签段落p、换行br、水平线hr图片img路径src超文本链接a超链接之锚点href#id文本有序列表ol无序列表ul自定义列表表格table表格属性单元格合并 表单Forminput标签HTML5新增type属性HTML5新增常用属性 实体字符块元素与行内元素/内联元素容器元素d…...
基于PySide6与pycatia的CATIA绘图文本批量处理工具开发实践
引言 在CAD软件二次开发领域，CATIA的自动化处理一直存在开发门槛高、接口复杂等痛点。本文基于Python生态，结合PySide6 GUI框架与pycatia接口库，实现了一套高效的绘图文本批量处理工具。该工具支持背景视图文本批量处理和交互式文本选择处理…...
Jenkins 集成 SonarQube 代码静态检查使用说明
环境准备 Jenkins 服务器 确保 Jenkins 已安装并运行（推荐 LTS 版本）。安装插件： SonarQube Scanner for Jenkins（用于集成 SonarQube 扫描）NodeJS Plugin（可选，用于 JavaScript 项目࿰…...
pytorch构建线性回归模型
仅仅用于自己记录pytorch学习记录 线性回归模型 （1）准备数据集 数据：三个数据x[x1,x2,x3] y[y1,y2,y3] import torch #线性回归，我们使用三组数据，分别是（1,2），（2,4&a…...
本地部署 LangManus
本地部署 LangManus 0. 引言1. 部署 LangManus2. 部署 LangManus Web UI 0. 引言 LangManus 是一个社区驱动的 AI 自动化框架，它建立在开源社区的卓越工作基础之上。我们的目标是将语言模型与专业工具（如网络搜索、爬虫和 Python 代码执行）相…...
skynet网络包库（lua-netpack.c）的作用解析
目录 网络包库（lua-netpack.c）的作用解析1. 数据包的分片与重组2. 网络事件处理3. 内存管理4. 数据打包与解包 动态库（.so）在 Lua 中的使用1. 编译为动态库2. Lua 中加载与调用(1) 加载模块(2) 核心方法(3) 使用示例 3. 注意事项 …...
XXL-Job 二次分片是怎么做的？有什么问题？怎么去优化的？
XXL-JOB二次分片机制及优化策略 二次分片实现原理 XXL-JOB的二次分片是在分片广播策略的基础上，由开发者自行实现的更细粒度数据拆分。核心流程如下： 初次分片：调度中心根据执行器实例数量（总分片数n）分配分片索引i&…...
零基础本地部署 ComfyUI+Flux.1 模型！5 分钟搭建远程 AI 绘图服务器（保姆级教程）
文章目录 前言1. 本地部署ComfyUI2. 下载 Flux.1 模型3. 下载CLIP模型4. 下载 VAE 模型5. 演示文生图6. 公网使用 Flux.1 大模型6.1 创建远程连接公网地址 7. 固定远程访问公网地址 前言 在如今这 AI 技术一路火花带闪电、疯狂往前冲的时代，图像生成模型那可不再是…...
ABC398题解
A 算法标签: 模拟 #include <iostream> #include <algorithm> #include <cstring>using namespace std;const int N 110;int main() {ios::sync_with_stdio(false);cin.tie(0), cout.tie(0);int n;cin >> n;string res;if (n % 2) {int mid n / 2;f…...
数据通信——计算机基础
通信系统的组成 通信系统是指从一个地方向另外一个地方传递和交换信息，实现信息传递所需的一切技术设备和传输媒体的总和。通信系统一般由信源、发送设备、信道、接收设备、信宿以及噪声源组成，以下是各部分的具体介绍： 信源 信源是产生各…...
量子计算与人工智能的融合：下一代算力革命
1. 引言：算力需求的飞速增长与量子计算的潜力 在信息技术飞速发展的今天，人工智能（AI）已经渗透到我们生活的方方面面，从智能助手到自动驾驶，再到医疗诊断，AI 的应用场景日益广泛。然而…...
神经网络解决非线性二分类
这份 Python 代码实现了一个简单的神经网络，用于解决复杂的非线性二分类问题。具体步骤包含生成数据集、定义神经网络模型、训练模型、测试模型以及可视化决策边界。 依赖库说明 python import numpy as np import matplotlib.pyplot as plt from sklearn.datase…...
nuxt3网站文章分享微信 ,QQ功能
1.安装 npm install qrcode --save-dev 2.组件使用 <div class"share"><div style"line-height: 69px; color: #fff;width: 100px;"><p style"text-align: center;">分享:</p></div><div click"shareToMi…...
深入理解Spring框架：核心概念与组成剖析
引言 在Java企业级开发领域，Spring框架无疑是当之无愧的王者。自2003年首次发布以来，Spring凭借其强大的功能、高度的灵活性和卓越的扩展性，已成为构建大型企业应用程序的首选框架。本文将深入探讨Spring框架的核心概念与多样组成部分&#…...
Ubuntu22.04美化MacOS主题
安装Tweaks 参考Ubuntu 22.04 桌面美化成Mac风格这篇更好点 sudo apt install gnome-tweaks gnome-shell-extensions -y安装macos主题 git clone https://github.com/vinceliuice/WhiteSur-gtk-theme.git # 进到文件目录 ./install.sh -t all -N glassy sudo ./tweaks.sh -g…...
MySQL: 创建两个关联的表，用联表sql创建一个新表
MySQL: 创建两个关联的表 建表思路 USERS 表：包含用户的基本信息，像 ID、NAME、EMAIL 等。v_card 表：存有虚拟卡的相关信息，如 type 和 amount。关联字段：USERS 表的 V_CARD 字段和 v_card 表的 v_card 字段用于建立…...
JavaScript 中for...in和for...of循环的原理区别，在遍历对象和数组时分别如何使用
大白话JavaScript 中for…in和for…of循环的原理区别，在遍历对象和数组时分别如何使用 嘿，朋友！咱来唠唠 JavaScript 里 for...in 和 for...of 这两种循环的事儿。它们就像是两个不同的小帮手，能帮你在对象和数组里溜达溜达&…...
图解AUTOSAR_SWS_WatchdogInterface
AUTOSAR Watchdog Interface (WdgIf) 详解 AUTOSAR经典平台看门狗接口模块技术详解 目录 1. 概述 1.1 WdgIf模块的作用1.2 WdgIf在AUTOSAR中的位置2. 架构设计 2.1 WdgIf架构概览2.2 接口设计2.3 序列设计3. 配置详解 3.1 配置参数3.2 配置结构3.3 配置类型4. 总结 4.1 主要特点…...
快速搭建yolo测试环境，超简明的神经网络训练说明书
1 快速搭建yolo测试环境 相对于更早的版本，v5是比较舒服的，直接把仓库拉下来就行，不用单独搞测试脚本和权重文件 $ git clone https://github.com/ultralytics/yolov5.git然后就是切到目录下安装依赖的第三方库： $ cd yolov5 $…...
如何在IDEA中借助深度思考模型 QwQ 提高编码效率？
通义灵码上新模型选择功能，不仅引入了 DeepSeek 满血版 V3 和 R1 这两大 “新星”，Qwen2.5-Max 和 QWQ 也强势登场，正式加入通义灵码的 “豪华阵容”。开发者只需在通义灵码智能问答窗口的输入框中，单击模型选择的下拉菜单&#x…...
探索 Ollama：开源大语言模型平台的无限可能
在人工智能的快速发展进程中，大语言模型扮演着至关重要的角色。Ollama 作为一个开源的大语言模型平台，正逐渐崭露头角，为广大开发者和爱好者带来了全新的体验。它允许用户在本地环境中轻松地运行、创建和共享大型语言模型，极大地降…...
clickhouse多条件查询
安装包 infi.clickhouse-orm 2.1.3建表 create table test.test (name String,age UInt32,birthday Date32,sex UInt8 ) engineMergeTree() order by (name,sex)insert into test.testvalues (aa,34,1991-01-19,1), (cc,30,1994-01-19,0), (haha,31,1994-02-19,0);多条件查询…...
信息的度量
系列文章目录 文章目录 系列文章目录一、离散消息的信息量1.自信息的引入2.自信息定义 二、离散信源的平均信息量---信息熵1.信息熵定义 一、离散消息的信息量 1.自信息的引入 通信的本质是传递信息，为了定量表征信息的度量，引入自信息量的概念。事件包…...
ffmpeg+QOpenGLWidget显示视频
一个基于 FFmpeg 4.x 和 QOpenGLWidget的简单视频播放器代码示例，实现视频解码和渲染到 Qt 窗口的功能。 1）ffmpeg库界面，视频解码支持软解和硬解方式。 硬解后，硬件解码完成需要将数据从GPU复制到CPU。优先采用av_hwf…...
从零开始实现 C++ TinyWebServer 项目总览
文章目录 引言Web Server 概念如何实现高性能 WebServer？基础网络通信I/O 多路复用技术并发处理事件处理模式其他优化策略（未实现） 主要功能模块BufferLogSqlConnectPoolHttpRequestHttpResponseHttpConnectHeapTimerWebServer 引言 TinyWeb…...
opencv无法读取的图像，利用pil和numpy进行修复
代码总结 这段代码的功能是遍历指定文件夹下的所有图像文件，并修复可能存在的格式问题，然后覆盖原图像。 代码解析 设置输入文件夹路径（input_folder）。遍历文件夹中的所有文件，筛选出 .jpg、.jpeg、.png、.webp 格式…...
Redis分布式寻址算法
分布式寻址算法是分布式系统中用于确定数据应该存储在哪个节点的算法。这些算法对于实现高效的数据存取、负载均衡和系统扩展性至关重要。以下是几种常见的分布式寻址算法的解释： 1. Hash 算法 原理：通过哈希函数将数据的键（Key）…...
——GPU 架构)
CUDA 学习(1)——GPU 架构
典型 CPU 架构与 GPU 架构对比： 上图中绿色部分是计算单元，GPU 有更多的计算核心，计算能力更强。黄色部分是控制单元，CPU 中有大量的控制单元，现代 CPU 的晶体管越来越复杂，除了计算，还要实现乱…...