DIV 上下左右居中黑科技

# info{height:0px; width:0px;top:50%; left:50%;position:absolute;} # center{background:# FFCC33;border:1px solid # 0033FF; width:300px;height:300px;position:absolute; margin:-150px;} 哆啦A梦

业界 2016年07月16日

IOS中弹出键盘后出现fied失效现象的解决方案

概述 这个问题常出现在移动web开发中聊天或者留言页面的绝对定位输入框上，页面超过屏幕大小时候输入框focus状态下（键盘弹出）绝对定位的元素失效，导致页面滚动时候把定位元素一并带走，体验十分不好，在此留下一自己的方法，让更多的人不需要再爬这样的小坑。 解决方法 原理很简单，就是定义一个外框把页面包起来，把需要使用fixed定位的元素设置成absolute定位，然后设置外框

业界 2016年07月04日

CSS3 聊天气泡框以及 inherit、currentColor 关键字

效果如上图所示，主要用到CSS3的伪类::after、::before，以及圆角边框border-radius属性。对于下面的气泡框，可以有两种方式实现小三角：传统方式，利用CSS画小三角，利用到了透明背景和边框属性transparent的应用。CSS3的transform属性的使用然后通过position定位到合适的位置。此外，本文还会讲一下CSS的inherit属性值的

业界 2016年07月21日

Thinking in Frontend Conventions

前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。JavascriptJavascript规范直接参考airbnb:ES6 JavaScript Style GuideES5 JavaScript Style GuideReact/JSX Style GuideCSSBEMBlock Element Mo

业界 2016年05月15日

HTML语义化

近来看面试题的时候，经常看到一个问题：HTML语义化是什么意思？w3school里面有html标签的含义。然而HTML5中对一些标签进行了修改，由于不了解H5的新定义，就很容易弄错标签之间的意思。例如：既然i标签是指斜体的意思，那么为什么font-awesome这类字体要用i标签呢？这不是反语义化了吗？除此之外，em和strong都是有强调的意思，又有什么区别呢？可能这个时

业界 2016年07月05日

IE条件注释

IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句，作用是可以灵活的为不同IE版本浏览器导入不同html元素，如：样式表，html标签等。很显然这种方法的最大好处就在于属于微软官方给出的兼容解决办法而且还能通过W3C的效验。关键词解释lt ：就是Less than的简写，也就是小于的意思。lte ：就是Less than or equal to的简写，也就是小于或等于

业界 2016年07月06日

我是如何对待写静态页这项工作的

什么是静态页传送门文章起因最近负责公司商家后台项目的前端业务，可惜只是写静态页，不用写任何JS代码，作为一名新时代的FE，一开始我是拒绝的，我怎么能做这么low的事呢？前端必须要高大上啊！什么Angular、React搞起来啊！毕竟我们招聘JD上面也有相应的技能树要求的嘛。不就是让你切个图嘛~说了这么多，到底能不能做？所以有了这篇文章。磨刀不误砍柴工开工之前先了解一下需求有

业界 2016年07月13日

初入前端

写在前面 找工作的时候，总是被‘经验不足’拒绝很多次。当时一直觉得这个问题无异于先有鸡还是先有蛋，没工作哪来的工作经验？没工作经验哪来的工作？甚是苦恼。不过，这个话题就止于此，只要坚持，面包还是会有的。 现在工作了，发现经验二字，看似简单，不就工作几年了吗，其实不然。打个比方，某道数学题， 你看完题目已经有了思路，但是你去做，却不一定能做的出来。就像前端技术，看得懂到做出来

职场攻略 2016年07月17日

网站的肥胖症危机（节译版）

1、大多数网站的主要内容是文本，更准确地说，是简短的文本。文本本身并不大，但是展示它们的网页，正变得越来越大。Twitter展示单条评论（140个字符）的页面，超过900KB。Medium的一篇文章大约400个词，页面大小是1.2MB。如果这种趋势持续下去，2020年，网页的体积平均将超过5MB，比一本俄罗斯长篇小说还大。比如，陀思妥耶夫斯基的《罪与罚》，文本压缩后不到80

业界 2016年07月11日

解决 css 浮动后 父元素高度失效问题

应用场景 子元素标签使用 浮动后，会出现浮在父元素上层，脱离了。导致父元素没办法根据子元素的高度而变化，提供以下解决方案。 解决代码 把 ‘.clearfix ’ Class 样式添加到 父元素即可。 .clearfix:after, .clearfix:before{content:" ";display:table;} .clearfix:after{clear:bo

业界 2016年07月26日