weixin_小白鼠的博客

过渡相关属性说明transition的优点在于简单易用，但是它有几个很大的局限。（1）transition需要事件触发，所以没法在网页加载时自动发生。（2）transition是一次性的，不能重复发生，除非一再触发。（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。

由于需要完整的路径，所以需要计算父级并传递给下一级，currentPath作为参数进行传递。定义一个函数，主要功能是处理每一个节点，由于收到的是一个数组，所以需要遍历数组。一个树形结构的数据，查找时以数组的形式返回所有含有关键字的完整路径。如果节点包含关键词就push到准备好的数组result中。函数递归，条件是含有children就继续递归遍历。首先定义数组并返回，接受的参数为关键词和一个数组。比如查找 “河”，返回。

iframe嵌入页面，有多个tab，切换tab修改iframe的src，显示不同的页面:切换tab，然后点击浏览器的返回，就会出现tab与页面内容对不上的情况：修改iframe的src，window.history历史记录中也会添加一条记录（动态切换iframe的src会导致增加一条iframe的历史浏览记录）：在切换src的时候把iframe给销毁再重新创建就行了。这样就是一个新的iframe，不会触发他的变更操作，也就不会往window.history中存入记录。

css主题切换的实现，不同的方式的具体实现以及不同的方式的选择；CSS变量+类名切换，CSS变量+动态setProperty，SASS的mixin混入+类名切换等主流实现方案

overflow:scroll – 只有超出了盒子才会有滚动条overflow:auto – 一直有滚动的盒子，只是超出了盒子才会出现滚动条滑块，可以滚动针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式。

important的优先级最高行内样式表：行内样式-style属性内部样式与外部样式：比较选择器的权重，选择器权重一样则是考虑解析先后，后面的覆盖前面的对与前面连个步骤之后仍然没有属性值的属性，如果可以继承，则使用继承值可以继承的样式有哪些？

当你在地址栏输入内容回车后，浏览器进程中的UI线程会捕捉输入内容，如果访问的是网址，会启动一个网络线程来进行DNS解析；后面连接服务器获取数据；如果输入的不是网址而是关键词，就会使用默认配置的搜索引擎来进行查询网络进程获取到数据后会使用safeBrowsing检查站点是否是恶意站点，如果是恶意站点则会提醒，阻止访问，当然你也可以强行访问（safeBrowsing是谷歌内部安全系统，比如检查数据来源ip是不是在谷歌黑名单内）

什么是BFC？怎么形成BFC？BFC的特点与规则；我们怎么利用它的特点解决一些问题，BFC在开发中的应用

的传统布局方案是基于盒状模型，依赖display+position+float方式来实现，灵活性较差；Flex是Flexible Box的缩写，意为”弹性布局”。Flex可以简便、完整、响应式地实现多种页面布局CSS3 弹性盒子是一种一维的布局，因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列弹性布局；通过给父盒子添加flex属性，来控制盒子的位置和排列方式父项属性用于整体的布局；子项属性用于实现子项的差异化，内部调整。

从分辨率、css像素到视口的学习，视口的分类，布局视口、视觉视口、完美视口的学习；分析浏览器的缩放以及窗口的变化对分辨率以及视口的影响；从媒体查询学习到适配的方案；

fileList对象表示用户选择的文件列表，每个文件都是一个file对象通过multiple属性，file控件允许一次放置多个文件。

分享至qq空间分享至新浪微博动态分享至微信利用qrcode生成二维码，微信扫码进入网页

mock的语法及使用如何在vue项目中使用mock有时后端接口还没有写好，前端开发进度比后端快，这是我们可以使用mock进行一个请求数据的模拟（并没有真的发请求，在请求发出去之前就被mock拦截，返回数据，所以在internet面板中看不到）安装mockjsnpm i mockjs在vue中使用mockjsimport Mock from "mockjs";import jsonInfo from "./jsonData.json"; // 这是自己写的一些json数据// mock直

