我是新手F1-CSDN博客

原创 js异步-setTimeout

js引擎是单线程的,可是浏览器却可以是多线程的,js引擎只是浏览器的一个线程而已.定时器计时,网络请求,浏览器渲染等等…，都是由不同的线程去完成的。 js引擎单线程执行的，它是基于事件驱动的语言.它的执行顺序是遵循一个叫做事件队列的机制。从图中我们可以看出,浏览器有各种各样的线程,比如事件触发器，网络请求,定时器等等.线程的联系都是基于事件的。js引擎处理到与其他线程相关的代码,就会分发给其

2017-06-20 21:25:11 724

选择类 Ctrl+D 选中光标所占的文本，继续操作则会选中下一个相同的文本。Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑。举个栗子：快速选中并更改所有相同的变量名、函数名等。Ctrl+L 选中整行，继续操作则继续选择下一行，效果和 Shift+↓ 效果一样。Ctrl+Shift+L 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行。Ctrl+Shif

2017-05-31 14:39:43 388

原创 position自适应布局

position绝对布局时，left,right,top,bottom可以同时起作用，从而撑开元素。示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>position</title> <style> .out{ height: 200px;

2017-05-26 22:27:27 1433

原创前端性能优化之-css阻塞渲染

为了防止页面重复渲染页面，降低浏览器性能，浏览器在cssdom构建完成之前，不回渲染页面，直观的感受就是，在css下载完成之前，浏览器将出现白屏现象。浏览器渲染流程：浏览器开始解析目标HTML文件,执行流的顺序为自上而下。HTML解析器将HTML结构转换为基础的DOM(文档对象模型),构建DOM树完成后,触发DomContendLoaded事件。CSS解析器将CSS解析为CSSOM(层叠样式

2017-05-15 22:41:37 3015

原创 \r\n，\n，\r的历史及在不同系统下的区别

“回车”与”换行”的历史由来在计算机还没有出现之前，有一种叫做电传打字机（Teletype Model 33）的玩意，每秒钟可以打10个字符。但是它有一个问题，就是打完一行换行的时候，要用去0.2秒，正好可以打两个字符。要是在这0.2秒里面，又有新的字符传过来，那么这个字符将丢失。于是，研制人员想了个办法解决这个问题，就是在每行后面加两个表示结束的字符。一个叫做“回车”，比喻打印头定位在左边

2017-04-26 09:58:16 967

原创移动端适配，你想要的这里都有

移动端像素的概念移动端有两种像素的概念，一种是设备物理像素，另一种是设备逻辑像素，设备逻辑像素是与设备物理像素无关的。比如，iPhone的屏幕分辨率：iPhone5 ：逻辑像素分辨率 320 * 568，物理像素分辨率 640 * 1136(设备像素比为2)iPhone6：逻辑像素分辨率 375 * 667，物理像素分辨率 750 * 1334（设备像素比为2）iPhone6 Plus ：

2017-04-25 16:31:36 860

原创 css3深入理解之border-radius

border-radius具有两个特性：大值特性和等比例特性。这两个特性主要用来控制当border-radius的值大于元素的outerWidth或outerHeight时，元素边框的变形行为。大值特性当border-radius值很大的时候只会用元素的最大的宽或高(包括border)来渲染<!DOCTYPE html><html><head> <title></title><sty

2017-04-25 11:25:53 1739

转载 git merge原理

快照这是项目的三个版本，版本1中有两个文件A和B，然后修改了A，变成了A1，形成了版本2，接着又修改了B变为B1，形成了版本3。如果我们把项目的每个版本都保存到本地仓库，需要保存至少6个文件，而实际上，只有4个不同的文件，A、A1、B、B1。为了节省存储的空间，我们要像一个方法将同样的文件只需要保存一份。这就引入了Sha-1算法。可以使用git命令计算文件的 sha-1 值

2017-04-24 21:57:19 12194 3

原创实现微信内置浏览器全屏播放模式下html元素漂浮

<!DOCTYPE html><html><head> <title></title> <meta name="viewport" content="width=device-width,user-scalable=no"> <style type="text/css"> html,body { padding: 0;

2017-04-22 20:56:05 5269

原创 bfc与margin折叠问题

边距折叠边距折叠只会发生在上下边距，左右边距是不会发生折叠的边距折叠只发生邻接的上下边距中，也即兄弟节点或者父子节点发生边距折叠的两个节点必须同处于一个bfc布局中发生边距折叠的两个父子节点没有border或者padding隔开只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框- 或绝对定位之间的外边距不会合并。bfcbfc的作用:两列布局通过使父元素bfc化，清楚内

2017-04-17 09:50:20 647

原创 css3 动画之transition，animation

css3动画 csss3实现动画的方式主要有两种方式：一种是用transition过渡效果来实现动画，另外一种直接使用animation配合keyframe来实现。虽然这两种方式都能实现动画效果，但是区别还是有的。transition官方属性解释：也可以把属性写成一行：div{transition: width 2s, height 2s, transform 2s;-moz-t

2017-04-16 21:44:09 584

原创 css3 3d转换之perspective,perspective-origin

perspective perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2D视平面上。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面中，并且变换结果中将不存在景深概念。以下为将图片沿x轴旋转一定角度的两个效果，一个设置了perspective，一个没有设置perspective，可以看到明显的区别。

2017-04-16 14:27:36 4788

原创欢迎使用CSDN-markdown编辑器

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

2017-04-14 23:37:37 135

原创 fiddler断点命令

断点命令介绍：bpu在请求开始时中断,bpafter在响应到达时中断,bps在特定http状态码时中断,bpv/bpm在特定请求method时中断。注意：以上所以命令在后面不加url的情况下表示清除断点过滤。提示：命令输入区域输入help，回车执行会打开一页面详细介绍fiddler的所有命令。

2017-04-13 11:39:32 975

原创 text-align:justify两端对齐布局

text-align:justify该属性和值可实现文本两端对齐div{ border:1px solid black;}CSS text-justify实例In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mi

2017-04-11 14:56:46 448

原创 css换行（white-space、word-wrap、word-break）

white-space值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到标签为止。pre-wrap保留空白符序列，但是正常地进行换行。

2017-04-11 14:26:21 1062

原创 window下配置多个ssh密匙

1.打开git bash工具，运行'ssh-agent -s'打开密匙管理客户端，用ssh-add添加私密2.在.ssh目录下新建config文件，写入如下配置信息Host git.tv.sohuno.comUser songli213290IdentityFile C:/Users/Administrator/.ssh/id_rsaHost github.comUs

2017-04-06 15:23:00 1429 1

原创 inline-block的基线问题

从测试结果可知：如果内联块里的没有文字，则其基线为下边线，如果有则为文字的基线

2017-03-28 14:35:40 1203

原创 line-height的底线、基线、中线、顶线

说明：粉色为顶线，蓝色为中线（和英语本有点差异），绿色为基线，红色为底线1.vertical-align:top2.vertical-align:middle3.vertical-align:baseline4.vertical-align:bottom结论：顶线和底线是相对于中线来计算的，当line-height

2017-03-28 10:28:51 5002

原创 git回退

resetgit reset有三个可选项--mixed：默认，修改HEAD，使其指向到对应版本号，并且清空暂存区（stage或者叫index），注意，这里的修改HEAD并不会改变工作区的文件（和checkout不同）--soft：修改HEAD，使其指向到对应版本号，不会清空暂存区，也不会改变工作区的文件，并且会把当前版本相对于现在工作区有修改的文件添加到暂存区（添加到暂存区的文件和

2017-03-27 19:36:21 392

原创 ps切图

1.传统切图使用切片工具自己手动切图（类似裁剪），也可以基于参考线生成切图2.精准切图使用菜单工具‘脚本->将图层到处到文件’。该命令可以把可见图层一个一个导出，导出到png格式可以选择裁切掉透明的区域，其他格式裁切的图层大小会和图像大小一样3.自动切图开启自动生成器，更改相应图层的后缀，既可自动在目录下生成图片

2017-03-26 22:05:36 369

原创 ps快捷键

1.向下合并图层ctrl+e2.合并可见图层ctrl+shift+e3.盖印图层ctrl+shift+alt+e4.自由变换ctrl+t

2017-03-26 21:42:01 241

原创 ps如何获取段落框的宽高

可通过自由变换工具结合信息面板获取段落框的宽度和高度，快捷键Ctrl+TX,Y代表自由变换框左上角的相对于图像左上角的位置，W,H代表自由变换框的宽度和高度

2017-03-26 15:52:21 672

原创 ps快速裁切

一、二、勾选顶，左，底，右，则四周的相应像素会被裁剪掉，裁剪是针对全图像的，在一个图层上进行了该操作，整个图像会被裁切（其他图层也会被裁切）。

2017-03-19 03:05:56 571

原创 apache配置

ServerrRoot：ServerRoot用于指定守护进程httpd的运行目录，httpd在启动之后将自动将进程的当前目录改变为这个目录，因此如果设置文件中指定的文件或目录是相对路径，那么真实路径就位于这个ServerR oot定义的路径之下。DocumentRoot：服务器的web目录，用于存放web资源的目录Options -Indexes：阻止不存在

2017-03-18 18:07:08 279

原创 git注意事项

工作区有一个隐藏目录.git，这个不算工作区，而是Git的版本库。Git的版本库里存了很多东西，其中最重要的就是称为stage（或者叫index）的暂存区，还有Git为我们自动创建的第一个分支master，以及指向master的一个指针叫HEAD。注意事项：版本回退时会清空暂存区stage里的内容用git rm删除文件时，可以删除暂存区里的文件也可以删除版本库里的文件，不过

2017-03-15 16:23:47 1161

原创 JAVA动态代理

java JDK动态代理java JDK动态代理实现原理是用JDK6 Complier API实现的示例：模仿spring的AOPInvocationHandler.javapackage com.bjsxt.proxy;import java.lang.reflect.Method;public interface Invocation

2017-02-15 22:07:01 208

原创 ReactJs笔记

React的特性一个用于创建可复用，可聚合web组件的js库。只提提供前端MVC框架中的"V"。组件化将js逻辑与html标签紧密相连，极易理解单向数据流数据一旦更新，就直接重新渲染整个app，这是让React如此牛逼的关键点。这个特点是其不再有双向双向数据绑定，数据模型的肮脏检查，确切的dom操作一个Reac

2017-02-14 14:45:23 315

转载 html-Emmet语法

后代：>缩写：nav>ul>linav> ul> li>li> ul>nav>兄弟：+缩写：div+p+bqdiv>div>p>p>blockquote>blockquote>上级：^缩写：div+div>p>span+em^bqdiv>div>div> p>span>span>em>em>p>

2017-02-14 13:05:16 351

原创 Angularjs笔记

Angularangular主要致力于减轻前端人员开发ajax应用程序的痛苦MVCMVC核心概念：把管理数据的代码（model）、应用逻辑代码（controller）、向用户展示数据的代码（view）清晰的分离开。在angular应用中：视图就是DOM，控制器就是javascript类，模型数据则被存储在对象的属性中。数据绑定单向数据

2017-02-12 00:39:12 310

原创 javascript笔记--（第二十五章）JSON

JSONSON和XML类型，都是一种结构化的数据表示方式。所以，JSON并不是JavaScript独有的数据格式，其他很多语言都可以对JSON进行解析和序列化。JSON语法JSON的语法可以表示三种类型的值：简单值，对象，数组。简单值可以在JSON中表示字符串、数值、布尔值和null。但JSON不支持JavaScript中的特殊值

2017-02-09 16:01:21 220

原创 javascript笔记--（第二十四章）事件

事件内联模型这种模型是最传统接单的一种处理事件的方法。在内联模型中，事件处理函数是HTML标签的一个属性，用于处理指定事件。虽然内联在早期使用较多，但它是和HTML混写的，并没有与HTML分离//注意单双引号脚本模型var input = document.getElementsByTagName('input')[0];//得到input对象inpu

2017-02-08 15:34:02 539

原创 javascript笔记--（第二十三章）动态加载脚本和样式

动态脚本动态加载js var flag = true;//设置true再加载 if (flag) { loadScript('test.js');//设置加载的js } function loadScript(url) { var script = document.createElement('script'); script.type = 'text/ja

2017-02-08 12:55:51 340

原创 javascript笔记--（第二十二章）DOM元素尺寸和位置

获取元素CSS大小通过style内联获取元素的大小style获取只能获取到行内style属性的CSS样式中的宽和高，如果有获取；如果没有则返回空。 Document var box = document.getElementById('box'); console.log(box.style.width);//200px console.l

2017-02-07 21:03:30 318

原创 javascript笔记--（第二十一章）DOM操作表格及样式

操作表格标签是HTML中结构最为复杂的一个，我们可以通过DOM来创建生成它，或者HTML DOM来操作。HTML DOM提供了更加方便快捷的方式来操作HTML。 var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = documen

2017-02-07 15:40:49 416

原创 javascript笔记--（第二十章）DOM进阶

DOM类型Node类型Node接口是DOM1级就定义了，Node接口定义了12个数值常量以表示每个节点的类型值。除了IE之外，所有浏览器都可以访问这个类型。以下是常用的Node常量。 //IE不支持，我们可以模拟一个类，让IE也支持。 if (typeof Node == 'undefined') { window.Node = {

2017-02-06 21:32:53 276

原创 javascript笔记--（第十九章）DOM

DOMDOM中的三个字母，D（文档）可以理解为整个Web加载的网页文档；O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；M（模型）可以理解为网页文档的树型结构节点加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。DOM将这种树型结构理解为由节点组成。

2017-02-06 15:46:04 221

原创 javascript笔记--（第十七章）BOM

BOMBOM也叫浏览器对象模型，它提供了很多对象，用于访问浏览器的功能。BOM缺少规范，每个浏览器提供商又按照自己想法去扩展它，那么浏览器共有对象就成了事实的标准。所以，BOM本身是没有标准的或者还没有哪个组织去标准它。window对象BOM的核心对象是window，它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层，对于每个打开的

2017-02-06 13:06:00 252

原创 javascript笔记--（第十六章）匿名函数和闭包

匿名函数 //function(){}//会报错 var fun = function(){};//将匿名函数赋值给变量 (function(){})();//匿名函数自执行 function(){ return function(){};//函数里的匿名函数 }闭包闭包是指有权访问另一个函数作用域

2017-02-05 23:29:02 269

原创 javascript函数与对象深入了解

prototype每一个函数对象都有一个显示的prototype属性,它代表了函数对象的原型(Function.prototype函数对象是个例外，没有prototype属性，)。__proto__每个普通对象都有一个名为__proto__的内部隐藏属性，指向于它所对应的构造函数的原型对象(chrome、firefox中名称为__proto__，并且可以被访问到)。原型链正

2017-02-05 15:20:59 427

springMVC官方源码

websocket+servlet简单案例代码

shiro权限管理（spring+mybatis+shiro）

空空如也