CSS 层叠样式表

CSS没有什么逻辑功能，基本只需要对HTML负责，在生成式AI如此发展的今天，简单的CSS和HTML基本上都可以交给AI来做

参考：https://github.com/GZhonghui/gzhonghui.github.io/blob/master/docs/index.html

UI布局知识（主要是Unity方面）

1. 使用 .x 选择类
2. 使用 #x 选择id
3. @x表示CSS 规则，比如：@import：导入外部 CSS 文件；@media：媒体查询（响应式设计）；@font-face：定义自定义字体

子类选择器

在下面的语法中，#a 表示 id 为 a 的父对象

#a > .b → 只选直接子元素 .b
#a .b → 选 #a 内所有 .b（不管嵌套层级）
#a p.b → 只选 p.b（.b并且是p标签）
#a .b:first-child → 选 #a 内第一个 .b
#a :is(.b) → 现代写法，适用于所有 .b

注意:如果中间有逗号，则是多选，不是子类选择器

@font-face {
    font-family: 'LXGW WenKai Lite';
    src: url('subset-LXGWWenKaiLite-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
 
p {
    font-family: 'LXGW WenKai Lite';
}

关于中文字体：和英文字体不同，中文字体文件一般都很大，直接从自己的网站上加载字体资源一般都很慢，也很消耗资源。这时候，可以尝试将字体子集化（关键字：字体子集化、Font Subset、Font Subsetter），主要思路就是将需要的字体单独提取出来，不需要的字体就删除，以此做到缩减字体文件大小的目的（有点类似游戏引擎的字体处理方式），当然这种方式打包出来的字体文件是“残缺不全”的，只能用于特定的用途。

https://getbootstrap.com/

简单来说，可以理解为一个CSS的lib，提供了直接可用的组件。但是实际上BS也提供了其他的功能，比如各种JavaScript 插件（只是本人不太常用）

BS 和 Vue 相比呢（两者我都不太熟…）BS更像是写传统的HTML + CSS，只是BS提供了更多可以直接用的内容。但 Vue 就像写完全不同语言的工程，还有单独的 vue 文件
BS 为你提供很多可选的“样式”，除了 BS 之外还有其他很多别的 UI 组件库，UI 组件库不提供逻辑功能；但 Vue 是“框架”，他为项目提供“逻辑支持”，定义 & 控制“数据如何操作、如何流动”，帮助处理网络请求等

AI:
Bootstrap 和 Vue 是面向前端开发的两种常见技术，但它们的定位、功能侧重点和使用方式都有明显不同，简单来说：
定位和作用不同

• Bootstrap：主要是一个前端 UI 框架/组件库，它提供了完善的 CSS 样式、响应式布局 和 JavaScript 插件（基于 jQuery 或官方 JS），帮助你快速搭建具有统一视觉风格和常见交互功能的页面或后台管理界面。
• Vue：是一个 JavaScript 前端框架，以 数据驱动 的方式来构建用户界面，擅长 单页应用 （Single Page Application, SPA）以及更大规模、更复杂的前端项目的架构。通过其 组件化 思想和 双向数据绑定 能力，可让开发者更轻松地管理前端的数据与视图逻辑。

侧重点不同

• Bootstrap 强调“如何让页面更快地实现一套成熟、兼容性好的 UI 和布局”，解决的是 “界面的外观和交互样式” 问题，比如按钮、表单、导航栏、弹窗、网格布局等。
• Vue 强调“如何在前端对数据进行更优雅的管理和交互”，解决的是 “数据流管理、组件间通信、界面的动态刷新” 问题，更侧重于应用的逻辑层和可维护性。

是否包含数据层/业务逻辑

• Bootstrap：没有提供数据管理的功能，也不在意业务逻辑如何执行，它关注的核心是 页面结构和样式。
• Vue：提供了大量关于 数据响应式、组件化开发、路由管理、状态管理 等方面的支持，帮助你更好地组织和维护大型前端项目的业务逻辑。

是否可以结合使用

• 因为二者关注点不同，它们 可以同时使用：Vue 负责数据和逻辑，Bootstrap 负责页面布局和样式。例如，你可以在 Vue 的组件中引入 Bootstrap 的样式和样式类，使用 Bootstrap 提供的布局或组件外观，然后用 Vue 来管理数据和界面交互。

总结

• Bootstrap 更像是为你提供“现成的界面样式和组件”，让界面可以快速搭建、并且在多终端上拥有良好的响应式体验。
• Vue 则是用来构建前端应用的核心框架，给你的页面/应用提供数据驱动和组件化的逻辑支持。