什么是BFC
什么是BFC BFC 全称为块级格式化上下文 (Block Formatting Context) 。BFC是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。可以说BFC就是一个作用范围，把它理解成是一个独立的容器，并且这个容器里box的布局与这个容器外的box毫不相干。
触发BFC的条件
根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属 ...
vue-cli 3/4兼容Android低版本白屏问题
问题描述： 运行很久的H5页面，突然大量用户反馈打开页面白屏，根据多方问题排查 最终确定是Android版本导致的 目前已知Android6.0运行是OK的 Android5.0环境允许白屏 ，具体原因是低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性，所以报错。
根目录下新建 .babelrc 文件
1234567{ "presets": ["@babel/preset-env"], "plugins": [ "@babel/plugin-transform-runtime" ]}
修改 babel.config.js
1234567891011121314module.exports = { presets: [ [ '@vue/app', { useBuiltIns: 'entry', polyfills: [ 'es6.promise ...
CSS八种让人眼前一亮的HOVER效果
CSS八种让人眼前一亮的HOVER效果本文不是原创，原文链接请戳文末链接。
一.发送效果HTML1234567<div id="send-btn"> <button> // 这里是一个svg的占位 Send </button></div>复制代码
CSS1234567891011121314151617181920212223242526272829303132333435363738394041#send-btn{ display: flex; align-items: center; justify-content: center; height: 100vh;}button { background: #5f55af; border: 0; border-radius: 5px; padding: 10px 30px 10px 20px; color: white; text-transform: uppercase; font-weight: ...
es6实用小技巧
元素交换（利用数组结构）1234let a = 'world', b = 'hello'[a, b] = [b, a]console.log(a) // -> helloconsole.log(b) // -> world
单条语句123456// 寻找数组中的最大值const max = (arr) => Math.max(...arr);max([123, 321, 32]) // outputs: 321// 计算数组的总和const sum = (arr) => arr.reduce((a, b) => (a + b), 0)sum([1, 2, 3, 4]) // output: 10
数组拼接123456const one = ['a', 'b', 'c']const two = ['d', 'e', 'f']const three = ['g', 'h ...
mysql常用操作
123452. mysql删除数据 DELETE FROM table_name [WHERE Clause] 如：
DELETE FROM table_name WHERE tutorial_id=3;
12345671. mysql link过滤 SELECT field1, field2,…fieldN table_name1, table_name2…WHERE field1 LIKE condition1 [AND [OR]] filed2 = ‘somevalue’ 可以使用LIKE子句代替等号(=)， 当LIKE连同%符号使用，那么它就会像一个元字符的搜索，可以指定一个以上的条件使用AND或OR运算符，WHERE… LIKE子句可以使用SQL命令的DELETE 或 UPDATE ，也可以指定一个条件 如：
SELECT * from table_name WHERE tutorial_author LIKE '%aul';
1231. mysql ORDER BY排序 SELECT field1, field2,…fieldN tabl ...
css基础温故
三栏布局题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为 300px，中间自适应。解答：可以有很多种布局方式，这里列出五种：float布局，absolute布局，flex布局，table布局，grid布局，代码如下：
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416 ...
mysql连接池的premise封装
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051新建db.js， 内容如下：const mysql = require('mysql');// 创建连接池const pool = mysql.createPool({ connectionLimit: 5, host: process.env.dbHost, user: process.env.dbUser, password: process.env.dbPassword, database: process.env.dbDatabase, multipleStatements: true});let query = function (sql, values) { // 返回一个 Promise return new Promise((resolve, reject) => { pool.getConnecti ...
mac小技巧之zip加密解密
1.加密：
123456789101112131415161718192021222324252627281.进入文件目录> cd xxx(文件目录)只压缩单个文件zip -e xxx.zip yyy压缩文件夹zip -e -r xxx.zip yyy根据提示输入密码和确认密码即可完整的命令行及注释zip -q -r -e -m -o xxx.zip yyy-q 表示不显示压缩进度状态-r 表示子目录子文件全部压缩为zip //这部比较重要，不然的话只有something这个文件夹被压缩，里面的没有被压缩进去-e 表示你的压缩文件需要加密，终端会提示你输入密码的-m 表示压缩完删除原文件-o 表示设置所有被压缩文件的最后修改时间为当前压缩时间当跨目录的时候是这么操作的zip -q -r -e -m -o ‘\user\someone\syyy\xxx.zip’ ‘\users\yyy’
1.解密：
1unzip FileName.zip
原生（Android iOS）webview与js（vue）交互
1.Vue和原生（ios和安卓）的交互（第一种方法）一、原生调用Vue方法1、Vue123456789101112131415mounted() { //将要给原生调用的方法挂载到 window 上面 window.callJsFunction = this.callJsFunction},data() { return { msg: "哈哈" }},methods: { callJsFunction(str) { this.msg = "我通过原生方法改变了文字" + str return "js调用成功" }}
在 methods 中定义一个供 Android 调用的方法 callJsFunction(str) , 并可接收一个参数 str，然后改变页面中的文字。
如果只是在 methods 中定义方法，原生调用会找不到这个方法。所以要在页面加载的时候将方法 ...
vue中使用svg
先安装svg-sprite-loader
1npm install svg-sprite-loader --save
vue.config.js
12345678910111213141516171819202122232425const path = require('path')module.exports = { chainWebpack: config => { const svgRule = config.module.rule('svg') // 清除已有的所有 loader,否则接下来的 loader 会附加在该规则现有的 loader 之后。 svgRule.uses.clear() svgRule .test(/\.svg$/) .include.add(path.resolve(__dirname, './src/assets/icons'))// 配置icons的目录 .end() .use('sv ...