页面卡顿的原因、排查及解决方案一、渲染不及时，页面掉帧1》网络请求太多，请求返回的数据比较慢接口返回慢的话，后端做些优化；前端适当做些缓存，减少不必要的重复的请求可以从调试工具中的Network查看请求情况2》回流和重绘多减少dom的操作，适当使用keep-alive,v-show等平时要养成良好的编码习惯3》dom节点太多，渲染的比较慢如果是数据确实太大的话，可能要从业务上调整一下，展示可能要改变下，比如说做分页什么的从数据上和页面显示上可以查看二、网页内存占用过高，运行卡顿有可能

fixed定位没有相对与浏览器可视窗口定位问题今天开发中fix定位的盒子出现了问题，记录一下问题描述想要实现的效果：绿色的盒子定位在顶部实际效果：固定定位的盒子相对于父盒子定位部分代码：father父盒子居中；son子盒子在父盒子中央；son的子盒子fixbox是固定定位，它的定位出现了问题<div class="father"> <div class="son"> <div class="fixbox"></div> <

鼠标相关知识pointer-events: auto; /* 默认 */pointer-events: none;auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。none——元素永远不会成为鼠标事件的target（目标）。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。实际上默认就可以穿透当前层，因为

if判断中的隐式转换​ const judgeTrueOrFalse = (a) => {​ if (a) {​ console.log("true");​ } else {​ console.log("false");​ }​ };​ judgeTrueOrFalse({}); // true​ judgeTrueOrFalse([]); // tru

