桌面端 PWA 应用：
"PWA 实践 / 应用 (Google Workbox)"继续阅读
分类： HTML & CSS
[转]Resource Hints - What is Preload, Prefetch, and Preconnect?
介绍了 `preload`、`prefetch` 和 `preconnect` 三种资源提示及其应用场景。`preload` 优化当前导航资源加载，`prefetch` 在空闲时预取未来可能需要的资源，`preconnect` 提前建立服务器连接以减少延迟。通过合理使用这些技术，可显著提升网页加载速度并优化用户体验。
CSS 预处理脚本 Sass / Scss 进阶
介绍了 Sass 的进阶语法，包括混合器的定义与使用、参数化与默认值、继承与占位符选择器以及数字和颜色运算。通过这些特性，可以减少样式重复，提高代码复用性和维护性，同时支持灵活的样式动态调整和优化。
CSS 预处理脚本 Sass / Scss 入门
介绍了 Sass 的基础知识与安装方法，包括变量、嵌套规则、文件导入和注释的使用。详细讲解了 Scss 语法的优势及其与 CSS 的兼容性，并展示了如何通过命令行工具编译 Scss 文件为 CSS。通过模块化和灵活的语法，Sass 提供了更高效的样式开发体验。
CDN 常用库
本文介绍了前端开发中常用的一些库的 CDN 资源，包括 jQuery、Bootstrap、Vue.js 等流行框架和库。我们将探讨这些库的功能、使用方法以及如何通过 CDN 进行快速引入。通过使用 CDN，可以显著提高网站的加载速度和性能，为开发者提供便利。
CSS 实现内容高度不够的时候底部 (footer) 自动贴底
介绍了两种实现页面底部 (footer) 吸底的 CSS 方案。方案 1 使用 Flex-Box 和 calc 动态调整布局，兼容现代浏览器；方案 2 通过设置内容区最小高度和底部负 margin 实现吸底效果。两种方法均能解决内容不足时底部上浮的问题，各有优缺点，需根据需求选择合适方案。
如何用 Sass / Less 实现单位转换 (px to rem/em/vw)
介绍了在移动端开发中使用 Sass 和 Less 转换像素单位以适配设计稿。Sass 通过自定义函数 pxToEm 实现 px 转 em，Less 使用混合 (Mixins) pxToVW 将 px 转换为 vw，适用于不同场景的网页适配需求，提高开发效率。
[转]什么是 BFC? 看这一篇就够了
介绍了 BFC (Block Formatting Context) 的定义、布局规则及创建方法，强调其在避免 margin 重叠、自适应布局和清除浮动中的作用。BFC 是一个独立的布局环境，内部元素与外部互不影响，高度计算包含浮动元素，有助于实现复杂的 CSS 布局需求。
使用 max-height 实现动画效果的展开 / 收起
介绍了利用 CSS 设置 max-height 属性在 0 与目标高度之间切换，实现“展开收起”动画效果的方法。通过设置 transition 属性实现平滑过渡，避免使用 JavaScript。需注意 max-height 值不宜过大，以免导致视觉延迟影响动画效果。
设置 box-sizing 为 border-box 后外边距 (margin) 会合并吗
讲解了设置 box-sizing: border-box; 的作用，明确元素的宽度和高度包含 border 与 padding，内容区宽高会自动减去 border 和 padding 的值。外边距 (margin) 不受影响，依然会发生合并。此属性使布局更直观且易于控制元素尺寸。