1.代码展示 /*渐进增强*/ .div1 { -webkit-transition: all 2s; //Safari Chrome -moz-transition: all 2s; //Firefox -o-tran…
面试前端时遇到的CSS题目
昨天面试了本地的一家公司,面试的Web 前端。题目共有CSS和JS两部分,因为我对于CSS不是很熟悉,所以这里就只列出CSS相关的笔试题,仅供学习。 盒模型的组成 盒模型通过四个边界来描述:margin(外边距)、bor…
JS+CSS实现数字滚动
最近在实现一个显示RGB颜色数值的动画效果时,尝试使用了writing-mode(书写模式)及 text-orientation来实现文字的竖直方向的排列,并借助CSS的transition(过渡)来实现动画效果。关于书…
Javascript中的深复制
对一个对象或者数组这种引用类型的值进行复制可以分为浅复制和深复制,比如这样的一个对象 let obj={ a:1, b:{ a:1, b:2 }, c:3 } 很明显这个对象是存在两层的,obj[b]不是基本类型值,而是…
浏览器渲染那些事之 Reflow、Repaint
原文链接 浏览器渲染那些事之 Reflow、Repaint 浏览器内核(渲染引擎) 在各个浏览器厂商你追我赶的形势下,截止今日,产生了很多不同的浏览器,各个浏览器本质大同小异,核心部分基本相似,由渲染引擎和 JS 引擎组…
Vue入门——Vue的核心
代码部分请下载本文代码阅读,代码均能正常运行并有详细的注释。 本文代码下载地址 概述 无需置疑,Vue之所以能如此之火,主要受益于它是一个MVVM框架和它易学的文档,几乎所有觉得学习Vue有难度的开发者都是觉得组件脚手架…
响应式网站开发基础
准备工作 远程调试 chrome 浏览器设置 在 chrome 浏览器中打开 chrome://inspect 手机设置 打开开发者模式 打开 USB 调试模式 打开手机端 chrome 浏览器 基础知识 视窗(view…
css 单行文本溢出显示省略号
有时候我们会遇到这样的情景,在一行显示过长的文字时会溢出,页面将变得很丑陋。这时候我们想要只显示一部分文字,将多余部分以省略号 “…” 的形式显示。那么我们可以通过设置 CSS 样式来达到目的。 代码示例: …
【面试篇】event对象中offsetX,clientX,pageX,screenX,layerX,X的辨析
offsetX,offsetY:指鼠标指针相对于触发事件元素的左上角的偏移,在Chrome,Opera,Safari中指外边缘,即将该元素边框的宽度计算在内,firefox则不包含边框值,如下图所示: pageX和pag…
解决onKeypress中文输入不触发问题
onKeypress事件会在键盘按键被按下并释放一个键时发生。在对input文本绑定时,输入数字、字母、特殊符号是都会触发onKeypress事件,但唯独输入中文时,onKeypress事件是不会触发的!我觉得可以使用o…
动态组件使用
动态组件使用 动态组件官网解释 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换: var vm = new Vue({ el: '#…
原生js实现简单的Ripple按钮
原生js实现简单的Ripple按钮 效果如图 准备食材(html部分) <ul id="nav"> <li> <a href='#'> <span>首页</span&…