一半设计一半前端

显示隐藏类的弹出面板，一般都有一个需求，在面板本身上点击的时候，面板不隐藏，在除面板之外的其它区域点击，要隐藏这个面板。以前常常用点击面板的时候阻止这个事件的冒泡，然后再在document上委托这个关闭面板的点击事件。比如这样的结构：<div class="wrapper&...

好久没写教程了，这几年忙着上课备课，学习新的框架，忙着新公司的事情，一点空余的时间都榨不出来，结果新公司还是干倒闭了，万事皆空……！趁着现在没工作，把教程案例整理一下，算是做个总结。也不知道自己前端开发这个方向的职业生涯是否已经结束，毕竟这个就业市场对我们老人太不友好了。如果我真的转行了，这个网站就...

PC端一般都会做很多鼠标经过的样式，比如文字变色，图片变大，显示隐藏等效果。但是到了移动端，鼠标经过效果变成了点击之后出现，还伴随一个半透明的灰色背景。其实，在做页面之前，我们就要思考，这个效果是PC端鼠标悬停时的效果，在移动端没有悬停的时候又应该是什么样子？最好的解决方案就是利用Media Que...

曾经用flexible.js通过js动态计算html的font-size的方式已经不可取了。经过很多项目测试，发现最好的方式还是calc()结合vw、rem是最可取的最新方案。有了vw单位，再配合calc()函数进行计算，无须使用任何JavaScript代码，就可以实现基于设备宽度的移动端布局适配方...

使用flex弹性布局的时候，遇到单行文本使用省略号的时候，常常发现不成功。其实内部的原因还是因为宽度计算的优先级问题。min-width(max-width) > flex-grow(flex-shrink) > flex-basis(值非auto) > width ，如果弹性盒子...

虽然现在jQuery只在老项目中使用了，但是这个曾经辉煌一时，解决了很多浏览器兼容性问题，拯救了大部分程序员头发的库，还是非常伟大的，它的思想还值得学习。这里分享一个自定义jQuery插件的小案例，以后遇到需要剥离出来的代码，就可以通过这种方式完成。点击舞台产生随机的图形，可以自由配置几个参数。自定...

对于这个以前面试必考的八股文，在网上有很多批判的声音，很多人说写代码的时候用不到这些，不过我觉得理解了这些概念后对于写代码，特别是理解面向对象编程的思想，还有JavaScript独特的原型这个概念还是非常有帮助的。所以，对于前端来说，这些概念是必背的。1、创建对象1.1 直接创建单个对象 ...

每次学了正则没多久就忘了，大部分时候写复杂一点的正则还是依靠插件或者百度。1、正则表达式1.1、什么是正则表达式正则表达式是一种字符串匹配模式。因为匹配模式语法规则复杂，所以戏称为火星文。在 JavaScript中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法,...

上篇传送门：CSS3:grid网格布局终于来了！上篇下篇来讲作用在grid items上面的属性。一、网格格子占据的区域范围首先要明白有哪几种方法可以指定网格的位置。1、命名区域（Named Areas）通过grid-template-areas属性可以为每一个网格区域命名，从而可以指定某个子项属于...

这篇教程拖了一年多才写，今天总算想把这个坑给填了。grid网格布局是一种典型的二维布局，由行和列构成，其实就是很智能的一种表格，比起flex的一维轴向上的布局，grid对多行多列的布局控制要强大很多。当然，任何布局都有自己的优势和缺点，合适的场景选择合适的布局方式才是明智之举。首先，IE肯定是不支持...