元素包含内容 content, 内边距 padding, 边框 border, 外边距 margin

盒模型属性值包含 content-box, border-box, inherit 区别如下

• content-box: 总宽度 = margin + border + padding + width, 也就是标准盒模型
• border-box: 总宽度 = margin + width, 传说中的 ie 盒模型也叫怪异盒模型
• inherit: 继承父级的盒模型

DOM Tree 与 Render Tree 之间的区别是什么

DOM Tree: 包含了所有的 HTML 标签, 包括 display: none 的元素, JS动态添加的元素等.
Render Tree: DOM Tree 和样式结构体结合后构建呈现 Render Tree. Render Tree 能识别样式, 每个 node 都有自己的style, 且不包含隐藏的节点(display: none)

CSS 权重列表

垂水居中

1. 绝对定位 + 位置偏移
   a. 已知尺寸左上 margin: -(尺寸一半)
   b. 未知尺寸 translate: (-50%, -50%, 0)
2. flex 布局
3. tabel 布局
   父元素:
   display: table-cell;
   vertical-align: middle; // 垂直居中
   text-align: center; // 水平居中

margin 塌陷的解决办法

当盒子在垂直方向设置 margin 时会存在塌陷情况, 解决方案如下:

1. 给父级添加 border
2. 给父盒子添加 padding-top
3. 给父盒子添加 overflow: hidden
4. 父盒子 position: fixed
5. 父盒子 display: table
6. 在子元素的前边添加一个兄弟元素并设置属性为 content: ‘’; overflow: hidden;

1. application/x-www-form-urlencoded: form 表单默认格式, 数据被编码为键值对
2. application/json: restful 接口常用方案, 以序列化 json 的形式传递数据
3. text/xml: 以 xml 方式传递数据, 现在已经不常用了
4. multipart/form-data: 这个类型主要用于表单需要上传文件的时候, 因为文件需要以二进制的方式展示. 不设置这个类型无法上传文件
5. application/octet-stream: 用于响应头中, 表示未分类的二进制数据. 浏览器遇到这个响应头之后会直接下载文件. 还可以通过设置 Content-Disposition: attachment; filename=fileName.ext 指定下载文件名

webpack plugins 文档

• html-webpack-plugin: 生成 html 模板
• DefinePlugin: 在项目中定义环境变量, webpack 4 之后会根据 mode 字段自动定义环境变量
• IgnorePlugin: 忽略部分文件的编译
• CmmonsChunkPlugin: 提取公共代码, wp4 之后已经不推荐使用, 提取公共代码可以通过 SplitChunksPlugin 来
• SplitChunksPlugin: CommonsChunkPlugin替代, 配置: optimization.splitChunks
• ProgressPlugin: 命令行展示打包的进度
• UglifyJsPlugin: 压缩 js 的插件, 不支持 es 的压缩. Wp4 之后不推荐用
• TerserWebpackPlugin: wp4 之后的 js 压缩工具
• extract-text-webpack-plugin: css 模块提取独立文件, wp 5 之后不推荐使用
• mini-css-extract-plugin: wp 5 之后的 css 提取工具
• Clean-webpack-plugin: 清理 webpack 打包结果
• Speed-measure-webpack-plugin: 监控 webpack 打包耗时
• webpack-bundle-analyzer: 可视化 webpack 输出模块的体积

webpack loaders 文档

• file-loader: 把文件拷贝到输出文件夹中, 并在代码引用文件的位置修改文件输出路径
• url-laoder: file-loader + 把小文件转成 base 64 的能力
• image-loader: 加载并压缩图片使用
• babel-loader: 转码高级 js 语言
• ts-loader: 转码 ts
• style-loader / css-loader / postcss-loader / less-loader / sass-loader
• eslint-loader: 检查代码语法
• vue-loader: 解析 .vue 单文件
• cache-loader: 可以用于缓存其他 loader 生成的文件, 优化打包速度
• exports-loader: 将原本没有导出语句的模块导出出来

  1 2 3 4 5 6 7 8 9 10 11 12 13

  // hello.js window.hello = () => console.log('hello world') // a.js import {hello} from './a.js' hello() // 配置文件 { test: require.resolve('./hello.js'), loader: "exports?hello" } // 其实相当于在 hello 中添加了一行导出语句 // export const hello = hello // 所以在 a.js 中就可以直接引用了

• imports-loader: 相当于 exports-loader 的逆运算, 你可以通过这个给指定模块添加一些 import 语句, 可以用在给模块添加通用依赖
• expose-loader: 有些库(例如 webuploader)需要全局的 jQ 对象, 但是我们并没有使用 cdn 的方式导入 jq. 会导致三方库访问不到报错. 测试就可以使用 expose-loader 将模块化的 jQ 对象挂载到全局 ~

  1 2 3 4

  // 使用 expose-loader import "expose-loader?exposes=$,jQuery!jquery" // 这样就会在 window 上添加 $ 和 jQuery 变量, 指向 node_modules 中的 jq

• thread-loader: happy-pack 官方推荐的替换方案, 就是开启多进程编译用的 loader