实现左右布局的方案 <div class="box"> <div class="left"></div> <div class="right"></div> </div>想要的效果方案1：弹性布局 display:flex .box { background-color: pink; // 方便看效果 display: flex;

普通图片显示img标签图片1.不给盒子设置宽高，图片能够撑大盒子，完整1比1显示 <div class="box"> <img src="./test.jpg" alt="" /> </div>2.设置宽高（比图小），盒子不会被撑大，图片会超出盒子，但是超出部分仍然显示， .box { width: 300px; height: 300px; /* overflow: hidden

动态绑定属性1. style <div class="box" style="width:200px;height:200px" :style="flag ? 'background-color:green' : 'background-color:blue'" ></div> <button @click="flag = !flag">变色</button>2. class

css计算属性calc的使用基本使用规则1.计算时可带单位，可用百分比：px % em rem in mm cm pt pc ex ch vh vw vmin vmax2.支持 “+” , “-” , “*” , “/” 四则运算运算符与数字之间必须有空格加减是必须都带相同单位或百分比与一个带单位乘除是只能有一个带单位calc与括号之间不能有空格不能除以0 width: calc(300px - 100px); height: calc(90px /

vuex的基本使用安装vuexnpm install vuex --saveimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)vuex中的重要概念state用于存放变量mutations用于集中控制state中的变量只能进行同步操作且只有它能够直接操作state中的值actions用于执行异步操作，通过context对象可以调用mulation中的方法如果想要操作state，只能通过调用mutations中的

行内块元素的对齐场景今天在工作的时候想要将盒子对齐，将div设置成了inline-block，结果盒子并没有对齐 <div class="box"> <div class="first child"></div> <div class="second child">2</div> <div class="third child"></div> </div&

组件封装封装<template> <div class="box"> <button class="btn">{{ des }}</button> </div></template><script>export default { props: { des: { type: String } }, methods: {}}</script>

svg画图是一种基于 XML 语法的图像格式，全称是可缩放矢量图；体积较小，且不管放大多少倍都不会失真画基础图形 <body> <svg width="800" height="600"> <!-- 1、2 画圆 --> <!-- 圆心(cx,cy),半径r --> <circle r="100" cx="100" cy="100" fill="#2b85e0" stroke="red">

css伪类选择器nth-child作用：选择的是某个父盒子当中第几个或某几个某类型元素语法：ul li:first-child 选择ul中的第一个liul li:nth-child(n) 选择ul中的第n个li, 括号中n为数字ul li:last-child 选择ul中的最后一个liul li:nth-child(odd) 选择 ul中所有的奇数liul li:nth-child(even) 选择ul中所有的偶数liul li

调整盒子位置的方式1 边距margin/padding：标准流内调整,注意可能存在盒子塌陷的问题2 弹性布局flex：flex布局之后，就不用考虑盒子类型的概念了，行内元素也可以直接设置宽高了3 浮动float:特点：脱离标准流，不再保留原来的位置，其他盒子可能会占有它原来的位置缺点：无法撑开父盒子，脱标不占位，可能与其他内容重叠清除浮动：清楚浮动带来的影响，多种方法，给父盒子设置高度、clear:both、伪元素4 定位position：绝对定位的特点：脱离标准流，不再保留原来的位置

展开与收起定位加单行文本溢出处理<template> <div> <div class="firstBox"> <div class="texts"> ××××××××××××××××××××××××这里是文字××××××××××××××××××××××××× </div> <i @click="expand" class="expandBtn">{{ expend ?

数据与变量数据类型类型分类简单数据类型（基本类型）1）布尔值Boolean: true / false2）数值型Number: 所有数字3）字符串String: 带引号4）Undefined5）Null复杂数据类型（引用类型）对象 Object数组 Array函数 Function数据类型检测typeOf返回相关数据类型的字符串可以检测 Boolean Number String Undefined Function不能检测 Null ,返回Objectinst

created与mounted的执行顺序最近在工作中发现created 里面的代码不一定比mounted中的代码先执行，下面的代码打印结果是什么呢？export default { created() { console.log(1) this.printNum() console.log(3) }, mounted() { console.log(4) }, methods: { printNum() { se

watch监听基本数据类型的监听最基础的用法，默认情况下<template> <div class="watch"> <input type="text" v-model="msg" /> <h4>{{ title }}</h4> </div></template><script>export default { data() { return {

定位相对定位相对于自己原来的位置绝对定位1 绝对定位的定位规则：相对与最近一级有定位（绝对定位，相对定位，固定定位）的祖先元素2 具体值的定位原则：首先找到具有定位的祖先元素，然后该元素的最外边(可能是上top/下bottom/左left/右right)，包含margin值，距离祖先盒子的内边（对应的上下左右），包含padding,不含border的距离为这个值eg: 给了绝对定位，top值为10px;那么这个盒子顶部的最外边缘，将距离有定位的祖先元素的顶部内边缘10px3 正负问题：右为正，

数据处理API数组添加和删除数组元素(改变原数组)array.push() : 在数组最后面添加元素，返回新数组的长度array.unshift() : 在数组最前面面添加元素，返回新数组的长度array.pop() : 删除数组最后一个元素，返回被删除的数组元素，缺点是一次只能删除一个元素array.shift(): 删除数组的第一个元素，返回被删除的数组元素，缺点是一次只能删除一个元素array.splice(开始操作的索引，需要删除的元素个数，需要添加的元素)原数组发生变化，以

给组件设置样式不生效问题我们在使用组件或者自己写的标签样式不生效，可以从一下几个方面考虑，解决对象问题首先要检查自己设置的样式有没有设置在对应的对象身上，可以打开浏览器的开发工具，检查对象，该对象是否由你设置的属性比如说使用a-modal组件的使用，注意对话框的父盒子为body，如果我们选择的对象不对，设置的样式就肯定不会生效权重问题我们打开浏览器的开发工具，选择查看对象，filter过滤样式，查看生效的样式的权重，然后将自己设置的选择器权重高于当前生效的权重使用组件的深层选择器/deep

echart使用使用的基本步骤1 引入echart`import * as echarts from 'echarts'`2 准备盒子并初始化 echarts.init()`const myBar = echarts.init(document.querySelector('.bar1'))`3 设置配置项option所有的使用步骤都差不多，只是第三步不一样，显示出来的图形就不一样4 将配置项配置给我们的目标myBar myBar.setOption(opti...

盒模型与盒子类型两种盒模型的区别标准盒模型语法：box-sizing：content-box (没有设置的话默认就是这种盒模型)标准和模型，我们设置的width属性 width=内容的宽度 .standard { box-sizing: content-box; width: 200px; height: 200px; padding: 10px; border: 5px solid greenyellow; background-color:

html与csshtmlimg标签的title和alt有什么区别title是图片正常显示，鼠标放到上面就会显示，起到提示的作用alt是图片显示不了就显示的替代内容；alt 属性是一个必需的属性H5有哪些新特性1 语义化标签 通过标签就能大概了解整体页面的布局分布header网站的头部区域 nav 网站的导航 section网页的某一个模块footer 网页的底部 aside 网页的侧边栏 article 网页的文章页2 多媒体标签v