Photoshop图层模式中英文对照及解释
Normal正常模式，也是默认的模式。不和其他图层发生任何混合。
Dissolve溶解模式。溶解模式产生的像素颜色来源于上下混合颜色的一个随机置换值，与像素的不透明度有关。
Behind背后模式。只对图层的透明区域进行编辑。该种模式只有在图层的Lock Transparent Pixels（锁定透明区域）为不勾选状态才有效。
Clear清除模式。任何编辑会让像素透明化。这种模式和画笔的颜色无关，只和笔刷的参数有关。该模式对形状工具（当FillPixel选项处于勾选状态时）、油漆桶工具、笔刷工具、铅笔工具、填充命令和描边命令都有效。
Darken变暗模式。考察每一个通道的颜色信息以及相混合的像素颜色，选择较暗的作为混合的结果。颜色较亮的像素会被颜色较暗的像素替换，而较暗的像素就不会发生变化。
Multiply正片叠底模式。考察每个通道里的颜色信息，并对底层颜色进行正片叠加处理。其原理和色彩模式中的“减色原理”是一样的。这样混合产生的颜色总是比原来的要暗。如果和黑色发生正片叠底的话，产生的就只有黑色。而与白色混合就不会对原来的颜色产生任何影响。
ColorBurn颜色加深模式。让底层的颜色 ...
CSS设计模式之三权分立模式篇
市面上我们常常会看到各种各样的设计模式书籍，Java设计模式、C#设计模式、Ruby设计模式等等。在众多的语言设计模式中我唯独找不到关于CSS设计模式的资料，即使在网上找到类似内容，细细一看之下才发觉是南辕北辙。经过浩瀚文章搜索发掘下依旧一无所获之后，直接导致了我萌生一股写一篇CSS设计模式的冲动，至此写下这篇文章，其中叙述如有不当之处，也恳请各位提出意见，分享出您宝贵的经验。
在写页面之中，width, margin, padding这三个CSS属性可以说是用到频率最高的几个属性之一。但根据我的观点来看，许多人，甚至于大多数前端对于这三个属性的书写把握上乏善可陈，以至于兼容和灵活性不得兼顾，导致日后的开发维护成本直线上升，代码不断增长，覆盖重写样式，接着再修复一个又一个的Bug。这样的情况下，使用一种合理高效的CSS设计模式不失为一种明智的选择，个人称之为：width,margin,padding三权分立模式(以下简称三权分立模式)。
什么是三权分立模式：
说明这个模式之前，必定先要明白什么是盒子模型，你可以参考如下Firebug的盒模型截图：
注意：在图上表示margin的颜色为 ...
攻略强制换行与强制不换行
强制换行与强制不换行问题曾经一度困扰着我，每当遇到换行问题时候那就是痛苦回忆的开始，现在终于痛定思痛，一鼓作气把这个长期顽固问题给解决。
强制换行与强制不换行用到的属性
我们一般控制换行所用到的CSS属性一共有三个：word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的。首先我们得知道这三个属性到底是做什么用地：
word-wrap语法：
word-wrap: normal(默认) | break-word各个浏览器均能识别
参数：
normal: 允许内容顶开指定的容器边界。break-word: 内容将在边界内换行。必要时会触发word-break（注意：请分辨清楚word-break和break-word这俩个是不同的东西，一为属性另为参数）。
说明：
word-wrap是控制是否“为词断行”的，设置或检索当前行超过指定容器的边界时是否断开转行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。
范例：
congratulation这个单词属于长串英文，word-wrap:break-word ...
overflow知多少
最近在研究OOCSS，当打开template.css阅读第一行时，震惊了，第一眼居然没看懂。。。。。。以下就是OOCSS下的template.css第一行代码：
.body{overflow:hidden; _overflow:visible; _zoom:1;}
.main{overflow:hidden; _overflow:visible; _zoom:1;}
后来分析这段代码，不分析不知道，一分析吓一跳，短短三个属性竟然包含了浮动、浮动清除、Haslayout、IE6兼容性、最小高度不同浏览器下实现、浏览器Hack、overflow的各种用途等等一系列的问题及知识点。废话不多说，且荣我细细道来这行代码的可怕之处！
在分析之前，先补充一下是基本知识，否则等最后分析了半天你听的一头雾水这不是本文想达到的效果。
overflow是什么，有什么用途：
overflow属性规定当内容溢出元素框时发生的事情。——W3shcool
根据CSS的盒模型概念，页面中的每个元素，都是一个矩形的盒子。这些盒子的大小、位置和行为都可以用CSS来控制。对于行 ...
z-index下的一些知识
前几天工作的时候遇到一个问题，在IE6下select 这个控件似乎无法用z-index 属性隐藏，接下来就开始了寻找问题的解法，总结了一些z-index 的知识。
z-index 定义和用法
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。——W3shcool
z-index：auto | number
默认值：auto 堆叠顺序与父元素相等
number：无单位的整数值，可为负数
JavaScript 语法： object.style.zIndex=”1″
注意：z-index 属性适用于那些被定义了除position:static 外任意属性的元素中。即z-index 仅能在定位元素上奏效（position: absolute | relative | fix）。
stacking context & stack level & z-index 是什么
stacking contex ...
Web前端研发工程师编程能力飞升之路-转载
今天看到这篇文章。写的非常有意思。发现自己还有很长的一段路要走。
【背景】
如果你是刚进入WEB前端研发领域，想试试这潭水有多深，看这篇文章吧；
如果你是做了两三年WEB产品前端研发，迷茫找不着提高之路，看这篇文章吧；
如果你是四五年的前端开发高手，没有难题能难得住你的寂寞高手，来看这篇文章吧；
WEB前端研发工程师，在国内是一个朝阳职业，自07-08年正式有这个职业以来，也不过三四年的时间。这个领域没有学校的正规教育，没有行内成体系的理论指引，几乎所有从事这个职业的人都是靠自己自学成才。自学成才，一条艰辛的坎坷路，我也是这样一路走来。从2002年开始接触WEB前端研发至今已然有了9个年头，如今再回首，期间的走了很多弯路。推已及人，如果能让那些后来者少走些弯路，辛甚辛甚！
【前言】
所谓的天才，只不过是比平常人更快的掌握技能、完成工作罢了；只要你找到了正确的方向，并辅以足够的时间，你一样能够踏上成功彼岸。
本文将WEB前端研发编程能力划分了八个等级，每个等级都列举出了对应的特征及破级提升之方法，希望每位在看本文的同学先准确定位自己的等级(不要以你目前能力的最高点，而是以你当前能力的中档 ...
用Margin还是用Padding
用margin还是用padding这个问题是每个学习CSS进阶时的必经之路。
CSS边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School边界(margin)：元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南
padding称呼为内边距，其判断的依据即边框离内容正文的距离，而我喜欢CSS权威指南解释的“补白”（或者叫“留白”），因为他很形象。补白(padding)：补白位于元素框的边界与内容区之间。很自然，用于影响这个区域的属性是padding。——CSS权威指南
关于什么时候用margin什么时候用padding，网上有许许多多的讨论，大多数似乎讨论到点上面，却又有些隔靴搔痒的感觉，总是答不到点上。而且margin和padding在许多地方往往效果都是一模一样，而且你也不能说这个一定得用margin那个一定要用padding，因为实际的效果都一样，你说margin用起来好他说padding用起来会更好，但往往争论无果。根据网上的总结 ...