特效一览 滑箱： 果冻： 脉冲： 闪光： 气泡： 滑箱特效 效果图 原理 因为 button 元素可以使用 before/after 伪元素，所以借助伪元素，可以实现动态图中的遮盖层。 为了避免回流重绘，滑箱的运动方向是垂直方向，所以使用scaleY属性。对于动画的方向，需要借助transform-origin改变动画原点。 代码实现 html： {代码......

特效一览 划线动态： 动态边框： 划线动态 效果图 原理和代码 :before 和 :after伪元素指定了一个元素文档树内容之前和之后的内容。由于input标签不是可插入内容的容器。所以这里下划线无法通过伪元素来实现。需要借助其他 dom 节点。 {代码...} 包裹在外的父元素div应该设置成inline-block，否则宽度会满屏。 {代码...}...

特效一览 划线动态： 背景高亮： 色块进出： 划线动态 效果图 原理 首先，利用::after和::before就可以画出上下两条线，所以只需要一个 dom 元素即可。 其次，对于鼠标移入的动画，要给上面两个伪元素设置:hover选择器。 最后是处理动画方向。我们以上面的线条为例，在鼠标移入的时候，是从右到左变化的。这里是通过设置...

伪类经常与伪元素混淆，伪元素的效果类似于通过添加一个实际的元素才能达到，而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。伪类与伪元素的本质区别就是是否抽象创造了新元素。具体的伪类和伪元素相关知识本文就不深入，下...

以往，由于自己使用z-index的频率不大，所以对这个CSS属性存在比较片面的认识。一直认为z-index就是用来描述定义一个元素在屏幕Z轴上的堆叠顺序。z-index值越大在Z轴上就越靠上，也就是离屏幕观察者越近。最后才发现这个认识存在很大的问题：

划重点，这是一道面试必考题，很多面试官都喜欢问这个问题 要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下CSS实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下 仅居中元素定宽高适用 absolute + 负margin absolute + margin auto absolute + calc 居中元素不定宽高 absolute + transform lineheig...

本文的题目是 CSS 阴影技巧与细节。CSS 阴影，却不一定是 box-shadow 与 filter:drop-shadow，为啥？因为使用其他属性也可以模拟阴影，而且是各种各样的阴影。下面且听我娓娓道来~

问题先行，如何使用 CSS 实现下述滚动条效果？ 就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Ja...

怎么做一名高薪前端工程师？必备哪些技术工具？想要成为一个高薪高职的Web前端工程师并不容易，你不仅需要掌握专业的技能点，还要具备较多的项目经验。为了能够快速的加入到这高薪行列，很多人选择参加培训班，不过你知道优秀的Web前端工程师需要掌握哪些技术工具吗？接下来就给大家一一介绍。

现代互联网技术的成熟导致了技术分工的极度细化，一个技术团队往往会包括前端、后端、安全、运维、架构、测试等各种职责，尤其是前后端分离的技术实现，像关老爷手中一把锋利无匹的大偃月刀，彻底切断了前后端程序员的联系，只剩下了 HTTP。

我对自己的定位是 全栈，以大前端为主，囊括所有和用户直接相关的开发。我认为这是趋势，我也确实在自身的经历中体验到了好处。目前大前端还没有形成固定模式，还在混乱发展，所以前景是非常被看好的。

每天，HR 群都有人在吐槽招不到前端工程师。实话说对这些需求，招聘体验师们也无能为力，因为在供不应求的前端招聘市场上，优秀的前端工程师才是有话语权的那一方。

对于前端基础需要学习哪些内容，之前文章已经有写过不少了，本篇重在谈论： 作为一名前端想要晋升，需要什么条件？ 现在在用 React，要不要也学学 Vue？ 有必要学习 Node.js/Flutter/ 函数式吗？ 这几个问题看似毫无关联，但是其实它们本质上都是同一个问题，这个问题就是“一个前端工程师到底需要掌握哪些技能？” 其实在...

从静态页面到JavaScript，从依赖后端到自主开发，前端开发者从不被重视的“页面仔”逆袭为如今很多前端工程师的薪资比后端还高，从前端技术由国外开发者主导到如今国内自主产生的小程序技术，我们走了近 30年。

虽然本身能写几种代码，始终不觉得自己是全栈工程师，全栈工程师其实是全能的一种表现，现在很多人把懂得前端又能开发后端的技术工程师成为全栈工程师，对于一个前端技术人员在掌握本身技能的情况下，如果能在后端上发力做点事情，无疑能拓展技术道路宽度，虽然就技术工种来讲，专注于一个方向长时间的积累更加容易出成...

当你选择了IT这个行业后，尤其是当你选择了WEB前端开发程序员这个岗位后，你会跟996加班、脱发、猝死、找不到女朋友等等这些词扯上关系，尽管事实情况并没有这么夸张，但是你的身边会不断涌现出来这些词语，你害怕了吗？

JavaScript被称之为解释性语言，与Java等这类编译语言区别在于：JavaScript代码写好了就可以直接立即执行，Java则需要相对较长时间的编译过程才可生成可执行的机器码。

5G时代即将来临，各行各业对产品的用户体验需求空前大增。人们在享受互联网带来的便捷也给互联网产品提出了新的需求，这意味着前端开发人员也有了更多的机会和挑战。无论是大小公司，对前端开发工程师的需求都是在快速上涨，薪资待遇也随之上升很快。

HTML 1 - 浏览器 | 浏览器页面构成 2 - 浏览器 | 浏览器内核相关知识点 3 - W3C | 对WEB标准以及W3C的理解与认识? 4 - 标签 | Doctype相关知识点 5 - 标签 | meta相关知识点 6 - 标签 | label相关知识点 7 - 标签 | link 与 @import 8 - 属性 | 全局属性一览 9 - 属性 | target属性 10 - 标签/属性 | 一些老生常谈的标签...

我发现前端开发人员一直在努力征服CSS。理由也很充分，开发人员是用逻辑思考的生物。添加一个DIV元素导致所有代码都不得不往下移一行，而另一个DIV“浮”到左侧，感觉没有任何意义。

Web前端技术由 html、css 和 javascript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止...

前端什么技术越来越重要？哪些前端框架有前景？近年来，Web前端市场前景火爆吸引了很多人加入其中，“低端饱和、高端紧缺”的市场行情要求人们不断提升自己的专业技能。互联网更迭迅速，未来前端有哪些技术会越来越重要呢?下面就给大家分享几个比较有前景的前端框架。

除了console.log, debugger是我们最喜欢、快速且肮脏的调试工具。执行代码后，Chrome会在执行时自动停止。你甚至可以把它封装成条件，只在需要时才运行。

正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。

但是由于JavaScript是一个作为解释执行的语言，而且它的单线程机制，决定了性能问题是JavaScript的弱点，也是开发者在写JavaScript的时候需注意的一个问题。

我有两个朋友，都是做前端的。A做了三年前端，一直兢兢业业，要找他吃饭都要等到他9点提前下班。另一个是B，工作四年，基本不加班，有事的话也不会待到很晚。前段时间优化的事一出，A成了被优化的那一个。

在我的印象中，一提到软件工程，首先不会想到的是前端这一块，大概是因为以往工作偏向的缘故。这两年最大的感触就是前端发展的很快，时下的前端开发也远非从网络中抠一段jQuery代码就能搞定功能这么简单。

摸索前端工程化时，针对群友作了个简单的问卷，参与人数不多，但也能表征一部分现象，统计结果如下，从中也可见些许端倪。 * 独立的前端团队早已经不是什么新鲜事，在那些大厂大寨子里早已经存在，前端的发展可谓如日中天，一片从未有过的繁荣。前端三大件：HTML，CSS，JavaScript，这几年都有质的飞跃。HTML5的兼容性提...

“JavaScript的很多奇技淫巧,都来自于对运算符的灵活使用。” 1 运算符基础 1.1 优先级: 优先级高的运算符最先被执行 {代码...} 1.2 关联性: 运算符执行时的方向。是从左向右，还是从右向左 {代码...} 现在我们仔细把优先级的题改一下 {代码...} MDN上写的是优先级高的运算符最先被执行，我们都知道 ||是短路的，后边不会...

作为初入职场的我们，在学习与工作中，总是会遇到不同的挫折。虽然有些错误与某一个具体的行为相关，但有些错误却是所有Web开发人员都需要面对的挑战。因此，通过研究，体验和观察，总结了Web开发人员常犯的5个错误——以及如何避免这些错误分享给大家。