课程简介
在大型项目或多人合作开发的场景下，CSS 样式文件可能会变得非常复杂，其中包含的大量的规则和选择器，可能会导致样式的意外重叠和覆盖，使页面出现样式问题，甚至影响网站的用户体验和可访问性。 防御式 CSS 的主要目标就是处理复杂的代码库或大型项目中的样式冲突和副作用，以确保网站的样式在任何情况下都能正常工作，提高项目的可维护性和可扩展性。
本课程详细介绍了防御式CSS在web布局、web UI、图片、滚动体验等场景下的应用，帮助学员快速了解防御式CSS的内容体系，掌握编写健壮CSS代码的技巧，为企业网站建设提供重要支持。
课程收益
1、帮助学员深入了解CSS，扫清知识盲区；
2、帮助学员掌握定位和排查CSS问题的方法；
3、帮助学员掌握一套编写健壮CSS代码的技巧集；
4、帮助学员掌握防御式CSS理念和知识体系
受众人群
从事网站建设开发人员或对CSS感兴趣的人员
课程周期
1天（6H）
课程大纲
标题 | 授课内容 |
一、与 Web 布局相关的防御式 CSS | 1. 如何根据 UI 形式选择视觉盒模型？ 2. Flexbox和 Grid 中的换行 3. Flexbox 和 Grid 中最小内容尺寸 4. 布局中的滚动失效和默认拉伸 5. 固定网格轨道尺寸给 Web 布局带来的局限性 6. 如何灵活设置元素之间的间距？ 7. position : sticky 失效与修复 8. z- index 失效与修复 |
二、与 Web UI 相关的防御式 CSS | 1. 你不知道的 border - radius 2. Web 中的阴影 3. Web中的边框 |
三、与图片相关的防御式 CSS | 1. 响应式图片：防止图片的拉伸或挤压 2. 如何提高图片上文本的可读性？ 3. 你所不知道的 CSS 渐变 4. Web图片：你不应该遗忘的CSS技巧 5. 图片的裁剪术 6. 重新思考Web中的裁剪：CSS还是SVG？ |
四、与滚动体验相关的防御式CSS
| 1. CSS 如何改善滚动体验？ 2. 美化滚动条 UI：自定义滚动条UI 3. CSS的滚动捕捉 4. 溢出常见问题与排查 |
五、 与长内容相关的防御式 CSS
| 1. 易碎的容器盒子：避免使用固定尺寸和长内容设置 |
六、 与多语言 Web 相关的防御式 CSS
| 1. 使用逻辑属性来替代物理属性 2. 多语言 Web 应用需要注意的细节 |
七、 条件 CSS
| 1. 条件 CSS 之＠规则和 CSS 选择器 2. 条件 CSS 之 CSS 属性／值和 CSS 函数 |
八、 其他相关的防御式 CSS
| 1. CSS的黑魔法 |
京ICP备2022035414号-1
