line-height英文字体四线 基线:创建字体的基准之线,是小写字母 x 的下边缘; 中线:小写字母 x 的上边缘； 顶线:文字的最上边缘 底线:文字的最下边缘 综合 1 和 2 可发现小写 x 对于英文字母的设计非常重要，所以设计字体一般会先设计出 x，再设计其他文字 content area每一个文字都有一个”内容区域 content area”的矩形盒子将文字包裹在其中;“内容区域”的高度就是 font-size; 盒子 每一行文字都会产生一个行框(line boxes); 每个行框(line boxes)中又包含一个个的行内框(inline boxes);行内框(inline b ...

BFC定位方案(positioning scheme)布局的核心 html 中的元素是一个一个的盒子 布局的核心是如何将一系列将盒子放在x-y-z坐标系的合适位置上 x、y的坐标其实是由定位方案(positioning scheme)来决定的； 定位方案是什么 定位方案是 css 布局的一个最高层抽象，确定了定位方案后，其可以进一步被一些特殊的布局模式(layout modes)修改，例如display:table，display:inline-table； 哪怕最新的布局模式flexbox、grid都属于某一定位方案(normal flow)中 定位方案的分类 css2.1 中确定了三种 ...

webpack test、include、exclude介绍 webpack module rules中的test、include、exclude都是针对处理当前rule的loader做范围限制的，换句话说是做范围匹配的 loader会针对依赖图中的所有module运行匹配逻辑，如果匹配了，则用当前loader进行处理 三者可单独指定，也可同时指定12345678910111213141516// webpack.config.jsmodule.exports={ module:{ rules:[ { ...

hash、chunkhash、contenthashhash hash是跟项目构建挂钩的，只要项目中没有文件发生变化，hash就不会改变12345678910111213141516171819202122232425262728293031323334353637383940const path = require('path')const ExtractTextPlugin = require('extract-text-webpack-plugin')const resolve = _path => path.resolve(__dirname, _path)module.expo ...

module、chunk、bundlemodule 对于webpack来说，所有的资源(.js、.css、.png)都是module .js文件webpack原生可以处理，其他类型文件，需要通过loader进行转换，然后交给webpack处理 webpack配置中，可以通过module字段，对不同module使用不同的rule处理1234567891011module: {rules: [ { test: /\.css$/, use: [ { loader: "styl ...

配置stylelint并在保存时自动修复安装 vscode安装插件stylelint-plus，其支持autoFixOnSave，其它插件不支持 插件关键配置123456789101112131415// * ------------------  // * stylelint相关  // * 主要思路：  // * 使用vscode插件stylelint-plus插件，并开启autoFixOnSave  // * 由于stylelint-plus内部自带stylelint，项目中可不需要再安装stylelint包  // * stylelint-plus机制和vscode eslint插件机 ...

hashchange、beforeunload、popstatehashchange 事件触发时机 在页面 hash 片段(即 URL 中#和#后面的部分)改变时触发 hash（#）是 URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP 请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置。(hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中。它是用来指导浏览器动作的，对服务器端完全无用， ...

Vue、Vue.extend、Vue.component、vm.mixins、vm.extends的区别及选项合并策略Vue、Vue.extend、Vue.component、vm.mixins、vm.extends的区别Vue Vue构造器(类)主要用来创建vue根实例，参数是一个选项对象； vue中组件是一个带有名字的可复用vue实例(组件也是一个个的vue实例)，其本质也是借助Vue构造器(类)来生成的，所以组件定义的参数和Vue构造器需要的参数基本一致，仅有的例外是像el这样根实例特有的选项。 1234new Vue({ el:'#app', render:h=& ...

git提交规范Commit Message规范 社区推荐 Conventional Commits 此提交风格最初用angular，后来独立开发成一个规范 很多开源项目使用此提交风格，如vue Conventional Commits介绍12345<type>([optional scope]): <description>// 空一行[optional body]// 空一行[optional footer(s)] 包含header、body、footer header必填 body、footer可省略 header包含以下几个部分 type 提交类型 必 ...

npm 发包流程总结注册npm账号 https://www.npmjs.com/signup package.json中指明必要字段 name、version是必须的，缺失将无法发布 main指向入口文件，一般为commonjs、esm格式 module指向esm格式入口文件 unpkg字段 发布到npmjs.com中的包会自动同步到unpkg.com上 通过unpkg字段指明unpkg.com应该如何查找入口文件 一般为umd格式 repository 1234"repository": {    "type": "git",    "url": "git+https://g ...