CodingWithAlice

我的一方小天地，如果对你有帮助，那真的太好了

事件流 + 事件模型

事件流 + 事件模型一、事件流事件捕获：与事件冒泡相反，事件最开始由不太具体的节点最早接受事件, 而最具体的节点最后接受事件 window -> document -> html -> body -> … 事件冒泡：从下往上的传播方式 - 事件最开始由最具体的元素然后逐渐向上传播到DOM中最高层的父节点二、事件模型通过监听函数对事件作出...

Posted by CodingWithAlice on July 1, 2021

69. x 的平方根

69. x 的平方根题目：计算并返回 x 的平方根，其中 x 是非负整数。由于返回类型是整数，结果只保留整数的部分，小数部分将被舍去。总结：逻辑是一样的，找到区间 [i, i+1) // 方法一：执行时长稍长，但内存占用小 function sqrt(x) { const mid = Math.floor(x/2) + 1; // 优化点，取 floor l...

Posted by CodingWithAlice on June 29, 2021

跨页面通信

跨页面通信两个页面之间的通信会涉及到同源策略的限制，所以按照是否满足同源策略的限制分成两大部分来看。『同源页面通信』： 1、广播式通信 - 监听同一频道 BroadcastChannel 『核心方法：频道.postMessage(‘a’) + 频道.onmessage = (e)=>{}』 2、localStorage - 只响...

Posted by CodingWithAlice on June 29, 2021

子盒子在父盒子中水平垂直居中有几种方法？

子盒子在父盒子中水平垂直居中有几种方法？ <head> <style> .father { width: 800px; height: 650px; } .child { width: 300px; height: ...

Posted by CodingWithAlice on June 29, 2021

CSS性能优化

CSS性能优化一、写法优化简化选择器：id选择器不用嵌套；减少 * 通配符、[hidden=‘true’] 属性选择器；利用继承机制，少写新类名【CSS 选择器是从右向左进行匹配的，避免匹配的开销】尽量避免重排：重新计算元素位置和几何结构减少使用昂贵属性 - 需要浏览器进行操作或计算的属性：box-shadow、border-radius、透明度、:nth-chil...

Posted by CodingWithAlice on June 28, 2021

flex布局 - 常见布局

flex布局 - 常见布局参考实例篇第二部分：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 1-2/6、百分比布局、左侧固定宽度右侧自适应布局都可以利用 flex 实现 .section1 { flex: 0 1 50%; } .section2 { flex: 0 1 100px; } 3/6、圣...

Posted by CodingWithAlice on June 27, 2021

css3有哪些新特性

css3有哪些新特性详细可以参考：https://segmentfault.com/a/1190000010780991 以下记录一些容易混淆/遗漏的特性： 1、过渡：transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0) /*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡*/ transition：wid...

Posted by CodingWithAlice on June 27, 2021

CSS 选择器 - 权重/匹配方式

CSS 选择器 - 权重/匹配方式一、权重 id #id > class .left、伪类 :hover、属性 a[href]/a[class=“qiu”] > 标签类 div、伪元素 ::after > 通配符 * 注意：『!important > 行内样式 > 内联/外联样式』当两个样式都使用 !important...

Posted by CodingWithAlice on June 27, 2021

flex布局

flex布局总结：主要优势：便捷的元素排列：水平/垂直/水平反转序列/垂直反转序列 flex-direction 空间分配：flex-grow、flex-shink、flex-basis + 处理空白空间：justify-content 定义主轴对齐方式响应式布局：自适应调整、元素顺序调整 order fle...

Posted by CodingWithAlice on June 26, 2021

Position属性 - 占位？相对什么定位？

Position属性 - 占位？相对什么定位？直接参考：MDN 介绍 Position有五个属性值，分别是static 、fixed、 relative 、absolute、sticky； static relative absolute fixed sticky ...

Posted by CodingWithAlice on June 26, 2021