Apr23

不要告诉我你懂margin

你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?……

写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打算写下这篇文章,一来是自己工作中的总结,也是对自己知识的一次梳理。

Margin是什么

CSS 边距属性定义元素周围的空间。通过使用单独的属性,可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School

边界,元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南

我比较喜欢使用“外边距”这个词来解释margin(同理padding可以称之为“内边距”,但是我又恰恰喜欢称呼padding为“补白”或者“留白”),我们可以很清楚的了解到margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。

Margin的特性

margin始终是透明的。

margin通过使用单独的属性,可以对上、右、下、左的外边距进行设置。即:margin-top、margin-right、margin-bottom、margin-left。

外边距的 margin-width 的值类型有:auto | length | percentage

也可以使用简写的外边距属性同时改变所有的外边距:margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 记忆方式是元素周围正上方顺时针“上右下左”记忆。

并且规范还提供了省略的数值写法,基本如下:

1、如果margin只有一个值,表示上右下左的margin同为这个值。例如:margin:10px; 就等于 margin:10px 10px 10px 10px;

2、如果 margin 只有两个值,第一个值表示上下margin值,第二个值为左右margin的值。例如:margin:10px 20px; 就等于 margin:10px 20px 10px 20px;

continue reading »

Apr15

用Margin还是用Padding

用margin还是用padding这个问题是每个学习CSS进阶时的必经之路。

CSS边距属性定义元素周围的空间。通过使用单独的属性,可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School
边界(margin):元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南

padding称呼为内边距,其判断的依据即边框离内容正文的距离,而我喜欢CSS权威指南解释的“补白”(或者叫“留白”),因为他很形象。补白(padding):补白位于元素框的边界与内容区之间。很自然,用于影响这个区域的属性是padding。——CSS权威指南

关于什么时候用margin什么时候用padding,网上有许许多多的讨论,大多数似乎讨论到点上面,却又有些隔靴搔痒的感觉,总是答不到点上。而且margin和padding在许多地方往往效果都是一模一样,而且你也不能说这个一定得用margin那个一定要用padding,因为实际的效果都一样,你说margin用起来好他说padding用起来会更好,但往往争论无果。根据网上的总结归纳大致发现这几条还是比较靠谱的:

何时应当使用margin:
需要在border外侧添加空白时。
空白处不需要背景(色)时。
上下相连的两个盒子之间的空白,需要相互抵消时。如15px + 20px的margin,将得到20px的空白。

何时应当时用padding:
需要在border内测添加空白时。
空白处需要背景(色)时。
上下相连的两个盒子之间的空白,希望等于两者之和时。如15px + 20px的padding,将得到35px的空白。

个人认为:margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干;padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离”。
continue reading »

Apr11

关于23种设计模式的有趣见解

在网上看见了这篇文章,作者以轻松的语言比喻了java的23种模式,有很好的启发作用。
创建型模式
  1、FACTORY—追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说“来四个鸡翅”就行了。麦当劳和肯德基就是生产鸡翅的Factory
  工厂模式:客户类和工厂类分开。消费者任何时候需要某种产品,只需向工厂请求即可。消费者无须修改就可以接纳新产品。缺点是当产品修改时,工厂类也要做相应的修改。如:如何创建及如何向客户端提供。
  2、BUILDER—MM最爱听的就是“我爱你”这句话了,见到不同地方的MM,要能够用她们的方言跟她说这句话哦,我有一个多种语言翻译机,上面每种语言都有一个按键,见到MM我只要按对应的键,它就能够用相应的语言说出“我爱你”这句话了,国外的MM也可以轻松搞掂,这就是我的“我爱你” builder。(这一定比美军在伊拉克用的翻译机好卖)
  建造模式:将产品的内部表象和产品的生成过程分割开来,从而使一个建造过程生成具有不同的内部表象的产品对象。建造模式使得产品内部表象可以独立的变化,客户不必知道产品内部组成的细节。建造模式可以强制实行一种分步骤进行的建造过程。
  3、FACTORY METHOD—请MM去麦当劳吃汉堡,不同的MM有不同的口味,要每个都记住是一件烦人的事情,我一般采用Factory Method模式,带着MM到服务员那儿,说“要一个汉堡”,具体要什么样的汉堡呢,让MM直接跟服务员说就行了。
  工厂方法模式:核心工厂类不再负责所有产品的创建,而是将具体创建的工作交给子类去做,成为一个抽象工厂角色,仅负责给出具体工厂类必须实现的接口,而不接触哪一个产品类应当被实例化这种细节。
  4、PROTOTYPE—跟MM用QQ聊天,一定要说些深情的话语了,我搜集了好多肉麻的情话,需要时只要copy出来放到QQ里面就行了,这就是我的情话prototype了。(100块钱一份,你要不要)
  原始模型模式:通过给出一个原型对象来指明所要创建的对象的类型,然后用复制这个原型对象的方法创建出更多同类型的对象。原始模型模式允许动态的增加或减少产品类,产品类不需要非得有任何事先确定的等级结构,原始模型模式适用于任何的等级结构。缺点是每一个类都必须配备一个克隆方法。
  5、SINGLETON—俺有6个漂亮的老婆,她们的老公都是我,我就是我们家里的老公Sigleton,她们只要说道“老公”,都是指的同一个人,那就是我(刚才做了个梦啦,哪有这么好的事)
  单例模式:单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例单例模式。单例模式只应在有真正的“单一实例”的需求时才可使用。
