雪之樱的小站

前言这是一篇笔记，因为一直对这部分的知识看了就忘，今天闲着无事翻了翻不少资料，所以有了这篇文章 怎么理解BFC首先，我们要知道BFC的全称是Block Formatting Context，翻译成中文是块级格式化上下文，这里介绍下怎么理解Formatting Context，Formatting Context实际上是一种上下文环境，在这个上下文里的元素会与外界隔离，并且按照这个上下文里的规则排序和渲染，Block Formatting Context就是一种上下文，其他上下文还有 Inline formatting context : 行内格式化上下文 flex formatting context : 设置了display为flex创建的上下文 grid formatting context : 设置了display为grid创建的上下文 怎么创建BFC常见： 根元素（html元素） 浮动元素（元素的 float 不是 none） 绝对定位元素（元素的 position 为 absolute 或 fixed） overflow 值不为 visible 的块元素 行内块元素（元 ...

序绝了，框架用多了原生基本都不记得了，今天刷到了这个题顺手写篇博客 正文事件流的阶段DOM事件流分为三个阶段：捕获阶段、处于目标阶段、冒泡阶段。DOM事件流会先调用捕获阶段的处理函数，然后调用目标阶段的处理函数，最后调用冒泡阶段的处理函数。 在这里，1-3是捕获阶段，4-5是处于目标阶段，6-8是冒泡阶段 绑定事件的方法HTML内联绑定1<div id="box1" onclick="console.log('box1 内联绑定')"></div> DOM属性绑定1234let box1 = document.querySelector("#box1");box1.onclick = function () { console.log('box1 DOM属性绑定');} 通过addEventListener绑定为什么不看看万能的MDN呢 不过方便懒得跳转的同学，我贴心的截了张图(其实主要是这个函数太常用了感觉没必要说明用法) ti ...

序用惯了vue用react的生命周期总有一丝怪异啊，不过这并不妨碍我记点笔记 生命周期仅存在于类组件中，函数组件每次调用都是重新运行函数，旧的组件会被立刻销毁 旧版生命周期总览旧版生命周期对应React的版本小于16.3 constructor(props, context, updater)React借用class类的constructor充当初始化钩子。 React规定constructor有三个参数，分别是props、context和updater。 props是属性，它是不可变的。 context是上下文 updater是包含一些更新方法的对象，this.setState最终调用的是this.updater.enqueueSetState方法，this.forceUpdate最终调用的是this.updater.enqueueForceUpdate方法，所以这些API更多是React内部使用，暴露出来是以备开发者不时之需。 在React中，constructor需要先调用super(props)，用于初始化this和props，详情可以看这里 constructor生命周期 ...

