摘要：
Javascript与HTML之间的交互是通过事件实现。 一、事件流 事件，是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流，描述的是页面中接受事件的顺序。IE9，chrome，Firefox，Opera，Safari均实现了DOM2级规范中定义的标准DOM事件，而IE8和IE8以下版本仍然保留 阅读全文
摘要：
通过css3我们可以创建动画，它能取代gif图片、Flash、Js动画等,css3的animation动画是应用在html的DOM元素上的，通过样式来实现的。 @keyframes 规则 @Keyframes我们可以把他理解为“关键帧”，它的规则是：创建由当前样式逐渐改为新样式的动画效果。对于一个" 阅读全文
摘要：
浏览器缓存 浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。 所以根据上面的特点，浏览器缓存有下面的优点： 减少冗余的数据传输 减少服务器负担 加快客户端加载网页的速度 浏览器缓存是Web性能优化的重要方式。那么浏览器缓存的 阅读全文
摘要：
在网页开发中经常会有交互操作，比如点击一个dom元素，需要让js对该操作做出相应的响应，这就需要对Dom元素进行事件绑定来进行处理，js通常有三种常用的方法进行事件绑定：在DOM元素中直接绑定；在JavaScript代码中绑定；绑定事件监听函数。 直接在DOM元素绑定事件 1 <div id="bt 阅读全文
摘要：
如果您正在测试前端应用程序，则应该了解前端测试金字塔。 在本文中，我们将看到前端测试金字塔是什么，以及如何使用它来创建全面的测试套件。前端测试金字塔前端测试金字塔是一个前端测试套件应该如何构建的结构化表示。 理想的测试套件由单元测试，一些快照测试和一些端到端（e2e）测试组成。 这是 测试金字塔的改 阅读全文
摘要：
简介 CSS中Grid是一种二维网格式布局方式。我们常规使用table、float、position、inline-block等布局，但它们遗漏了很多功能，例如垂直居中。后来css3中flexbox的出现解决了很多布局问题，但是它也是一维布局，而不是复杂的二维布局，Grid是为了解决二维布局问题而创 阅读全文
摘要：
css盒子模型用于处理元素的内容、内边距、边框和外边距的方式简称。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。 内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代 阅读全文
摘要：
rem vh vw vmin vmax做为CSS3中的新单位，其实都出来挺久的了，这篇文章将总结并理解下它们。 rem 如果你给body设置了font-size字体大小，那么body的任何子元素的1em就是等于body设置的font-size body { font-size: 14px; } di 阅读全文
摘要：
这篇文章主要讲解：右键复制失效方法、菜单"文件"－"另存为"失效方法、防止查看源代码进行复制的方法、防止页面缓存的方法。来达到一定的代码保护效果 右键复制失效方法: 方法一： <script language="Javascript"> document.oncontextmenu=new Func 阅读全文
摘要：
一、解决iphonX白条,网站扩展到整个屏幕 网页在iphoneX的浏览器屏幕显示上，默认情况下在头部的2侧会出现白条背景，网站被限制在了一个“安全区域”内，移除白色背景的方法 方法一：设置body的背景色： .body{ background-color：#f00; } 方法二：添加mate属性v 阅读全文
摘要：
通过 CSS3 的 content 获取内容，很有意思的一个思路，实际场景中有可能用的到： CSST (CSS Text Transformation) 利用js动态创建一个link插入到文档中, 请求css文件. 利用 computedStyle = window.getComputedStyle 阅读全文
摘要：
懒加载 什么是懒加载？ 懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 为什么要使用懒加载？ 很 阅读全文