原文见: https://www.cnblogs.com/libin-1/p/7098468.html 和 https://www.jianshu.com/p/acf76871d259 ##BFC定义 在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context) 是按照块级盒子布局的。W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions）， 以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。 一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 1、float的值不是none。 2、position的值不是static或者relative。 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex 4、overflow的值不是visible BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 ##BFC的作用 ######1. 清除内部浮动 我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。 解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。 ######2. 垂直margin合并 在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 折叠的结果： 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 两个外边距一正一负时，折叠结果是两者的相加的和。 这个同样可以利用BFC解决。关于原理在前文已经讲过了。 ######3. 创建自适应两栏布局 在很多网站中，我们常看到这样的一种结构，左图片+右文字的两栏结构。

首先在 mounted() 中判断了路由, 实现高亮, 后来发现刷新才有用, 直接 router.push 过去的链接则不生效 监听路由变化, 执行同样的判断 mounted() { this.initHighlight() }, watch: { "$route"() { this.initHighlight() } }, methods: { // 导航高亮 initHighlight() { if (this.$route.name == 'route1') { this.active_id = -2 } else if (this.$route.name == 'route2) { this.active_id = -1 } else if (this.$route.name == 'route3') { this.active_id = this.$route.params.navid } else { this.active_id = 0 } } } 参考自: segmentfault

错误情况 在 assets 下新建 common.styl 样式, 在 App.vue 的 style 标签引入后. 在没有变量的情况下可以全局使用, 有变量时, 则变量不生效 解决办法 不需要在 App.vue 中引用 在 vue.config.js 中引用 module.exports = { css: { loaderOptions: { stylus: { 'resolve url': true, 'import': [ './src/theme', './src/assets/css/public/common' ] } } } }

当父(祖)元素使用了 transform 后, 当前元素的 position 会发生改变, 其参照父元素进行定位, 而非 window 窗口 参见: https://www.jianshu.com/p/4f77fa62e14b

1. 每页表头问题 参考: The Ultimate Print HTML Template with Header & Footer | by Idan Cohen | Medium 使用 table 中的 thead 会在每页打印其中的内容, 而不需要打印页眉页脚的页面(头2页, 3页等), 继续使用 div static 布局 2. table row 被分到两页的问题 对 tr 使用 break-inside-avoid, break-after-auto 参考: How to Handle Page Breaks when Printing a Large HTML Table

程序语言支持匿名函数时, 可以由匿名函数形成闭包 闭包的作用 在函数外部使用函数内部的变量 函数内部变量的持久化 参考cnblog: 匿名函数，闭包

想要 结果为 <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> 操作 : div{$}*9 参考cnblog: VsCode中使用Emmet神器快速编写HTML代码

要改变的是样式表, 如: <style> a.active { color: red; } </style> <script> document.styleSheets[0].add('a.active', 'color: blue !important') <script> 参考cnblog: JS设置CSS样式的几种方式

背景: 打开一个网页 havey.com, 使用不了 F12 解决办法1: 使用浏览器设置栏, 打开开发者工具, 设置->更多工具->开发者工具 解决办法2: 在页面还没完全打开时, 快速按下 F12 解决办法3: 命令行启动浏览器, 携带参数, 强制打开所有页面的 devtools chrome.exe –auto-open-devtools-for-tabs –user-data-dir=./ 参考 it-refer.com

背景: 项目安装了 browserify –save-dev, 如何在命令行中使用这个命令 这个命令的位置在 node_modules/.bin/ 目录下, 可以在终端使用 node_modules/.bin/browserify --version 也可以在 package.json 中使用 "scripts": { "prebuild": "rm -rf ./js/dist/*", "build": "browserify ./js/src/app.js -o ./js/dist/bundle.js" } 参考自阮一峰博客: npm scripts 使用指南