读完时间：2021 年 8 月 18 日
出版时间：2018 年 5 月
viewBox 和 preserveAspectRatio
viewBox的值并没有带单位，这是因为SVG可视空间并不是基于像素来设定的，而是一个可任意延展的空间，这样就可以适应许多不同的尺寸。
"《SVG动画》 – [美]莎拉·德拉斯纳 著 / 大漠 译"继续阅读
Tag: CSS
Webpack 只打包 CSS
背景
Webpack 作为热门前端构建打包工具，常用来构建打包应用型项目，包含 HTML、JavaScript、CSS 等代码。但是遇到比较零散的项目，往往需要单独打包某一模块，比如：CSS。
"Webpack 只打包 CSS"继续阅读
CSS 预处理脚本 Sass/Scss 进阶
进阶语法
1 混合器
开发者在编写整个网站的时候常常遇到类似或者一样的样式块，例如 Bootstrap 中的栅格样式。当然如果重复的次数少又简单，当然没有什么影响，可当项目变得越来越复杂，产品需求越来越多，复制粘贴就很难应付了。此时便可以使用 Sass 的混合器来实现大段样式的重用。混合器使用标识符 @mixin 定义，在 @mixin 后面跟一个自定义的名字，然后用花括号内填写需要重用的样式。定义完以后便可以在样式中使用 @include 引用这个混合器。
"CSS 预处理脚本 Sass/Scss 进阶"继续阅读
CSS 预处理脚本 Sass/Scss 入门
一、背景
使用前端 UI 框架（例如：Bootstrap、Mustard UI）的时候，虽然我们可以直接修改源码里面的 CSS 样式，但是修改起来非常麻烦低效；好在大多数框架是基于当下流行的 CSS 预处理脚本 Less 和 Sass 编译开发的，通过修改官方给出的 Sass 源码，我们可以很方便的定制它们。
"CSS 预处理脚本 Sass/Scss 入门"继续阅读
IPHONE/H5/IOS 14 版本滚条 / 滑动失效问题
需求场景是在一个使用绝对定位布局的页面中，动态渲染一个可以滑动的子模块。
开发的时候在电脑 Chrome 上面调试没问题，安卓手机和常规 IOS 版本测试了也没问题，但是由于苹果最近更新了新的系统版本（14），在新版本上出现了滚动滑动不了的问题。
"IPHONE/H5/IOS 14 版本滚条 / 滑动失效问题"继续阅读
CSS 实现内容高度不够的时候底部（footer）自动贴底
在 UI 切图过程中，页面往往由三个部分组成，头部、内容和底部。当页面的内容高度不够撑满屏幕，底部（footer）就跟着内容浮动上来了，小屏幕由于高度有限看不出来异常，但如果是大屏的话，底部下面变会多出很多空白，非常影响美观。
方案 1：Flex-Box
头部使用 position: sticky; 吸顶，再使用盒子（main）来包住内容（container > content）和底部（footer），这个盒子设置最小高度为除头部外的剩余屏幕高度：min-height: calc(100vh - 50px);，盒子里面使用弹性布局（flex: 1 1 auto;）让内容区域自动撑开，而底部保持不变（flex: 0 0 auto;），这样就有了内容不够时底部自动吸底，内容足够时底部自动下移的效果。
"CSS 实现内容高度不够的时候底部（footer）自动贴底"继续阅读
通过 eslint stylelint htmllint 规范前端项目代码
一、部署 eslint 规范 JavaScript
1.1 原理
husky + lint-staged + prettier + eslint + commitlint- husky: 阻止不规范的
git commit,git push。 - lint-staged: 只检测待提交区的代码。
"通过 eslint stylelint htmllint 规范前端项目代码"继续阅读
《图解 CSS3：核心技术与案例实战》 – 廖伟华 著
什么是BFC？看这一篇就够了[转]
BFC 定义
BFC（Block formatting context）直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。
在解释什么是BFC之前，我们需要先知道 Box、Formatting Context 的概念。
"什么是BFC？看这一篇就够了[转]"继续阅读
浏览器与 Node.js 的事件循环（Event Loop）有何区别？[转]
前言
本文我们将会介绍 JavaScript 实现异步的原理，并且了解了在浏览器和 Node.js 中 Event Loop 其实是不相同的。
一、线程与进程
1. 概念
我们经常说 JavaScript 是单线程执行的，指的是一个进程里只有一个主线程，那到底什么是线程？什么是进程？
官方的说法是：进程是 CPU 资源分配的最小单位；线程是 CPU 调度的最小单位。这两句话并不好理解，我们先来看张图。
- 进程好比图中的工厂，有单独的专属自己的工厂资源。
- 线程好比图中的工人，多个工人在一个工厂中协作工作，工厂与工人是 1:n 的关系。也就是说一个进程由一个或多个线程组成，线程是一个进程中代码的不同执行路线。
- 工厂的空间是工人们共享的，这象征一个进程的内存空间是共享的，每个线程都可用这些共享内存。
- 多个工厂之间独立存在。
"浏览器与 Node.js 的事件循环（Event Loop）有何区别？[转]"继续阅读