引言：css的进阶玩法----localStorage
localStorage是浏览器提供的一种本地存储方式，用于持久化保存键值对数据，容量较大（通常5MB），无过期时间，适合长期存储用户数据。
一、stylus
stylus 是何物？
Stylus 是一款 CSS 预处理器，提供变量、嵌套、混合（mixins）、函数等功能，增强 CSS 的可维护性和复用性。它允许开发者使用更简洁、灵活的语法编写样式表，最终编译为标准 CSS 文件，适用于现代前端开发流程。
如何使用呢？ 新建一个文件common.styl 然后添加插件
styllus 是css 的超集，但是浏览器还是只认css,编译一下并输出到common.css文件当中
编译成为一个common.css层叠样式表
这样的话样式就可以边写边上去了
二、box-shadow 0 0 0 0 四个零的理解
box-shadow 0 0 0 10px rgba(0,0,0,0.95) box-shadow 盒子的立体感觉
✅ 第一个值：x-offset（水平偏移量）
- 表示阴影的水平方向偏移量。
- 正值：阴影向右移动。
- 负值：阴影向左移动。
- 示例：
0表示阴影在元素正下方。
✅ 第二个值：y-offset（垂直偏移量）
- 表示阴影的垂直方向偏移量。
- 正值：阴影向下移动。
- 负值：阴影向上移动。
- 示例：
0表示阴影在元素正中间的下方（结合其他参数来看）
✅ 第三个值：blur-radius（模糊半径）
- 控制阴影的模糊程度。
- 值越大，阴影越模糊；值为
0时，阴影边缘清晰。 - 示例：
10px表示阴影有中等程度的模糊。
✅ 第四个值：spread-radius（扩散半径）
- 控制阴影的大小扩展或收缩。
- 正值：阴影扩大（向外延伸）。
- 负值：阴影缩小。
- 示例：
10px表示阴影比元素本身大出一圈。
可以通过下述图片的代码实现展示图所见。
三、css 有些属性直接继承
3.1 (默认会有继承特性)
每个都要写一遍，无法接受，默认文字大小，16px 颜色黑色
- 通配符全局都匹配，全部使用怪异盒模型
3.2 display: inline-block
是 CSS 属性值，用于将元素设置为行内块级元素，既有行内元素的排列特性，又能设置宽度、高度和垂直对齐方式。
background-size: cover; 等比例缩放，裁剪；contain 重点在背景
padding 10px 0 顺时针方向，上右下左
四、viewport user-scalable=no
<meta name="viewport" content="user-scalable=no"> 是HTML5中用于移动设备优化的一个标签设置。它位于HTML文档的<head>部分，主要作用是控制用户是否可以通过手势缩放页面。当设置user-scalable=no时，意味着禁止用户缩放网页内容，这可以提供一种更一致的视觉体验，并可能避免某些设计上的问题。然而，这种设置也可能会降低网站的可访问性，因为有些用户依赖缩放来查看内容细节或改善阅读体验。因此，使用此设置需谨慎考虑目标受众和应用场景。
五、在手机上跑起来
想要在自己的手机上查看网页与手机的适配性，因为没有服务器，我们可以将自己的电脑和手机连接相同的局域网。这样的话，在两个相同的局域网下面我们就可以看到网页的互通性。
我们可以将网页的地址改为：电脑上显示的IPv4地址，如下就是显示成功了。
我们可以将修改的网页地址发给我们的QQ或者是微信，用QQ或者微信在手机浏览器中打开。
六、总结
Stylus是一款高效的CSS预处理器，通过 npm install -g stylus 全局安装后即可使用。它采用 .styl 后缀文件，支持省略冒号的简洁语法，编译后生成浏览器可识别的CSS文件。作为CSS超集，Stylus保留继承特性（如默认16px字体大小和黑色文字），同时引入模块和作用域概念，解决重复编码问题。
核心优势包括：支持 background-size: cover/contain 等高级属性，提供自动前缀补全，实现CSS工程化管理。开发时需注意：部分属性不会继承，需显式声明；移动端调试可通过局域网连接实现。Stylus平衡了简洁语法与强大功能，是提升CSS开发效率的理想工具。
