Liangyuqi's blog

iconfont阿里巴巴矢量图

iconfont是‘字体图标’，将图标以文字的方式显现的网页中。现在有很多网页已经使用过字体图标，如我们大家都熟知的淘宝、京东、新浪等大型网站都用到过字体图标。

iconfont优缺点网站使用iconfont图标代替图片图标，可以大大增加前端开发效率。举个例子，假如需要做一个图标，鼠标经过时会变色，如采用iconfont来实现，则2行CSS代码搞定，而且可以自定义图标的任意颜色，如需用到其他项目中去，只需改动代码即可；而采用图片图标来实现，则需要做两张图片，且后期如页面上需要调整颜色，则需重新在绘图软件里修改，较为麻烦。　　其二者，使用ico...

Posted by Liangyuqi on November 25, 2017

详解移动端开发页面

一、Web App vs. Native App 之前公司移动端项目都是web app，绑定在微信公众号上，又学习了阮一峰老师和hcysun几篇博文，仔细总结一下开发web app的心得 web app 优点跨平台：所有系统都能运行免安装：打开浏览器，就能使用快速部署：升级只需在服务器更新代码超链接：可以与其他网站互连，可以被搜索引擎检索 web ...

Posted by Liangyuqi on November 5, 2017

圣杯，双飞燕，以及栅格布局总结

两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。

圣杯布局三者都设置向左浮动。设置中间的宽度为100％。设置负边距margin-left。左部分设置-100％,.右部分设置-width px。设置容器的padding值给左右两部分留出空间。设置左右部分为相对定位。左部分left的为-width，右部分right为-width。 HTML <div id="container"> ...

Posted by Liangyuqi on November 4, 2017

CSS深入理解流体特性和BFC特性下多栏自适应布局

参考自张鑫旭的一篇文章，觉得很好，加入了一点自己的理解点击块状元素的流体特性与自适应布局块状元素像放在容器中的水流一样，内容区域会随着margin, padding, border的出现自动填满剩余空间，这就是块状元素的流体特性。来一个小实验： div { margin-left：100px； width：100%； } 此时发现，左侧...

Posted by Liangyuqi on November 3, 2017

js运行机制以及定时器原理详解

js的单线程 JavaScript作为浏览器脚本语言，主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多...

Posted by Liangyuqi on November 1, 2017

H5及原生js模拟鼠标点击拖拽

H5 drag和drop拖放拖放是html5的标准，任何元素都能够拖放 html： <div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="img/2.jpg" draggable="true" ondragstart="drag(ev...

Posted by Liangyuqi on October 27, 2017

v8 GC机制

Chrome 开源JavaScript引擎

为什么要分代 V8是Chrome浏览器的javascript解释器，为什么需要把堆分代？不分代不能完成他所做的事情么？其实不分代完全可以，分代的唯一理由就是优化GC性能。你先想想，如果没有分代，那我们所有的对象都在一块，GC的时候我们要找到哪些对象没用，这样就会对堆的所有区域进行扫描。而我们的很多对象都是朝生夕死的，如果分代的话，我们把新创建的对象放到某一地方，当GC的时候先把这块存“朝生夕...

Posted by Liangyuqi on October 25, 2017

Chrome 下input的默认样式

去除默认边框以及padding border: none; padding:0 去除聚焦蓝色边框 outline: none; 取消form表单自动填充变色 1.给input设置内置阴影，至少要比你的input本身大。不过，box-shadow是很慢的，适当大小。而且，如果你的input是用图片做背景的话，是没有办法做这么干的。设置transparent也不可以。 input...

Posted by Liangyuqi on October 25, 2017

预防sql注入

前言：这两天做项目的时候发现很多小地方没有注意js或者sql注入，平时登录都是md5加密，今天突然发现记录一下。所谓SQL注入，就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。过程：类似这种很简单的页面，可能sql语句写法都如下: select* form table where title ='活动' ...

Posted by Liangyuqi on October 22, 2017

详解Flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

.box{ display: -webkit-flex; /* Webkit 内核的浏览器，必须加上-webkit前缀 */ display: flex; } flex 的核心的概念就是容器和轴。容器父容器子容器如何沿主轴排列：justify-content（水平方向）位置排列： flex-start：起始端对齐 [AAA ...

Posted by Liangyuqi on October 20, 2017

Lust for life