随笔分类 - html,css,javascript
摘要：开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不断更新，不断更新，重要的事情说三遍。 谈谈一
阅读全文
摘要：开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不断更新，不断更新，重要的事情说三遍。 谈谈一
阅读全文
摘要：开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不断更新，不断更新，重要的事情说三遍。 所有题
阅读全文
摘要：写这篇文章的缘由是因为看到了这个页面： 戳我看看（移动端页面，使用模拟器观看） 运用 CSS3 完成的 3D 视角，虽然有一些晕3D，但是使人置身于其中的交互体验感觉非常棒，运用在移动端制作一些 H5 页面可谓十分博人眼球。 并且掌握原理之后制作起来也并不算废力，好好的研究了一番后将一些学习过程共享
阅读全文
摘要：说到 shadow-dom 可能很多人会很陌生。但是其实我们肯定碰到过，本文主要想简单介绍下 shadow-dom。下面直接进入正文。 shadow-dom 是什么 顾名思义， shadow-dom，直译的话就是 影子dom ？我觉得可以理解为潜藏在黑暗中的 DOM 结构，也就是我们无法直接控制操纵
阅读全文
摘要：最近在研读 《CSS SECRET》（CSS揭秘）这本大作，对 CSS 有了更深层次的理解，折腾了下面这个项目： CSS3奇思妙想 -- Demo （请用 Chrome 浏览器打开，非常值得一看）。采用单标签完成各种图案，许多图案与本文有关。 也希望觉得不错的同学顺手在我的 Github 点个 st
阅读全文
摘要：最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。 其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 另外，阅读源码让我接
阅读全文
摘要：这篇文章实在是很难下笔，因为网上相关文章不胜枚举。 巧合的是前些天看到阮老师的一篇文章的一句话： “对我来说，博客首先是一种知识管理工具，其次才是传播工具。我的技术文章，主要用来整理我还不懂的知识。我只写那些我还没有完全掌握的东西，那些我精通的东西，往往没有动力写。炫耀从来不是我的动机，好奇才是。"
阅读全文
摘要：很多时候，我们经常听见有人说jquery有多快多快。在这个各种类库满天飞的时候，不得不说的是，能有原生JS快吗？ 是的，明显原生JS要更快，因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许多其他的东西，考虑通用性必然会导致性能的损耗。 当然，我不是提倡写代码纯用原生JS实现，我记得淘宝玉
阅读全文
摘要：最近又遇到许多垂直居中的问题，这是Css布局当中十分常见的一个问题，诸如定长定宽或不定长宽的各类容器的垂直居中，其实都有很多种解决方案。而且在Css3的flexbox出现之后，解决各类居中问题变得更加容易了。搜了搜园子内关于flexbox的文章觉得很多不够详尽，故想借介绍flexbox的同时好好总结
阅读全文
摘要：引言 在现在的前端页面中，尤其是移动端，经常会需要将<header>或者是<footer>模块悬浮出来，跟随页面的滑动保持定位在页面的最上方或者是最下方，如下图所示。 “回复主题”模块，就是跟随页面的浮动一直悬浮在页面的最下方，代码结构如下。 实现这样的功能当然是利用position:fixed。但
阅读全文
摘要：inline-block前端程序猿们肯定不陌生，它是display属性的一个取值。 之所以称之为inline-block。是因为它兼具行内元素(inline-element)和块级元素(block-element)的特征。块级元素（block elements）,来源于CSS盒子模型。块级元素...
阅读全文
摘要：接上一篇，希望能写一个高性能Javascript专题。 第一篇：高性能Javascript--脚本的无阻塞加载策略。 参考摘录《高性能Javascript》。 经典计算机科学的一个问题是，数据应当存放在什么地方，以实现最佳的读写效率。数据存储是否得当，关系到代码运行期间数据被检索到的速度。...
阅读全文
摘要：本文不讨论正则表达式入门，即如何使用正则匹配。讨论的是两种创建正则表达式的优劣和一些细节，最后给出一些常用正则匹配表达式。 Javascript中的正则表达式也是对象，我们可以使用两种方法创建正则表达式：使用new RegExp()构造函数使用正则表达字面量 先说结果，使用正则表达字面量的效...
阅读全文
摘要：写这篇文章的起因是源于这篇文章：谈谈面试与面试题 中关于position的讨论，文中一开始就说的这句话： 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的是可以顺着一路扯到normal flow、containing block、bfc、margin c
阅读全文
摘要：最近读了《HTML重构》这本书，以下做出自己的总结归纳，大家可以一起学习交流。 什么是重构？重构是在不改变程序行为的基础上进行小的改动是代码基本逐渐完善的过程，通常需要一些自动化工具的帮助。好的网站是需要我们对代码进行日臻完美的改善。而搜索引擎优化（seo）是网站重构的主要驱动之一，跟图片相比搜索引
阅读全文
摘要：记得在面试腾讯实习生的时候，面试官问了我这样一道问题。 当初只知道两种声明方式一个是函数声明一个是函数表达式，具体有什么不同没能说得很好。最近正好看到这方面的书籍，就想好好总结一番。 在ECMAScript中，有两个最常用的创建函数对象的方法，即使用函数表达式或者使用函数声明。对此，ECMAScri
阅读全文
摘要：前言： 站在巨人的肩膀上，确实能让我们看得更远。而我认为学习的不二法门就是不断模仿，但是一定要有自己的思考。拿来主义如果少了思考，就会变得毫无意义。以下列出一些前端优秀网站，大家自行取其精华，批判吸收。 学习站点资源Adobe出的，Adobe其实是html5非常忠实的拥抱者。官方社区有非...
阅读全文
摘要：学习的道路就是要不断的总结归纳，好记性不如烂笔头，so，下面将 po 出我收集的 9 张 javascript 相关的思维导图（非原创）。 思维导图小tips： 思维导图又叫心智图，是表达发射性思维的有效的图形思维工具 ，它简单却又极其有效，是一种革命性的思维工具。思维导图运用图文并重的技巧，把各级
阅读全文