06 2021 档案
摘要：外轮廓 属性与border类似 style、width、color 但可以留空，有默认值 最大的特点是不占据空间，可用于突出 例：input 获得焦点时默认会显示outline 设值 0 none 可取消outline MDN-outline
阅读全文
摘要：在每一层中，下列的值可以出现 0 次或 1 次： <attachment> <bg-image> <position> <bg-size> <repeat-style><bg-size> 只能紧接着 <position> 出现，以"/"分割，如： center/80%.<box> 可能出现 0 次、
阅读全文
摘要：:root { --border-width: .04rem; } table { border: var(--border-width) solid black; border-collapse: collapse; border-radius: .15rem;/*圆角*/ } td, th {
阅读全文
摘要：calc() 计算动态长度 calc(xxxx - xxxx) + -, *, / + 和 - 运算符的两边必须要有空白字符。 任何类型数值都可以使用 calc() 函数进行计算，会自动换算，如百分比与像素值 calc 通过 * -1 实现正负值的转化 calc(var(--circle_radiu
阅读全文
摘要：值描述normal默认。设置合理的行间距。跟浏览器有关 （firefox 1.2）number设置数字，此数字会与当前的字体尺寸相乘来设置行间距。length设置固定的行间距。%基于当前字体尺寸的百分比行间距。inherit规定应该从父元素继承 line-height 属性的值。 在进行精准的设计时
阅读全文
摘要：原因： 源于inline-block样式的弊端 当元素有行内元素的特性时，元素间的空白符都会被解析，回车换行会被解析成一个空白符(此空白符还无法通过控制台分析) 如果字体不为零那么就会占一定的宽度，并且这些间距会随字体的大小而变化 解局办法：就是修改行内块inline-block为块级block，或
阅读全文
摘要：原因：默认行高line-height的存在 可以设置行高为1 （对非块级元素无效）
阅读全文
摘要：原因：父元素没有设置相应的border和padding 三种解决方法: 给父元素加边框给父元素加内边距让父元素变成独立的BFC (BFC内部元素不会影响外部布局，也就不会穿透了)
阅读全文
摘要：可选参数 [, thisArg] 循环中 this 指向 如果使用箭头函数表达式来传入函数参数， thisArg 参数会被忽略，因为箭头函数在词法上绑定了 this 值。 数组相关遍历方法 回调函数 参数为 item index array .forEach() 当元素为引用类型时，callback
阅读全文
摘要：浅拷贝与 深拷贝 的区别在于是否共享相同的引用 因为存在共享引用，浅拷贝的修改可能造成源被修改。 js 内置对象复制操作 ...展开语法、Array.prototype.concat()、Array.prototype.slice()、Array.from()、Object.assign() 和 O
阅读全文
摘要：当非滚轮触发页面滚动条变化时 决定变化的行为 auto直接跳跃变化 smooth流畅过渡
阅读全文
摘要：Trident、Gecko、Webkit、Blink Blink 是 webkit 的分支内核 IE 浏览器内核：Trident 内核Chrome 浏览器内核：webkit 2013年以后 采用 BlinkOpera 浏览器内核：最初是自己的Presto内核，（2016年奇虎360和昆仑万维收购）后
阅读全文
摘要：设置 行内元素盒模型 与其 行内元素容器 垂直对齐方式。 只对行内元素、行内块元素和表格单元格元素生效。 基线 小写字母“x”的最下方 恰好是基线 中文的基线会略往上 图片和overflow:hidden样式的元素的基线位置是最下方(当有文字时图片下方就会存在间隙) 参考博客 DOM操作: elem
阅读全文
摘要：参考文章 参考视频 main { height: 100vh; scroll-snap-type: y proximity|mandatory; /*proximity是接近时触发翻页，mandatory是强制翻页*/ overflow-y: scroll; } /*隐藏滚动条*/ main::-w
阅读全文
摘要：windows下 按 win + V 可以打开历史剪切板
阅读全文
摘要：/* 滚动条整体部分 */ div::-webkit-scrollbar {} /* 滚动条里面的滑块 */ div::-webkit-scrollbar-thumb {} /* 滚动条的轨道的两端按钮 */ div::-webkit-scrollbar-button {} /* 滚动条的滑槽 */
阅读全文
摘要：在 function 后面，函数名之前有个 * ； 通过 yield 关键字，把函数的执行流挂起 要调用遍历器对象Iterator 的 next 方法或for of，指针就会从函数头部或者上一次停下来的地方（yield ‘value’；）开始执行
阅读全文
摘要：js一个对象的行为取决于它自身的属性及其原型的属性 class class 关键字 定义类 类定义不会被提升，这意味着，必须在访问前对类进行定义，否则就会报错。 类中方法不需要 function 关键字。 方法间不能加分号。 Class 内部只有静态方法，没有静态属性。 static 公共属性 .p
阅读全文
摘要：生成器 yield function * xxx() { yield Promise.resolve('海胆') yield '海星' } .next() 每次访问一个 yield 迭代器 Symbol.iterator 对可便利对象创建一个迭代器 通过.next() 方法向下迭代 { value：
阅读全文
摘要：ES5数组 创建数组 Array.of() 参数中所有值作为元素形成数组 Array.from(arrayLike, mapFn, thisArg) arrayLike 数组对象或可迭代对象 可选参数mapFn map 函数，用于对每个元素进行处理，放入数组的是处理后的元素thisArg 指定 ma
阅读全文
摘要：参考博客 参考博客2 MDN 块级格式化上下文 块级渲染区域 与其他渲染区域 不重叠 可嵌套 一个独立的BFC 需要具备以下条件中的一条 根元素<html>浮动元素float （float：非none）绝对定位或固定定位 （absolute 或 fixed）行内块 inline-block表格单元格
阅读全文
摘要：MDN 继承与原型链 参考博客 简单易懂的视频 ECMAScript 标准，符号 obj.[[Prototype]] 用于标识 obj 的原型。 内部插槽 [[Prototype]] 可以通过 Object.getPrototypeOf() 和 Object.setPrototypeOf() 函数来
阅读全文
摘要：参考文档 使用方法： ```mermiad 语句 ``` 注释 %% 流程图 graph TB(TD)/BT/LR/RL // 定义图像排列顺序 连接线 --> 实线箭头 实线 -.> 虚线 -.- 虚线 ==> 粗实线 添加连线标签 直接加在线中，两侧虚伪两符号在末尾加，需使用|| 分隔开含空格等
阅读全文
摘要：Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据。浏览器会存储 cookie，每次http请求都会将 cookie 携带传回给服务器，但客户端也可以设置cookie（也就是说可以被篡改）。 Cookie 的大小和数量被限制。一般为不超过 4KB，不超过20个 同源策略：同域名 // 存
阅读全文
摘要：好文链接 MDN 闭包 参考视频 静态作用域 又叫 词法作用域（Lexcical Scope）： 在编译时就确定了作用域范围；动态作用域：变量引用跟变量声明不是在编译时就绑定死了的。在运行时，它是在运行环境中动态地找一个相同名称的变量。 js 属于函数式编程。 闭包 一个函数和对其周围状态（lexi
阅读全文
摘要：MDN Event Event 事件对象 鼠标 / 键盘属性 属性描述altKey“ALT” 是否被按下button哪个鼠标按钮被点击clientX鼠标指针的相对容器水平坐标clientY鼠标指针的相对容器垂直坐标ctrlKey“CTRL” 键是否被按下metaKey“meta” 键是否被按下rel
阅读全文
摘要：CSS 样式的继承规则 宽高的继承 宽度 子元素对父元素继承（子元素默认100%宽度） 高度 父元素会被子元素撑开 与文本相关样式，子元素默认会继承父元素 当 固定定位（fixed）和绝对定位（absolute）时，子元素不会继承父元素的宽度 当父元素为inline-block时，宽度会被子元素撑开
阅读全文
摘要：事件属性 改变 属性此事件发生在何时…onchange域的内容被改变 （<input>, <select>, 和 <textarea>）onresize窗口被重新调整大小 选择 属性此事件发生在何时…onfocus元素获得焦点onblur元素失去焦点onfocusin元素即将获取焦点时触发onfoc
阅读全文
摘要：setTimeout() 与 setInterval() window.setTimeout(function, milliseconds) // 在等待指定的毫秒数后执行函数。 window.setInterval(function, milliseconds) // 等同于 setTimeout
阅读全文
摘要：安装 node 官网 node -v 安装 @vue/cli npm install -g @vue/cli vue 命令 命令作用-V / --version获取版本信息create [options] create a new project powered by vue-cli-service
阅读全文
摘要：MDN CSS 层叠与继承 冲突 创建了应用于同一个元素的同一样式的多个规则时，只会生效一个，其他规则不生效，我们称之产生冲突 样式生效的判别依据 三步走： 资源顺序优先级重要程度 资源顺序 相同优先级的情况下，后创建的规则优于之前的规则（覆盖） 优先级 优先级顺序： 1.!important1-0
阅读全文
摘要：MDN CSS 值与单位 绝对长度单位 单位名称描述cm厘米mm毫米Q1 Q = 1/4 mmin英寸1 in = 2.54 cmpxpixel像素1 px = 1/96 in 低 dpi (每英寸的像素数) 的设备，1px 是显示器的一个设备像素ptpoint点1 pt = 1/72 inpc派卡
阅读全文
摘要：counter-reset - 创建或重置计数器 在父元素中定义一个计数器 counter-reset: sectioncounter-increment - 递增计数器值 在子元素中添加 对指定计数器进行累加 counter-increment: sectioncounter(section) 或
阅读全文
摘要：属性选择器 [属性=“属性值”] ~= / *= 表示包含|= / ^= 表示以其开头 ~= 和 |= 需要进行完整单词的匹配 [class*='box'] { } /* 选择了 类中包含 ..box.. */ $= 表示以其结尾 组合器 后代选择器 (空格)子选择器 (>)相邻兄弟选择器 (+)
阅读全文
摘要：MDN position position 定位 默认static （top，bottom等无效）绝对定位 absolute fixed相对定位 relative （偏移量）粘性定位 sticky 兼容性差（当页面发生滚动时，不会脱离视窗，直到容器离开视窗） 根据滚动位置在相对（relative）和
阅读全文
摘要：margin元素居中，仅仅对块元素有效 父级元素 文本居中 也可使 子级元素居中 display 属性： 值描述none此元素不会被显示block此元素将显示为块级元素，此元素前后会带有换行符inline默认。此元素会被显示为内联元素，元素前后没有换行符inline-block行内块元素。（CSS2
阅读全文
摘要：对象方式引入 <object> 元素 data <embed> 元素 空元素 src 音频标签 <audio> controls <source> src type <audio controls="controls" height="100" width="100"> <source src="s
阅读全文
摘要：只是一个容器，有一个基于 JavaScript 的绘图 API SVG 和 VML 使用一个 XML 文档来描述绘图。 API 通过 Canvas 对象的 getContext( "2d"/"webgl") 方法获得canvas的上下文用以调用各种api。 Canvas接口参考手册 MDN Canv
阅读全文
摘要：CommonJS 的 require(‘path’) node 的模块化是基于 CommonJS 标准的webpack 打包工具，可以识别转化 CommonJS 标准Browserify 一种 CommonJS 的浏览器实现 node require(‘path’) 路径描述xxxnode核心模块(
阅读全文
摘要：每个浏览上下文（Browsing context）都有一个活动文档的源（origin =>dom树）和一个记录所有展示文档的有序历史（history） MDN iframe iframe 表示嵌套的浏览器上下文 应用场景 在网页中嵌套网页srcdoc 属性 原版的v-html 配置 属性作用src页
阅读全文
摘要：table 表格 <table> 规定表格 - <caption> 规定表头 - <tr> 规定行 table-row - <th>规定行列标题格 table-header - <td> 规定普通格 table-data 表格划分 <thead> 通常存放 标题格 <tbody 存放内容 <tfoo
阅读全文
摘要：<img src="图片地址" usemap="#mapname" alt="" /> <map name="mapname"> <area shape="circle / rect" coords="x,y,14 / x1,y1,x2,y2" href ="目标地址" target ="_blan
阅读全文
摘要： 常规标签 h1~6 标题标签 1~6 字体大小依次递减 p 段落标签 <p> 一般浏览器有默认边距 a标签 链接标签 属性功能href链接内容 ”URL 或 #锚点id“target跳转方式 _blank/_b 新页面跳转 _self 本页面跳转（默认） 锚点标签 a标签可以通过name属性设置
阅读全文
摘要：属性描述accesskey规定聚焦元素的快捷键。 配合Alt或Shift+Alt使用class规定元素的一个或多个类名（引用样式表中的类）。dir规定元素中内容的文本方向。 ltr / rtl 注id规定元素的唯一 id。lang规定元素内容的语言。style规定元素的行内 CSS 样式。tabin
阅读全文
摘要：visibility: hidden; 占据布局，不响应事件 让元素变得透明 不透明度设置为0 opacity: 0; 会占据布局，同时响应各类事件 让元素缩小到0 将元素缩小到0 transform: scale(0); 进行遮蔽的方法 定位至底层 (需要有遮挡的层和父框) position: a
阅读全文
摘要：请始终在文档的首行声明文档类型： <!DOCTYPE html> 使用小写元素名，不要大小写混用使用小写属性名，不要大小写混用不要遗漏闭合标签</xxx>关闭空元素 <meta charset="utf-8" /> //不要省去'/' 属性值加引号始终对图像添加 alt 属性请始终定义图像尺寸。这样
阅读全文
摘要：浮动float 浮动的出现：最早使文字环绕图片，后来发现能很容易的实现元素并排显示 右浮动打破了常规流的布局 特点： 浮于页面之上，下面的元素会提高占据空位 浮动可以使行内元素拥有块框，也就可以设置宽高 元素浮动的影响： 子元素浮动父元素高度坍塌（父元素继承子元素高度）会对之后的元素产生影响 布局发
阅读全文
摘要：旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax。 设置/获取元素内文本 jQuery: 通过 .text() 方法 //设置 element.text("NewText"); //获取 var myText = element.text(); JavaScript:
阅读全文
摘要：数据在浏览器与服务器之间进行交换时只能是文本，JSON是一种具有特定格式的文本 JSON 类似 JavaScript 对象属性，名称（双引号）/值对由字段名构成 JSON和JS对象可以轻松实现相互转化，无需复杂的解析和转译 JSON.stringify() JSON.parse() JavaScri
阅读全文
摘要：Asynchronous JavaScript And XML 异步JS和XML 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）JavaScript 和 HTML DOM（显示或使用数据）Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON
阅读全文