continue reading »

Apr11

Photoshop图层模式中英文对照及解释

Normal
正常模式,也是默认的模式。不和其他图层发生任何混合。

Dissolve
溶解模式。溶解模式产生的像素颜色来源于上下混合颜色的一个随机置换值,与像素的不透明度有关。

Behind
背后模式。只对图层的透明区域进行编辑。该种模式只有在图层的Lock Transparent Pixels(锁定透明区域)为不勾选状态才有效。

Clear
清除模式。任何编辑会让像素透明化。这种模式和画笔的颜色无关,只和笔刷的参数有关。该模式对形状工具(当FillPixel选项处于勾选状态时)、油漆桶工具、笔刷工具、铅笔工具、填充命令和描边命令都有效。

Darken
变暗模式。考察每一个通道的颜色信息以及相混合的像素颜色,选择较暗的作为混合的结果。颜色较亮的像素会被颜色较暗的像素替换,而较暗的像素就不会发生变化。

Multiply
正片叠底模式。考察每个通道里的颜色信息,并对底层颜色进行正片叠加处理。其原理和色彩模式中的“减色原理”是一样的。这样混合产生的颜色总是比原来的要暗。如果和黑色发生正片叠底的话,产生的就只有黑色。而与白色混合就不会对原来的颜色产生任何影响。
continue reading »

Apr11

引导用户创建心理模型

在IE7中新添加了一项重要的功能--页面缩放。在窗口的右下角以一个下拉菜单显示百分比。此功能的快捷操作是按住ctrl键,然后滚动鼠标滚轮,滚轮向上滚则放大页面,向下滚则缩小页面。在IE6的windows版中,只提供了“文字大小”功能,用来改变页面中相对字号的大小。快捷操作是按住 ctrl键,向下滚动鼠标滚轮则文字放大,向上滚动滚轮则文字减小。在IE7中,这个快捷操作让给了“页面缩放”功能。不过,鼠标滚轮的滚动方向却是相反的。

在IE6中,当向下滚动滚轮时,则页面被“拖拽”长了。用户会很容易记住滚轮滚动方向与页面变化之间的关系。在IE7中,当用户向下拖滚轮的时候,页面的显示比例变小,页面向上运动,缩小了。即使不考虑老IE用户的使用习惯,这个操作至少也不容易让用户正确的记住滚轮滚动方向与页面变化的对应关系。

一个构造复杂的工具,没有必要向用户完全解释清楚内部的工作原理,而用户在使用过程中却往往需要在某种程度上理解这个工具,以便更好的驾驭。此时,用户往往会以自己的方式来理解这个产品。有可能用户的理解与产品实际的工作原理完全不符,但用户却可以通过自己的理解正确预测产品的使用效果。我父亲称这种做法为“琢磨规律”,在交互设计中成之为建立用户的心理模型。
continue reading »