水平居中行内元素-使用text-aligin123.parent { text-align: center;} 块级元素-使用margin子元素没有设置float123.son { margin: 0 auto;} 子元素设置了float123456789.parent{ width: fit-content; margin: 0 auto;}.son { float: left;} 块级元素-使用定位12345.son { position: absolute; left: 50%; transform: translate(-50%, 0);} 块级元素-使用grid1234.parent { display: grid; justify-content: center;} 垂直居中行内元素-line-height1234567.parent { height: 高度x; ...

HTMLCSS前端常见的数值单位 px：绝对单位，页面按精确像素展示。 em：相对单位，按自身的font-size计算 rem：相对单位，相对根节点的字体大小来计算 vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。 vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。 vmin：vw和vh中较小的那个。 vmax：vw和vh中较大的那个。 %:百分比 display: none, visibility: hidden, opacity: 0的区别 在DOM树中的处理 是否占据空间 是否可以点击 性能 对后代的影响 display: none 从树中移除 不占空间 不能 触发回流 全部不能显示 visibility: hidden 不从树中移除 占据空间 不能 触发重绘 可以设置visibility为visible来显示 opacity: 0 不从树中移除 占据空间 可以 触发GPU硬件加速 全部不能显示 回流和重绘 css居中总结https://www.sakura-snow.com/archives/615 ...

序这是一个非常基础的redux教程，在我学redux时，发现无论是官方文档还是其他的博客，均会先讲一堆redux的设计思想，然后抛出一堆新概念看着脑壳疼，所以我打算写一篇非常基础的教程，没有花里花哨的，只是讲讲最简单的使用，至于思想啥的，掘金一搜一大把啦。所以这篇文章只是追求用最简单的例子来介绍API，不会讲的太深，就酱。 reduxredux和react没有太大的关系，它只是一个单独的库，你可以随便在哪个地方使用它，它的主要用途我觉得有两点 便于多组件跨级间共享数据 便于提供规范统一的数据源管理 先用一张图介绍redux中的几个重要角色 store：顾名思义，是用来保存数据的 action：redux不允许直接操作数据，修改仓库的数据需要派发一个action，这个action用于标识怎么修改数据 reducer：reducer用于根据action的类型来对数据进行具体的处理 我们来看一个简单的例子 1234567891011121314151617181920212223242526272829303132333435363738import {createSto ...

序一般来说，在使用http协议进行数据交换时，数据都是明文传输的，这就给数据的安全性带来了很大隐患，中间很容易被截获，中间人很容易查看到里面的内容和篡改内容，所以，https出现了，它会对传输的内容进行加密，让数据传输变得更安全，减少遭受中间人攻击的可能。 人物介绍 王尼玛：单身汪，打算今天和他的女神王尼美表白（客户端）王尼美：王尼玛喜欢的人（服务器）隔壁老王：喜欢搞事的人（中间人） 不用加密的后果王尼玛给尼美发了条我爱你的信息，但被隔壁老王截获了，老王心生一计，于是把信息替换成了我恨你，尼美看到后非常生气，于是把尼玛拉黑了 这个故事告诉我们数据传输一定要好好加密，确保两人之间的交流只有自己和对方能看懂，同时别人也不能乱改，那么怎么加密呢 https如何加密对称加密对称加密：产生一个密钥，可以用其加密内容，也可以用它来解密内容 在这种加密方式中，王尼玛会先向王尼美询问密匙，然后王尼美告知密匙，之后的内容都会使用这个密匙加密 但这种方式并不靠谱，因为中间人一样可以拿到密钥，依然可以进行加密和解密，也依然可以篡改内容 因为老王保存了秘钥，所以成功的替换了内容 所以这种加密方式并不 ...

一个悲伤的故事，前几天我下了一个ts执行插件，然后，我的webstorm就把我项目里的所有vue和ts文件全部编译了一遍，生成.js和.map文件 我试了重开软件重启电脑重装系统，发现均没有什么效果 最后我发现了是这个配置的问题，关掉就好了 所以为什么这东西开了会编译.vue的的 令人迷惑

序最近整了个移动端的项目，用的还是Vue，多少在适配上也踩了点坑，所以，就分享一下适配的操作 使用rem.ts新建rem.ts 12345678910111213141516// 基准大小const baseSize = 32;const designDraft = 750;// 设置 rem 函数function setRem () { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientWidth / designDraft; // 设置页面根节点字体大小 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'}// 初始化setRem();// 改变窗口大小时重新设置 remwindow.onresize = function () { setRem()}; 在main.ts中引 ...

序还记得我刚开始和后端同学合作开发时，每次解决跨域问题都是一段痛苦的经历，经常有这样的对话 我：在，CORS开了吗对方：没呢，这就开…几个小时后我：开了吗？对方：开了开了我：为什么我这里不行的？…几个小时后对方：你再试试我：还是不行？？….我：好了好了大佬nb 当时的我不过后来这样的事情也渐渐莫得了，应该是后端同学终于成为了后端大佬吧 再后来，我学了nodejs，发现这玩意还有点复杂，所以整篇博客记录一下，不然万一明年师妹来问我CORS我不会那多尴尬（假装有师妹） CORS为什么要有CORS要知道为什么要有CORS，我们需要了解什么是同源策略。所谓的同源策略是一种安全机制，为了预防某些恶意行为（例如 Cookie 窃取等），浏览器限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。而满足同源要具备三方面：协议相同、域名相同、端口相同。 如果对http://domain.com:80/dir/index.html 来进行同源判断 http://domain.com/dir2/info.html（同源） https://domain.com/dir/index.html（非 ...