10 2019 档案
摘要：1. 传统布局与 flex 布局比较 传统布局 兼容性好 布局繁琐 局限性，不能在移动端很好的布局 flex 弹性布局 操作方便，布局极为简单，移动端应用很广泛 PC端浏览器支持较差 IE 11 或 更低版本，不支持或仅部分支持 2. flex 布局原理 flex 是 flexible Box 的缩
阅读全文
摘要：1.单独制作移动端页面（主流） 流式布局（百分比布局） 流式布局，就是百分比布局，也称为非固定像素布局 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充 流式布局方式是移动 web 开发使用的比较常见的布局方式。 max-width 最大宽度（max-heig
阅读全文
摘要：1. 视口：(布局视口(layout viewport)，视觉视口(visual viewport)，理想视口(ideal viewport)) meta 视口标签 <meta name = "viewport" content = “ width = device-width，user-scala
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title
阅读全文
摘要：1. 三维坐标系（里面的值不能省略，没有就写 0 ） x 轴：水平向右 注意：x 右边是正值，左边是负值 y轴： 垂直向下 注意：y 下面是正值，上面是负值 z轴：垂直屏幕 注意： 往外面是正值，往里面是负值 主要知识点： 3D位移：translate3d（x,y,z） 3D旋转：rotate3d（
阅读全文
摘要：1. 制作动画 先定义动画，再使用（调用）动画 使用 keyframes(关键帧)定义动画（类似定义类选择器） @keyframes 动画名称{ 0%{ width:100px; } 100%{ width:200px; } } 动画序列： 1. 0% 是动画开始，100%是动画完成，这样的规则就是
阅读全文
摘要：Document 会旋转的盒子 会缩放的盒子： 1 2 3 4 5 动画
阅读全文
摘要：1.transform（转换）可以实现元素的位移，旋转，缩放等效果（可以简单理解为变形） 移动：translate 旋转：rotate 缩放：scale 2. 2D 转换之移动 translate 可以改变元素在页面中的位置，类似定位。 语法： transform：translate(x,y); 或
阅读全文
摘要：1.盒子模型（box-sizing） CSS3 中可以通过 box-sizing 来指定盒模型，有两个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。 可分为两种情况： 1. box-sizing：content-box 盒子大小为 width
阅读全文
摘要：1、属性选择器 属性选择器，可以根据元素特定的属性来选择元素，这样就不用借助 类 或者 id选择器。 E [ att ] 选择具有 att 属性的 E 元素 例如：input [ value ] E [ att = 'val' ] 选择具有 att 属性且属性值等于 val 的 E元素 E [ at
阅读全文
摘要：1. 鼠标样式 cursor default： 小白（箭头）默认 pointer：小手 move：移动 text：文本 not-allowed：禁止 2. 轮廓线（表单外发光）outline 给表单添加 outline:0; 或者 outline:none; 可以去掉默认蓝色边框 3. 防止拖拽文本
阅读全文
摘要：1. 固定定位小技巧：把图固定在版心右侧位置 小算法： 1. 让固定定位的盒子 left：50%，走到浏览器可视区（也可是看做版心）的一半位置 2. 让固定定位的盒子 margin -left ：版心宽度的一半距离；多走版心宽度一半位置。 这样就实现了固定定位的盒子 贴着版心右侧对齐了 2.绝对定位
阅读全文
摘要：1.圆角边框 border-radius border-radius 属性用于设置元素的外边框圆角 语法：border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形，数值设置宽或高的一半，或者 50%； 矩形，数值设置高度的一半 2.盒子阴影 box-shadow b
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
阅读全文
摘要：1.动画实现原理 核心原理：通过定时器 setInterval() 不断移动盒子位置 实现步骤： 1.获得盒子当前位置 2.让盒子在当前位置加上1个移动距离 3.利用定时器不断重复这个操作 4.加一个结束定时器的条件（当盒子到达指定位置，就清除定时器） 5.注意此元素需要添加定位，才能使用 elem
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
阅读全文
摘要：1.立即执行函数，不需要调用，立马就能自己的执行函数（两种写法） 1.( function(){}() ); 或者 ( function(){} ) (); 2.写法 也可以传递参数进来 3.立即执行函数最大的作用就是 独立创建了一个作用域，里面的所有变量都是局部变量 避免了命名冲突的问题。 方式一
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
阅读全文
摘要：1. Solarized Custom 设置颜色主题 代码字体颜色 2. Auto Close Tag 自动关闭标签 3.Auto Rename Tag 自动更改标签名 4.Bracket Pair Colorizer 括号颜色 用于区分不同行代码 5.CSS Peek CSS跳转到样式链接 6.o
阅读全文
摘要：1.元素偏移量 offset 系列 1.1 offset 就是偏移量，使用 offset 系列相关属性可以 动态 得到该元素的位置（偏移）、大小等。 注意： 1.获得元素距离带有定位父元素的位置 2.获得元素自身的大小（宽度和高度） 3.返回的数值都不带单位 1.2 offset 系列常用属性（元素
阅读全文
摘要：window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口中）访问过的 URL history对象中的方法： history.back( ); 可以后退功能 history.forward( ); 前进功能 history.go( 参数 ); 前
阅读全文
摘要：navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent ，该属性可以返回由客户机发送服务器的 user-agent 头部的值 下面前段代码可以判断用户使用哪个终端打开的页面，实现跳转 if( navigator.userAgent.match( / (phon
阅读全文
摘要：1.URL 统一资源定位符 是互联网上标准资源的地址，互联网上的每个文件都有一个唯一的 URL 。 URL的一般语法格式为： protocol：// host [:port] / path / [?query] #fragment http: // www.itcast.cn / index.htm
阅读全文
摘要：1.JS 是单线程 也就是说 同一时间 只能做一件事 JavaScript 就是为了处理页面中用户的交互，以及操作 DOM 而诞生，比如某个 DOM 元素进行添加和删除，不能同时进行，应该先添加，后删除 2.单线程就意味着，所有任务需要排队，前一个任务结束 ，才能执行后一个任务。 这样导致的问题是：
阅读全文
摘要：1.全局作用域或者普通函数中 this 指向全局对象 window ( 定时器里面的this 指向 window ) 1.1 console.log(this); // window 1.2 function fn(){ console.log( this ); // window } fn();
阅读全文
摘要：<input type="text" id="tel"><button>发送</button> <script> //点击按钮之后会禁用 disabled 为 true //同时按钮里面的内容会变化，注意 button 里面的内容是通过 innnerHTML 修改的 //里面秒数是有变化的，因为需要用到定时器 //定义一个变量，在定时器里面，不断递减 //如果变量为 0 ，说明到了时间，我们需要停
阅读全文
摘要：1.页面加载事件 方式1：window.onload = function(){ } window.addEventListener('load',function(){ }) window.onload 是窗口（页面）加载事件，当文档内容完全加载成功，就会触发该事件（包括图像，脚本文件，CSS文件
阅读全文
摘要：1.DOM 和 BOM 的区别 DOM：文档对象模型，把【文档】当做一个【对象】来看待，DOM的顶级对象是document 主要学习的是操作页面元素，DOM 是 W3C 的标准规范 BOM：浏览器对象模型，把【浏览器】当做一个【对象】来看待，BOM的顶级对象是window 主要学习的是浏览器窗口交互
阅读全文
摘要：1.keyup 按键弹出的时候触发 document.onkeyup = function(){ console.log(' 我弹起了 '); } 2.keydown 按键按下的时候触发 能识别功能键 比如 Ctrl shift 左右箭头 document.addEventListener('key
阅读全文
摘要：1.鼠标在可视区的 X 和 Y 坐标 e.clientX 返回鼠标相对于浏览器窗口可视区的坐标X e.clientY 返回鼠标相对于浏览器窗口可视区的坐标Y 2.鼠标在页面文档的 X 和 Y 坐标 e.pageX 返回鼠标相对于页面文档的坐标X IE9+ 支持 e.pageY 返回鼠标相对于页面文档
阅读全文
摘要：1.禁用右键菜单（contextmenu） document.addEventListener('contextmenu',function(e){ e.preventDefault(); }) 2.禁止选中文字（selectstart） document.addEventListener("sel
阅读全文
摘要：1.什么是事件对象： 官方解释：event 对象代表事件的状态，比如键盘按键的状态，鼠标的位置，鼠标按钮的状态 简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它有很多属性和方法。 2.事件对象的使用语法： eventTarget.oncl
阅读全文
摘要：事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流 注意： 1.JS 代码中 只能执行捕获或者冒泡其中的一个阶段 2.onclick 和 attachEvent 只能得到冒泡阶段 3.addEventListener（type,listener[,useCapture]) 第三
阅读全文
摘要：注册事件有两种方式：传统方式 和 方法监听注册方式 1. 传统注册方式：btn.onclick = function (){} 利用 on 开头的事件 onclick 特点：注册事件的唯一性 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数 2.方法监听注册方式
阅读全文
摘要：1. document.write( ) 如果页面文档流加载完毕，再调用这句话会导致页面重绘（根据 document.write()写入的内容，生成新的页面) 2.element.innerHTML innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂 例： v
阅读全文
摘要：元素节点 nodeType：1，属性节点 nodeType：2，文本节点 nodeType：3 （常使用元素节点） 1.父级节点 node.parentNode parentNode 属性可返回某节点的父节点，注意是最近的一个父节点 如果指定的节点没有父节点则返回 null 2.子节点操作 方式1：
阅读全文
浙公网安备 33010602011771号