1、什么是Sublime Text ？
Sublime Text 是轻量、简洁、高效、跨平台的编辑器，具有可扩展的功能，并包含大量实用插件，我们可以通过安装自己领域的插件来成倍提高工作效率。
2、Sublime Text 的官方网站？
http://www.sublimetext.com/
说明：Sublime Text 是一款收费软件，建议用于开发的机构或个人付费使用，如果只是单纯为了学习，可以使用破解版。下面给大家共享的是中文破解版的。
网盘共享地址： 链接：http://pan.baidu.com/s/1gfC5iRT 密码：9wkx
3、Sublime Text 3的使用？
从网盘提取下载解压，看到如下目录，双击sublime_text.exe即可
显示如下界面：
我们可以对它的主题进行设置, 这里介绍用插件Soda Theme来设置Sublime Text的主题效果。
4、Sublime Text 的插件官方网站：https://packagecontrol.io/
可以搜索你需要的插件，如下图：
5、soda theme 的下载与配置？
1）下载：
通过上述链接进入的theme-soda页，可以看到如下提示：
点击页面中提示的下载地址： https://github.com/buymeasoda/soda-theme ，出现下图下面按照提示下载即可：
2）配置：
Theme-Soda页的描述非常清晰，按照说明按步骤操作即可，以soda-dark主题为例：
第一步：把你下载下来的文件解压，重新命名为Theme – Soda 。
第二步：找到你的packages目录，如下图：
第三步：把Theme – Soda文件夹拷贝到Sublime Text 3\Data\Packages目录下
第四步：打开用户设置，添加你的主题效果：“theme”: “Soda Dark.sublime-theme”
保存配置文件，重新启动sublime_text.exe，效果如下图所示：
第五步：通常配合语法高亮的配色方案，如下进行下载，解压，设置
1）
2）
3）
配置文件保存后，最终效果如下所示：
总结：关于Sublime Text 3有很多提高工作效率的插件，大家可以根据需要到它的插件官方网站去下载，其他插件的下载与配置的流程与介绍的Soda Theme的操作大同小异，按照网站上的说明操作即可。
因为每个前端工程师编写代码的风格都不太一样，所以Sass的编译也非常人性化的提供了不同风格的编译方式，主要分为4种。
比如下面这一段Sass代码，我们来看看在不同风格下，会编译成什么样吧：
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } 1.嵌套输出 nested:
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } 2.展开输出 expanded：
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } 其实可以看出来和嵌套输出挺像的，只不过闭合的大括号会另起一行（个人比较喜欢这种）
转自：https://segmentfault.com/a/1190000000494090
Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它作为Web前端开发性能调试的必备工具。就连隔壁的产品小哥都知道打开F12改一下页面元素的标签代码就能看到页面效果，这年头谁不会用Chrome开发者工具呀。
但是Chrome能做的远不止你平常用的那么简单，这一个小小的开发工具集成了很多高级的功能你未必知道。我打算把一些Chrome DevTools上使用的高级技巧写成《你不知道的Chrome DevTools》这一系列的博文，希望大家一起学习学习。
关于DevTools插件 应用于Chrome开发者工具的插件不同于普通的Chrome应用或者插件，它是给你的Chrome DevTools扩展更多的功能，方便你查看和调试web程序。它的安装方法跟Chrome应用的安装方法是一样的，可以通过Chrome应用商店或者直接crx安装文件来安装。
下面推荐几款DevTools插件，有些是博主亲自试用过的，希望对大家的开发调试有帮助。
jQuery Audit 安装地址：Chrome应用商店链接
jQuery Audit是让你可以在DevTools查看页面节点的jQuery属性和数据，方便你调试使用jQuery库的web应用。你可以在上面看到你选中的页面元素的jQuery的events、data等属性。例如，很多人都喜欢用$.data()来让jQuery节点对象缓存一些数据，通过jQuery Audit你可以很方便地看到你缓存的数据。
jQuery Audit会自动在Elements面板的最前面加上window和document对象，这对你调试全局的对象很有帮助。例如，出于对性能的考虑，当你想查看绑定在window上绑定了哪些事件的时候，jQuery Audit可以帮你找到。
其他详细的用法可以查看官方文档。
JS Runtime Inspector 安装地址：Chrome应用商店链接
JS Runtime Inspector让你可以在DevTools上直接通过关键词来搜索页面上JavaScript对象。当你想知道此时你的程序中某个JavaScript对象的属性和数据，然而你并不知道它所在哪个作用域，只知道对象名称，因而你不能在控制台用window.xxxObj的方式来访问这个对象，所以此时你可以借助JS Runtime Inspector来查找这个对象了。
如图所示，可以通过对象名称和值来匹配查找，点击搜索后会在控制台输出查找到的结果。
Devtools redirect 安装地址：Chrome应用商店链接
Devtools redirect可以帮你给页面上的网络连接重定位。事实上网络请求重定位的功能，可以用fiddler或者ngix轻松实现，但Devtools redirect可以让你直接在浏览器上配置这些重定位。
jQuery Debugger 安装地址：Chrome应用商店链接
jQuery Debugger顾名思义就是帮你debug jQuery啦:-) 它主要有两大功能：
1. 通过选择器字符串来查找页面上的某个元素，等同于你在代码里写$('ul>li')这样的方式。
2. 查看页面某个元素的jQuery对象属性。这有点类似前面说过的jQuery Audit插件。
Grunt DevTools 安装地址：Chrome应用商店链接
一个可以在DevTools快速运行和查看Grunt任务的插件。有了它，你就不用经常地在浏览器工具、terminal和编辑器上来回切换窗口了。
详细描述可以查看官方文档。
CoffeeScript Console 安装地址：Chrome应用商店链接
有了它，你可以在DevTools上直接执行CoffeeScript和JavaScript之间的代码转换。
Angular Batarang 安装地址：Chrome应用商店链接
这个不用解释，开发和调试Angular.js应用的神器。
类似的针对不同js框架的调试工具还有：Backbone DevTools 、 KnockoutJS Context
DevTools Theme 最后介绍的不是DevTools的插件，而是主题。大家或许有疑问：这个由什么用呢？嗯，没错，就是装B用的。当别人看着你在调试网页的时候，打开的Chrome开发工具竟然是如此高大上。。。
参考文章：http://blog.chinaunix.net/uid-22414998-id-2876249.html
我想要的效果如下：
实际却如下：
列头之间的那条白线很是不爽
解决方法，给table设置collapse即可：
table
{
…
border-collapse:collapse; }
APP、M站下的H5Video标签问题 全屏播放、竖屏和横屏 封面图问题 自动播放 直播 html5和flash的播放源选择 全屏播放： APP下，Android手机不支持全屏，IOS只支持竖全屏
M站下，根据不同浏览器，可能有不同表现：例如UC浏览器是支持横竖全屏的，但是原生Safari则不支持
结论：Video标签全屏依靠浏览器（APP）的控制，需要关注APP是否设置禁用了相应的接口。否则只能用CSS或者JS来监测全屏再Hack处理。
video全屏的处理 IOS自动竖全屏
ios下设置了webkit-playsinline="true" playsinline 以后，就可以不全屏播放
封面图问题 在ios下，视频被嵌入后，媒体的元数据加载完成后，会以全屏的形式显示出来，或者加个poster，可以看到画面。但在android下，多数机子是不显示视频画面的，要不就是显示一个黑色的还不是全屏的播放控件，即使及加个poster封面也不济于是。因为poster在android兼容的并不好，不如在视频上层加个div铺张图片，这个比较好的处理方式应该是：视频上加一层div做封面，由于android不允许视频上层有东西，所以首先将视频设为的width：1px，当播放后，上层的封面remove掉，同时width：100%或者你想要的宽度。
自动播放： 在Android下无法通过设置autoplay，在IOS上，除非是无声音，否则无法自动播放。（IOS新法案）。如果想用js控制播放，也必须要用户第一次点击了屏幕后才可以进行(touchstart事件)
IOS10视频播放新政策
至于「用户主动操作」具体指的是哪些行为，苹果官方有详细的说明：
点击视频播放按钮； 触发 touchend、click、doubleclick 或 keydown 事件，且在事件处理函数中直接调用 video.play() 方法。显然，button.addEventListener('click', () => { video.play(); }) 满足要求；而 video.addEventListener('canplaythrough', () => { video.play(); }) 不满足要求； 值得注意的是，上面讨论的是 iOS 自带 Safari 的视频播放政策。对于 iOS APP 而言，开发者在给 webview 设置 mediaPlaybackRequiresUserAction 和 allowsInlineMediaPlayback 属性之后，页面中的 ` 标签就可以通过autoplay和webkit-playsinline` 属性来启用自动播放和内联播放功能。
使用折中方案：当用户第一次touch的时候，触发play，让视频播放。同时设置playsinline和autoplay方法，提供给安卓全屏
window.addEventListener('touchstart', function videoStart() { hidePlayIcon(); $('#videosrc')[0].play(); this.removeEventListener('touchstart', videoStart); }); 其他问题： 直播场景下尝试过优酷打通，但是没试过直接做成直播平台的方案。
色相：
红 —— 绿 就是色相变化，色相是色彩的首要特征，简单来说就是一眼望去是什么颜色，就是色相。
明度：
黑 —— 白 就是明度变化，就是感官上的比较亮比较暗，除了简单的添加黑白使明度变化外，不同纯色也有明度差异，把不同的纯色去色后，就可以比较明度了。
纯度： 简单来说就是饱和度，颜色越灰，一眼望去色相越不明确，纯度越低。
P.s.色环上的相邻色混合不会降低纯度，比如黄加红得到的橙色，纯度就不降低，色环的相反色混合则会降低纯度，例如红与绿。
H=色相
决定是什么颜色
S=纯度
决定颜色浓淡
B=明度决定照射在颜色上的白光有多亮 RGB: R.红色(Red) G.绿色(Green) B.蓝色(Blue) .RGB是光学三原色，所以普遍用于电视、电脑用来发布在网络
CMYK: C. 青色(Cyan) M. 洋红色(Magenta) Y. 黄色(Yellow) K. 黑色(blacK) .CMYK是印刷用的颜色，印刷RGB会失真。 Lab模式的定义
：Lab模式是由国际照明委员会（CIE）于1976年公布的一种色彩模式。是CIE组织确定的一个理论上包括了人眼可见的所有色彩的色彩模式。Lab模式弥补了 RGB与CMYK两种彩色模式的不足，是Photoshop用来从一种色彩模式向另一种色彩模式转换时使用的一种内部色彩模式。Lab模式也是由三个通道组成，第一个通道是明度，即“L”。a通道的颜色是从红色到深绿；b通道则是从蓝色到黄色。两个分量的变化都是从-120到+120。当a=0、 b=0时显示灰色，同时L=100时为白色，L=0时为黑色。如果一定要用Lab模式来表达颜色，那么R色值为：L=54、a=81、b=70；G色值为：L=88、a=-79、b=81；B色值为：L=29、a=68、b=-112；C色值为：L=62、a=-31、b=-64；M色值为：L=48、 a=83、b=-3；Y色值为：L=94、a=-14、b=100。大致上说：在表达色彩范围上，最全的是Lab模式，其次是RGB模式，最窄的是 CMYK模式。也就是说Lab模式所定义的色彩最多，且与光线及设备无关，并且处理速度与RGB模式同样快，比CMYK模式快数倍。（以上一段能理解就理解吧！）Lab模式的调色原理：LAB 模式大家都知道有三个通道，一个是明度通道另外两个是A和B通道。其中，明度通道就是亮度通道你对它进行调整颜色是不发生变化的！…
WebStorm 自定义字体+颜色+语法高亮+导入导出用户设置 WebStorm是一个捷克公司开发的，功能虽然很强大，但UI貌似一直不是东欧人的强项。WebStorm默认的编辑器颜色搭配不算讲究，我看习惯了VS2012的Dark Theme，再看这个顿觉由奢入俭难，非得改改颜色才行。
新建Scheme + 修改字体 ctrl+alt+s打开Settings界面，Editor > Colors&Fonts > Font。
Default scheme是亮色调，但我想定制一套暗背景的环境，所以在右侧Scheme name下拉框中选择Monokai，以此作为修改的基础，然后点击Save as，给自己新建的Scheme起个名字吧，如下图：
这里面可以设置字体（我一般选择Consolas），字体大小，行间距。
自定义语法高亮 用ctrl+alt+s打开Settings界面，Editor > Colors&Fonts。
不同语言有各自的语法高亮规则，但有一部分是通用的（General），我们首先来设置General，然后再根据需要设置不同语言的语法高亮。
General的设置
普通文本：default text
折叠文本: Folded text
光标: Caret
光标所在行: Caret row
行号: Line number
TODO: TODO default
光标下变量高亮：Search result
搜索结果：Text search result
匹配的括号：Matched brace
不匹配的括号：Unmatched brace
未使用的符号：Unused symbol
左边空隙（行号，断点）：Gutter background
选中的文本背景色：Selection background
选中的文本前景色：Selection foreground
区分语言的设置
举例来说，如果要更改Javascript的语法高亮，就在上图中选择Javascript，然后再进行详细设置。具体设置项就不赘述了。
显示行号 + 自动换行 如果用Vim编程，行号是非常必要的辅助。WebStorm默认是不显示行号的，没关系，显示行号非常的容易。
只要在代码左侧的gutter区域点右键，就会出现下图的菜单：勾选上Show Line Numbers即可。
另外，勾选上图中的Use Soft Wraps就启用了WebStorm的自动换行的功能，即过长的代码行不会超出屏幕，不会出现横向的滚动条。
值得一提的是，标准的Vim，jk是移到上一行下一行，如果代码自动换行了，被分割成的两行虽然看起来是两行，但其实是一个逻辑行，这时候用jk是上移下移一个逻辑行。这种情况下，如果要从同一逻辑行的“第一行”移动到“第二行”，需要按gj，即先按g再按方向。虽然Vim提供了这个方法，但还是经常按错。
bootstrap3 modal可以通过remote参数加载一个远程页面在.modal-content中，这可以帮助我们解决许多动态内容的问题。但同时它也存在一个问题，就是会缓存页面内容。解决的方法：
//modal初始化和打开之前清除页面内容和缓存数据 $('#myModal .modal-content').empty(); $('#myModal').removeData('bs.modal').modal({ remote: "xxx" }); 这样就能解决缓存问题了。 需要注意的是boostrap4中去掉了modal的remote参数，也就是说不能在modal中load其他页面了，降低了灵活性。
颜色的几种写法 1.颜色第一种写法:用颜色名来表示,red,blue,green,pink,dark,yellow等
background-color: green;
效果：
2.颜色第二种写法:通过16进制值表示(把图片拖进PS工具，按I，按住CTRL左击你所想要的颜色就能获取颜色代码);
纯红:#FF0000=#F00;
黑色:#000000=#000;
纯白:#FFFFFF=#FFF;
background-color: #7c5c2b;
效果：
3.颜色第三种写法:通过rgb(0-255,0-255,0-255);rgb(255,255,255)代表纯红和纯绿和纯蓝混合
background-color:rgb(144,134,156);
效果：
4.颜色第四种写法:采用百分比,相对于255来取百分比.例如;
background-color:rgb(10%,40%,32%);
效果：
5.颜色第五种颜色写法:用rgba(0-255,0-255,0-255,0-1);
其中a表示颜色的透明度,取值范围为0-1(可写小数),0表示完全透明
background-color:rgba(255,0,0,0.1);
效果：
CSS3的出现使得一些以前需要用图片的背景效果也可以直接用CSS实现，今天分享一下三个用CSS3做的特殊背景。这三个例子都使用到了CSS3的线性渐变。
下面以webkit引擎下的线性gradient用法为例：
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新线性渐变写法 -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则 对于最新的线性渐变规则，第一个参数为渐变的方向，top 是从上到下、left 是从左到右，若为left top则为从左上角到右下角，也可以设置为角度，表示从某个特定的角度开始，后面的参数则为起点颜色和终点颜色，也可以在中间加上中间点颜色。 对于老式语法，type指的是渐变类型，linear（线性渐变）或radial（径向渐变），后面则依次为起点、终点位置，起点、终点颜色，中间也可加上中间点颜色，用color-stop()函数，有两个参数，第一个参数表示位置，0表示起点，0.5表示中点，1表示终点，第二个参数为颜色值。 下面介绍三个例子，所有例子都采用如下html语句：
<div class="test">div> 1.切角背景效果 .test{ width: 200px; height: 200px; background: -webkit-linear-gradient(right bottom, transparent 15px, #99CC99 0); } 上述代码首先给div设置了高度和宽度，然后给div的背景设置了一个线性渐变，从div的右下角开始渐变，渐变的开始是transparent也就是透明，一直持续到15px，之后立即变到颜色为#99CC99，只要#99CC99 后面的数值小于15px都会立即变到此颜色，没有渐变效果。 效果图如下： 如果我们想要在div的左下角和右下角都做出切角的效果就要用到background-size属性和background-repeat属性，具体如下：
.test{ width:200px; height:200px; background: -webkit-linear-gradient(right bottom, transparent 15px, #99CC99 0px) right,-webkit-linear-gradient(left bottom, transparent 15px, #99CC99 0px) left; background-size:50% 100%; background-repeat:no-repeat; } 上述代码给background设置了两个线性渐变，但两个渐变会彼此覆盖，因此我们需要将它们的宽度都缩小为50%，让每个渐变都只应用于div的一半，但是如果我们没有设置background-repeat为不重复的话，每个渐变还是会重复两次，依旧会彼此覆盖，所以我们设置background-size是为了让两个渐变都缩小为50%，并且不重复，这样右下角切角的位于右侧，左下角切角的位于左侧，就能够正常实现这个效果了。 效果图如下： 2.