随笔分类 - Web前端开发
摘要：垂直居中是一个历史悠久的大问题，要做到兼容所有浏览器少不了要花点时间，网上也流传了很多解决方案，但没发现比我现在用的方案更完美，至少在我的项目是如此。项目中要用到垂直居中而碰到兼容性问题的，一般都是以下几种情况：1、换行文字垂直居中2、图片垂直居中以上都是在固定宽高的容器里垂直居中，不然的话margin，padding便可实现。解决垂直居中无非就从几个方面入手，利用行高等于容器高度，模拟表格单元格特性，定位，css3的display:box一、换行文字垂直居中方法1：结合表格单元格特性和定位来实现CSS代码：/*换行文字垂直居中*/.vc-font1{border:1px solid blac
阅读全文
摘要：换行文字垂直居中1换行文字垂直居中，兼容所有浏览器换行文字垂直居中2换行文字垂直居中，兼容所有浏览器固定宽高图片垂直居中1固定宽高图片垂直居中2图片自适应容器宽高垂直居中CSS3垂直居中 想居中就居中，爽啊！
阅读全文
摘要：发现程序猿写博客前都喜欢吐槽一下，也难怪，平时交流少了，内心积累了不少的骚气，是应该适当发泄一下。哥要发泄了：目前在广州蜂众网效力，这是一家刚创立不久的公司，哥喜欢接触一些新公司，活力充足，发展机会也大。当然有机会去一些知名的大公司（腾讯，百度等），也是非常向往的，这样的镀金公司进去走一趟也学到不少东西。公司目前做前端的就只有两个鸟人，而我就是其中一个，所以任务也挺多的。这也倒是其次，最主要的是在别人留下的烂摊子搅合，真有点心力交瘁。欣慰的是，在这大半年确实进步了不少，代码质量提高不少。===============================================吐槽完毕分割线
阅读全文
摘要：前些天有网友发来一些前端面试的题目，虽然说不是很难，但却是我们开发过程中经常碰到的问题，而且有些公司也喜欢面试这类的题目来考察面试者的能力，所以我觉得有必要收集一下有关这些的题目。题目一：找出字符串中出现次数最多的那一个字符？要解答这道题其实很简单，但怎么答得好才是关键，你写出的方法性能好才能得高分 1 // 方法一(推荐) 2 // 用到了正则，然后剔除了已计算过的字符，减少了循环的次数，所以性能是比较好的 3 function getMostChar1(str){ 4 var mostChar = [], 5 maxLen = 0, 6 oldStr...
阅读全文
摘要：最近在做一个项目，要用到之前比较流行的瀑布流布局，网上搜了一下，发现没有比较合适的插件可用(项目紧急，喜欢用现成的)，不得不自己写一个，也可能是因为需要结合后台来实现的，所以很难写出一个通用的插件给大家用(json格式，html结构都不一样)。偶尔在网上看到的有关瀑布流的文章(更新于2013-06-05)瀑布流布局浅析瀑布流布局（基于多栏列表流体布局实现）各大瀑布流简析与建议插件——jQuery.Waterfall思路： 其实只要了解了整个流程，要实现这个插件也不难，大家都玩过俄罗斯方块吧，原理差不多，找到合适的地方叠上去就好了，在这里，每个块的宽度是必需给定的，然后计算出列数，再维护一个数.
阅读全文
摘要：IE6下position:fixed的Bug应该是个老问题。不过，今天在搞瀑布流插件写返回顶部按钮时(老是闪动)却花了我不少时间，之前也写过一篇文章解决过，但是是用到css表达式解决，而现在的需求是要在js中动态定位，所以之前的办法不是很合适。今天再来总结一下：方法一：纯css*html{height:100%;overflow:hidden;}*html body{height:100%;overflow:auto;}原理：你拖动的滚动条并不是拖动的整个页面，而仅是body的滚动条优点：视觉效果完美，代码量少，不耗性能缺点：不会触发onscroll事件(因为html没有滚动)，可能会影响一些
阅读全文
摘要：译文地址:前端开发工程师如何在2013年里提升自己原文地址：Talks To Help You Become A Better Front-End Engineer In 2013这篇文章其实文字部分不多，强烈推荐大家直接阅读原文，我这里主要是把文章里介绍的PPT简述一下，方便大家寻找。===========================================================大部分人非常在意个人在技术上的提升。但是保持对新技术的了解是一项不小的挑战， 毕竟我们需要的信息在数量上过于庞大。2012年里，伴随着前端发展的是大量的革命性突破和对前端的重新定义。我们在实践的
阅读全文
摘要：最近做了个项目，居然在一个小小的css问题上折腾了很久很是纠结——外边距折叠的问题。今天难得清闲，就把这个问题研究了一下，才发现大有学问，所以写篇博文整理一下，以便更加牢记！ 外边距折叠，指的是毗邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距。 触发条件：毗邻，没有被非空内容、padding、border或clear分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系这些 margin 都处于普通流中，即非浮动元素，非定位元素 垂直方向外边距合并的计算 1) 参加折叠的margin都是正值：取其中 margin 较大的值为最终 mar...
阅读全文
摘要：ASCLL码表ASCII值控制字符ASCII值控制字符ASCII值控制字符ASCII值控制字符0NUT32(space)64@96、1SOH33！65A97a2STX34”66B98b3ETX35#67C99c4EOT36$68D100d5ENQ37%69E101e6ACK38&70F102f7BEL39,71G103g8BS40(72H104h9HT41)73I105i10LF42*74J106j11VT43+75K107k12FF44,76L108l13CR45-77M109m14SO46.78N110n15SI47/79O111o16DLE48080P112p17DCI49181
阅读全文
摘要：性能黄金法则：只有10%～20%的最终用户响应时间花在了下载HTML文档上，其余的80%～90%时间花在了下载页面中的所有组件。1、 减少Http请求：减少HTML文档中所引用的组件（图片，脚本，样式表，Flash等） 主要用到的技术有：图片地图、Css Sprites、内联图片（data：URL）、图片加载延迟lazyLoad、脚本和样式表合并。 内联图片：ie67不支持，大小受限制，不缓存（内联CSS图片可缓存）。 内联CSS图片PHP模板展示：http://stevesouders.com/hpws//inline-css-images-css.php2、 内容发布网络...
阅读全文
