<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>I-Wui Team</title>
	<atom:link href="http://www.i-wui.com/blogv2/?feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://www.i-wui.com/blogv2</link>
	<description>关注设计，关注体验，关注前端 - 艾维前端工作室</description>
	<lastBuildDate>Sun, 09 Oct 2011 07:07:52 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>关于容器透明度以及你可能不知道的ie hack</title>
		<link>http://www.i-wui.com/blogv2/?p=378</link>
		<comments>http://www.i-wui.com/blogv2/?p=378#comments</comments>
		<pubDate>Sun, 09 Oct 2011 07:07:52 +0000</pubDate>
		<dc:creator>tyson</dc:creator>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[filter]]></category>
		<category><![CDATA[hack]]></category>
		<category><![CDATA[ie]]></category>
		<category><![CDATA[opacity]]></category>
		<category><![CDATA[rgba]]></category>
		<category><![CDATA[背景色透明]]></category>

		<guid isPermaLink="false">http://www.i-wui.com/blogv2/?p=378</guid>
		<description><![CDATA[本文介绍容器透明度的另一种做法，即纯背景色透明，并且给出了兼容ie和其他现代浏览器的写法以及一些注意事项。]]></description>
		<wfw:commentRss>http://www.i-wui.com/blogv2/?feed=rss2&amp;p=378</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>艾维OA雏形，这不只是一次试验</title>
		<link>http://www.i-wui.com/blogv2/?p=362</link>
		<comments>http://www.i-wui.com/blogv2/?p=362#comments</comments>
		<pubDate>Sat, 13 Aug 2011 17:27:05 +0000</pubDate>
		<dc:creator>avenir</dc:creator>
				<category><![CDATA[虾饺烧卖]]></category>

		<guid isPermaLink="false">http://www.i-wui.com/blogv2/?p=362</guid>
		<description><![CDATA[
从无到有，艾维都坚持着小团队敏捷和灵性，另一方面，随着业务规模的一步步扩大，我们又开始感觉到，仅仅能finish the job是不够的，艾维迫切需要另一次飞跃，因而有了这一次的契机，让艾维思考，我们离专业到底还有多远。

源起
OA的想法源于最近不断有潜在客户向艾维反映，艾维过往的案例实在太少，而当我们开始讨论计划更新网站案例时，却发现，其实零零散散，艾维承接的项目已超过数十个，只是谁也没有记录、跟踪过项目的完成情况，遇到的问题等等这些属于团队的无形资产。

实现方案
此时，团队项目管理工具的念头开始在艾维心中萌生，为此我们曾考虑独立开发简单的项目记录系统，然后在迭代功能，但考虑到开发成本太大，团队近期事务繁忙，因而我们将目光投向了开源系统。

系统选择
在系统的选择方向上，我们不仅希望它能完成我们目前迫切需要的：项目跟踪、统计记录功能，还期望它具有灵活的扩展性，以便日后能让我们自主开发适应团队模式的功能，我们更希望它背后有活跃的社区。基于以上考虑，我们选择基于Drupal开发的Open Atrium系统。

OPEN ATRIUM
openatrium默认提供以下功能，但显然博客、手册等都不说团队现阶段需要的功能。


openatrium系统层次分为：组群-&#62;项目-&#62;案例-&#62;会员，从下图我们大概能看出


然后，我们重点介绍下案例情况，创建案例能指定案例的负责人及勾选相关人员（每次修改都有邮件通知）



同时，组群内的所有成员都可以浏览组群内的所有案例


最后，在成员管理方面，除基本的资料维护外，还要日历、事件等功能（逐步再开启这个部分功能）


由于基于Drupal开发，开源社区已贡献了大量的插件能在未来使用到。

计划
除项目工具外，目前团队迫切需要的还有文件共享工具，同时如何将OA和i-Wui网站后台、SVN流程结合，也应是未来艾维所考虑的重点。

最后
向我们不断为我们提供信心的楷模37signals，以及令人佩服的Drupal开源社区致敬
]]></description>
		<wfw:commentRss>http://www.i-wui.com/blogv2/?feed=rss2&amp;p=362</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>经典重现：基于canvas的俄罗斯方块</title>
		<link>http://www.i-wui.com/blogv2/?p=355</link>
		<comments>http://www.i-wui.com/blogv2/?p=355#comments</comments>
		<pubDate>Fri, 10 Jun 2011 20:08:29 +0000</pubDate>
		<dc:creator>tyson</dc:creator>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[canvas]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[俄罗斯方块]]></category>

		<guid isPermaLink="false">http://www.i-wui.com/blogv2/?p=355</guid>
		<description><![CDATA[这是一个用canvas写的俄罗斯方块游戏应用。]]></description>
		<wfw:commentRss>http://www.i-wui.com/blogv2/?feed=rss2&amp;p=355</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>小试html5.基于Canvas的简易画板</title>
		<link>http://www.i-wui.com/blogv2/?p=344</link>
		<comments>http://www.i-wui.com/blogv2/?p=344#comments</comments>
		<pubDate>Tue, 26 Apr 2011 14:46:27 +0000</pubDate>
		<dc:creator>jianye</dc:creator>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[canvas]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://www.i-wui.com/blogv2/?p=344</guid>
		<description><![CDATA[
最近开始接触html5的相关内容，也在重新从零开始学js，于是尝试着把相关的内容结合在一起写了一个简易的在线画板。
支持度：Chrome 1.0+,Firefox 1.5+,Opera 9.0+,Safari 1.3+
推荐浏览器：Chrome 2+,Firefox3.7+,Safari 3.1+,Opera 10.5+.
PS. 可能会出现提示安装插件的提示，是提示安装wacom数位板驱动的插件，不使用数位板的客官们直接跳过即可。
演示地址：
http://xujianye.com/test/drawingBoard/index.html

It all begins here.
当初突然想到做这个简易画板是因为最近一直占据着我的时间的无非就是3件事：【重新学习javascript】 &#8212; 【接触一下html5 】&#8211; 【闲暇时用数位板涂鸦消遣】。
然后想到，为什么不把我正在做的三样东西都结合起来，做一个有趣的东西？但当时出现的瓶颈就是，如何去做到“画”的即时交互效果，然后在找引入wacom数位板插件的时候，刚好看见wacom官网上的一个demo，就是用html写出了一个很简单的演示页面，虽然运行起来还是不少问题，但是已经解决了我最大的疑惑，就是怎样做到我想要的“画”的感觉，
解决了最疑惑的一点，于是就开始展开尝试~参考演示中在鼠标按下时动态绑定鼠标移动的事件，松开鼠标时解除事件的基本逻辑，然后加入修改颜色，粗细，清空，生成png的动作~
慢慢就变成了这样的一个demo.
小试一下~做得不完善请见谅哈~
what&#8217;s more..
接下来要做的，就是打算继续去优化一下~主要解决2个问题：
1. 实现橡皮擦功能，由于有背景图案所以不能直接把颜色设为白色伪装橡皮擦；而使用clearRect的方法会产生很大的锯齿而且快速移动的时候会变成擦出一个个有间隙的方形；
2.按Joe哥仔的建议尝试用类的方式去实现；
持续更新哈！
]]></description>
		<wfw:commentRss>http://www.i-wui.com/blogv2/?feed=rss2&amp;p=344</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>与其在别处仰望，不如在这里并肩——新人加入介绍贴</title>
		<link>http://www.i-wui.com/blogv2/?p=311</link>
		<comments>http://www.i-wui.com/blogv2/?p=311#comments</comments>
		<pubDate>Mon, 11 Apr 2011 18:28:19 +0000</pubDate>
		<dc:creator>sheen</dc:creator>
				<category><![CDATA[虾饺烧卖]]></category>
		<category><![CDATA[fresh]]></category>
		<category><![CDATA[i-wui]]></category>
		<category><![CDATA[介绍]]></category>
		<category><![CDATA[全新]]></category>
		<category><![CDATA[新人]]></category>

		<guid isPermaLink="false">http://www.i-wui.com/blogv2/?p=311</guid>
		<description><![CDATA[
艾维作为一个小型团体，人数一直不多，尽可能保持在一个精简适中的状态。而近期一口气纳入三位新人，他们也确实有自己独特所在，为团队灌入了新鲜的思维与活力。
延续上一篇末未完成的，现在来介绍一下新加入的成员吧！


阿山 视觉设计
特点：90后毛凳体抽象派设计湿，抽象化生活，咆哮党，爱漫画爱插画，有事没事鼓捣小板子，android用户但不玩android应用，写实风icon爱好者。
新浪微博：http://t.sina.com.cn/cccloud
腾讯微博：http://t.qq.com/eleveneyes

Foxy 用户研究与交互设计
特点：掌握无敌速记法之奇女，出身于计算机，成长于用研与交互，绝对理论派，控微博控知乎，爱读书也爱玩乐，爱钢琴爱键盘爱敲击一切能敲击之物品，小身躯有无穷爆发力。
个人博客：http://www.iamhulin.com/
新浪微博：http://t.sina.com.cn/foxyhulin
腾讯微博：http://t.qq.com/hulin_091126

zhoon  前端开发
特点：迅速成长中的90后前端开发小男儿，爱篮球爱运动，好美女好美色，爱动漫，喜欢拿玩具枪带着墨镜拍照，正在疯狂啃书并且不断地完成无穷无尽的需求中&#8230;
个人博客：http://www.zhoonchen.com/blog/
新浪微博：http://t.sina.com.cn/1715682243
腾讯微博：http://t.qq.com/zhoonChen
三位强力人员的加入，为艾维补充了新的活力，当然团队仍需要大家共同努力的，我们相信teamwork才是至关重要的！

废话不多说，今后好好干活啊各位！！
]]></description>
		<wfw:commentRss>http://www.i-wui.com/blogv2/?feed=rss2&amp;p=311</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>你好，我们是艾维(ver 2.0)!</title>
		<link>http://www.i-wui.com/blogv2/?p=247</link>
		<comments>http://www.i-wui.com/blogv2/?p=247#comments</comments>
		<pubDate>Sat, 09 Apr 2011 16:46:49 +0000</pubDate>
		<dc:creator>sheen</dc:creator>
				<category><![CDATA[虾饺烧卖]]></category>
		<category><![CDATA[i-wui]]></category>
		<category><![CDATA[全新]]></category>
		<category><![CDATA[周年]]></category>
		<category><![CDATA[改版]]></category>
		<category><![CDATA[生日]]></category>
		<category><![CDATA[艾维]]></category>

		<guid isPermaLink="false">http://www.i-wui.com/blogv2/?p=247</guid>
		<description><![CDATA[
您好，我们是艾维工作室（ver 2.0）！
经历了前期的评估策划，全体成员的多次讨论，艾维工作室首页的改版在2011年前已经进入了实质性的工作。
在艾维工作室即将两周岁的时刻，我们隆重地低调发布全新主页改版。

在这里特别感谢sheen童鞋的全新设计，杯面哥的全力重构，Tyson的后台支持，不可忽略的还有波波以及各位元老人物Avenir、joe的各方面意见与支持。全新的改版来自团队的努力，与大家的付出分不开。


与此同时，我们也提出全新的视觉标识，期待为我们的品牌提升一个档次，另外我们也提出全新理念：团队、专业、分享、创意。

Teamwork 团队
i-Wui是一个全新的团队，我们认为团队的合作精神才是一切的基础。我们的成员来自不同的领域，不同的个性和思维方式让我们拥有无限创意，而与此同时我们优秀的团队合作机制让我们在奋斗的旅途上并肩作战，携手共进。
Professional 专业
i-Wui聚集了国内设计与前端开发的优秀人才，服务领域涉及网页设计、界面设计、图标设计、前端开发、网站建设等，交叉的学科背景给我们带来了全新的视觉与思维能力，力求用最专业的态度为您提供优质服务。
Sharing 分享
-Wui不仅仅活跃于服务领域，同时也注重与外界交流设计心得与开发经验。凭借i-Wui的优秀的团队精神与浓厚的学习氛围，我们相信不断地分享与学习才是提升实力的关键，而这一点也是我们向卓越进发的动力源泉。
Creativity 创意
i-Wui是一个充满创意与活力的年轻团体。我们一直相信创新精神是一个团队能否走得更远的关键。我们的想法大胆而富有新意，在工作的同时i-Wui也尽力表达自己独特的想法，让您也能看得到我们不断前进的脚步。
另外透露一下，艾维近期加入了三位实力干将，他们都来自不同领域，将在下一期为大家揭晓。
希望即将到来的新的一岁里面，艾维能越来越好！
]]></description>
		<wfw:commentRss>http://www.i-wui.com/blogv2/?feed=rss2&amp;p=247</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>面向对象css</title>
		<link>http://www.i-wui.com/blogv2/?p=172</link>
		<comments>http://www.i-wui.com/blogv2/?p=172#comments</comments>
		<pubDate>Thu, 24 Mar 2011 08:25:52 +0000</pubDate>
		<dc:creator>zhoon</dc:creator>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[前端]]></category>
		<category><![CDATA[重构]]></category>
		<category><![CDATA[面向对象]]></category>

		<guid isPermaLink="false">http://www.i-wui.com/blogv2/?p=172</guid>
		<description><![CDATA[
嗯嗯，前段时间看到了EO写的一切为了《重用与高效——谈CSS模块化》，觉得很强大。而最近艾维博客需要写一篇博文，所以就想用这个为主题，总结一下我收集到的有关信息和自己的一些感想，只是一些简单的例子，EO说过的我就不再啰嗦了！算是学习笔记吧。请大家狠狠地指正。谢谢~

面向对象css旨在加强代码的重用，有些代码可以在多个页面或一个页面的多个地方使用，所以我们同样功能的代码果断只写一次而不写两次。做一次就能解决问题的事情绝不做两次。
面向对象css作用：加强代码重用、方便维护、减小体积、提升渲染。
将页面可重用的元素抽象成一个类，用class加以描述，而其对应的HTML则可以看成这个类的一个实例，每一个实例都公用这个类的资源，实现类代码的重用。例如请看下面代码：html:
&#60;div id="header" class="img"&#62;
&#60;img src="###" alt="img" /&#62;
&#60;/div&#62;
&#60;div id="mainContent" class="img"&#62;
&#60;img src="###" alt="img" /&#62;
&#60;/div&#62;
&#60;div id="footer" class="img"&#62;
&#60;img src="###" alt="img" /&#62;
&#60;/div&#62;
css:
#header{width:100%; height:200px;}
#mainContent{width:100%; height:600px;}
#footer{width:100%; height:100px;}
.img img{width:100px; height:100px; border:none;}
这样，.img类的资源就可以给三个ID里的img使用，做到代码的重用。不仅可以减小样式文件的体积又可以起到方便维护的作用。
封装是面向对象的一个重要特性，对于css，封装就类似于模块化，把页面的某一个模块（比如说是ul ol dl等等…）用一个容器封装起来，给予一个特定的类名，那么这一个模块就可以移植到其他页面或页面的其他地方，实现代码的重用。类似于组建，每一个组建代表一个功能，建站的时候再用这个组建组装成一个完整的网站。定义封装的时候不要直接定义子节点，而是要先写父节点的类，以免和页面其他模块同名类名的冲突。例如下面代码：hatml:
&#60;div id="containner"&#62;
&#60;h2 class="title_h2"&#62;&#60;/h2&#62;
&#60;ul class="menu"&#62;
&#60;li&#62;&#60;/li&#62;
&#60;li&#62;&#60;/li&#62;
&#60;li&#62;&#60;/li&#62;
&#60;/ul&#62;
&#60;/div&#62;
css代码应该如下：#containner .title_h2{......}
#containner .menu{......}
而不是下面：.title_h2{......}
.menu{......}
继承是面向对象一个极为重要的特性。在css中，继承就是把节点的共同属性声明放在父辈的类中，而把节点的自身的特性声明放在本节点的类中来实现代码的重用。如下例子：html:
&#60;div id="containner"&#62;
&#60;div class="text1"&#62;&#60;/div&#62;
&#60;div class="text2"&#62;&#60;/div&#62;
&#60;/div&#62;
css:
#containner{
font:normal 12px Arial, Helvetica, sans-serif;
line-height:20px;
color:#000;
}
.text1{
/*父类继承的属性*/
height:200px;  /*子类自身特性*/
}
. text2{
/*父类继承的属性*/
width:400px;   /*子类自身特性*/
}
看了上面的例子后大家就会觉得继承的功能就是重用代码，其实继承还有一个目的，就是易于扩展，也就是说子节点继承了父节点的属性外，还可以有自己的扩展，这也是一个重要的优点。但其实要扩展子节点的属性还有一种写法，那就是给一个节点加多个属性。例如上面的例子我们还可以写成下面：html:
&#60;div id="containner"&#62;
&#60;div class="text text1"&#62;&#60;/div&#62;
&#60;div class="text text2"&#62;&#60;/div&#62;
&#60;/div&#62;
css：
.text{
font:normal 12px Arial, Helvetica, sans-serif;
line-height:20px;
color:#000;
}
.text1{
/*父类继承的属性*/
height:200px;  /*子类自身特性*/
}
.text2{
/*父类继承的属性*/
width:400px;   /*子类自身特性*/
}
相比第一种情况，第二种的可重用性可能更好，因为当你要将containner容器的内容移植到其他容器的时候，第二种不用再修改任何样式，而第一种因为把父节点的样式写在containner容器中，所以要为新的容器添加相同的样式。
前面讲到了扩展问题，如果你要对本节点进行扩展，就应该在本节点上加一个类class，而不是在其父节点添加类，例如下面一个例子，有个一h3的属性，要对它进行扩展，那就直接在它本身增加class，而不是通过父节点的层叠关系来扩展，因为h3本身就是一个可扩展对象，采用父节点的层叠关系会降低代码的重用性。
&#60;div class="main1"&#62;
&#60;h3 class="title_h3"&#62;&#60;/h3&#62;
&#60;p&#62;&#60;/p&#62;
&#60;/div&#62;
&#60;div class="main2"&#62;
&#60;h3&#62;&#60;/h3&#62;
&#60;p&#62;&#60;/p&#62;
&#60;/div&#62;
css代码是：.main1{}
.main2{}
h3{}
h3.title_h3{}
而不是：.main1{}
.main2{}
h3{}
.main1 h3{}
下面讲两个应用： 
 [...]]]></description>
		<wfw:commentRss>http://www.i-wui.com/blogv2/?feed=rss2&amp;p=172</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>一切为了重用与高效——谈CSS模块化（补充版）</title>
		<link>http://www.i-wui.com/blogv2/?p=165</link>
		<comments>http://www.i-wui.com/blogv2/?p=165#comments</comments>
		<pubDate>Thu, 16 Dec 2010 17:16:14 +0000</pubDate>
		<dc:creator>tyson</dc:creator>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[多态]]></category>
		<category><![CDATA[封装]]></category>
		<category><![CDATA[模块化]]></category>
		<category><![CDATA[继承]]></category>
		<category><![CDATA[重用]]></category>

		<guid isPermaLink="false">http://www.i-wui.com/blogv2/?p=165</guid>
		<description><![CDATA[模块化就像我们玩乐高积木一样，一个积木就是一个单元，可以通过组合不同的积木来搭建一个玩具模型。对于一个玩具模型，也可以更换部分积木而迅速变成另一个模型。而CSS模块化的关键，就是如何合适地构建这些单元，也就是一个一个的class，以及如何灵活运用这些单元来达到我们所要的呈现效果。]]></description>
		<wfw:commentRss>http://www.i-wui.com/blogv2/?feed=rss2&amp;p=165</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>uncollapsing margins&#124;&#124;取消不需要的垂直margin折叠</title>
		<link>http://www.i-wui.com/blogv2/?p=145</link>
		<comments>http://www.i-wui.com/blogv2/?p=145#comments</comments>
		<pubDate>Wed, 01 Dec 2010 05:18:19 +0000</pubDate>
		<dc:creator>jianye</dc:creator>
				<category><![CDATA[其他]]></category>
		<category><![CDATA[前端技术]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[margin]]></category>
		<category><![CDATA[webrebuild]]></category>
		<category><![CDATA[重构]]></category>

		<guid isPermaLink="false">http://www.i-wui.com/blogv2/?p=145</guid>
		<description><![CDATA[
前一段时间在重构一个页面时出现了一个问题，当时刚好看了《CSS权威指南》的那一部分所以后来还是很顺利地解决了，但是google了一下好像国内提及到这问题的文章都比较少比较散。在这里借这个机会总结一下。
P.S，此问题在IE8,IE9,firefox,chrome,opera中均会出现。

当时出现那个问题的时候是在实现一个可延伸的内容页，内容页的最底部有一个按钮，由于需要调整按钮与底部距离，于是给&#60;input&#62;设了个margin-bottom：80px，目的是要撑开父级div并在按钮下面留出80px的间隔，但是当时却没有撑开父级div，却把&#60;div class=&#8221;ft&#8221;&#62;推下去了，中间留出了一道80px的间隔。
这个问题在之前接手别人的页面时也看见过但当时不知道怎么办。最近查了一些相关的资料对这个问题较仔细地分析了一下。

Fig1.对&#60;input&#62;按钮设置的margin-bottom把&#60;div class=”ft”&#62;向下顶出80px
关于margin的折叠问题
这里涉及到垂直margin的“折叠”问题。
其实这是一个很基础的问题，在提及到垂直margin的时候我们都会说， “毗邻两个div的垂直外边距margin不会叠加，而是取较大的一个”，但是实际上它是如何 “取”得较大者呢？
首先我们先来看看collapsing margin的概念
&#8212;-Collapsing margin，指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，即外边距折叠。
这里提到了“折叠”，那我们来看看垂直的margin是如何“折叠”的；
很多人会在起初接触时把这种情况简单地总结为——
——“毗邻的垂直margin不会进行叠加，而是取较大者”
其实这种说法在解释其外在表现上是没有问题的，因为最后margin的长度的确是较大的一个，但是，实际上浏览器并不会去判断上一个元素的margin-bottom和下一个元素的margin-top谁比较大，然后自动取较大的那个，而是其实是把两个margin重叠一起放置了，那样的话，自然我们就只感受到较大者的作用。

Fig2.垂直margin折叠模型
其实与其说是“折叠”，或者把它说成是“重叠”会比较容易理解，因为其实造成这个现象的并没有直观上体现所谓“折”的三维动作，而是把两个div的margin区域相交叠在一起了。
折叠所带来的我们不希望看见的问题
下面再针对之前遇到的问题做一个例子
CSS：
*{padding:0;margin:0;}
.hd,.bd,.ft{margin:0 auto; width:250px;}
.hd,.ft{ background:#e4ff87; height:30px; }
.bd{background:#4c94ed}
h1{margin:30px;}
p{margin:10px}

HTML:
&#60;div class="hd"&#62;&#60;/div&#62;
&#60;div class="bd"&#62;
&#60;h1&#62;I'm a title&#60;/h1&#62;
&#60;p&#62;so I am the content&#60;/p&#62;
&#60;/div&#62;
&#60;div class="ft"&#62;&#60;/div&#62;

在这个例子中，单看代码很容易会知道这段代码中，&#60;h1&#62;以及&#60;p&#62;元素的css的目的是让这两个元素在父级元素中，相对于上下左右方向都留一定距离。但是在代码实现后我们可以发现，水平间隔如我们所设定的一样，然而垂直的间隔却出现了出于我们初衷的情况——
&#60;h1&#62;&#60;p&#62;元素并没有像我们所想的那样，产生相对于父元素的上下边缘的距离，而是作用在了父级元素以及其兄弟元素的间隔中。

Fig3.问题产生时的效果
为什么会出现这种情况呢~？&#60;h1&#62;元素的margin-top没有把&#60;h1&#62;在其父级元素里的位置往下移动，反而是使整个父级div都往下移动了30px；
同样，&#60;p&#62;元素的margin-bottom并没有把父级div撑高，在下面留出空隙，反而是把&#60;div class=”ft”&#62;往下顶，留出了10px的间隔。
为了更清晰地分析这个情况，我们把margin的区域画出来。

Fig4.margin区域示意
在第一次出现这种情况的时候，我当时最直观的感觉就是子元素的margin不知道为什么传到外面变成父元素的margin了。
所以为了验证产生这一个问题的原因，验证是否子元素的垂直margin传给了父元素，我们再给其父元素&#60;div class=&#8221;bd&#8221;&#62;也赋予一个margin值，令margin等于20px;结果如下

Fig5.对&#60;div class=”bd”&#62;赋予margin:20px后效果
在这个情况下，
&#60;div class=”bd”&#62;距离它上方div的距离仍然是30px，即是维持&#60;h1&#62;的margin-top；
但是，它距离下方div的距离变成了20px，并不是&#60;p&#62;元素所设置的10px，而是取了父元素所设置的比原来大的margin-bottom。
那就是说，没有所谓的“子元素margin值传出父元素”的情况，不然的话，我们将会得到——要不父元素的上下margin都等于子元素产生的“外溢”垂直margin，要不只等于父元素自身设置的margin值。
但是为什么在我们给父元素设置了margin:20px后，父元素的上外边距依然等于&#60;h1&#62;设置的上外边距，但是下外边距却是我们给父元素设置的margin值呢？
从这个现象我们很容易可以想到平时在同一级的div里，我们经常遇到的垂直margin折叠的现象。
所以实际上，并不是子元素的margin传给了父元素，子元素的margin跑到外面变成父元素的margin了，而是它们重叠了在一起，当重叠在一起的时候，自然较大者就起作用了，如上图，蓝色主体部分的上外边距实际上是30px，而下外边距维持20px。

Fig6.margin区域示意
如何取消我们不希望看见的折叠？

Fig7.我们所要的效果
当然，在某些情况下可以把子元素所要设的margin变成padding可以达到一样的视觉效果，但是例如如果那是一个&#60;input&#62;元素的话就会对元素本身的外观有影响了，而且在语义化的角度似乎这样做也不太好，因为元素之间的间隔并不属于元素内容的其中一部分。可见这不是一个适用于所有情况的解决方法。
参考了一些文章，总结了两个对页面影响比较小的方法。
方法一：
对父元素设border：
只要对父元素赋予一个与其背景颜色相同的上下border，就能达到预期效果，取消了不必要的重叠，让子元素的margin在父元素中直接相对其边缘起作用。
但是对于需要精确控制尺寸的情况这个解决办法并不合适，因为虽然看上去和预想中的表现一样，其实中间部分的高度是增高了2个像素（border设为1px的情况）。
而且在对于背景有水平渐变，或者有花纹等情况下，设置边框的做法明显欠妥。
方法二：
对父元素设置padding控制内部元素的垂直间距。
在这个例子里，我需要&#60;h1&#62;元素距离父元素上边框30px，&#60;p&#62;元素距离下边框10px，那么实际上我们可以把实现这个效果的任务交给父元素，设置父元素padding:30px 0 10px;
这样亦能达到预期效果，并且在结构相似的多个网页的重构中，也保持其的统一性，不但避免了多次设置子元素的margin进行定位，在语义的角度上也从代码上合适地体现了这个距离是元素的“内边距”，符合padding本身的意义。
当然实际上只需对父元素设置padding为1px就可以消除它的折叠，但是直接用padding控制它的内边距不失为一种不错的更为合理的选择——这样正好体现了当前距离是“内边距”的意思。
附—
通过产生块级格式化范围解决问题
什么是块级格式化范围(Block Formatting Context)?
当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。
最容易去理解“块级格式化范围”的方式是去把它想象成一个独立的容器，在这个独立的容器里，你可以无视一切外部的元素去控制内部的布局，容器内外的元素不会影响到容器外，容器外的元素也不会影响到内部。
例如说，当你设置一个div浮动，它就会建立起一个块级格式化范围，这个浮动div里面的任何元素都不会和外部的元素有相互作用。
如何产生块级格式化范围？

浮动元素,left或right皆可
position:absolute的元素
inline-block 元素,(这个属性并不是所有浏览器支持)
display的值为table-cell table-captions 元素
overflow 非visible的元素

产生块级格式化范围后的效果：

清除浮动
阻止边距折叠（margin collapsing）
清除所在元素内部的浮动
让浮动元素不被覆盖
利用赋予其块级格式化范围后可以“阻止边距折叠”的这一个特征，灵活设置该div属性，亦可实现所需要的效果
若想更多地了解块级格式化范围，
可参考http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
]]></description>
		<wfw:commentRss>http://www.i-wui.com/blogv2/?feed=rss2&amp;p=145</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Bubble &#8211; Mobile UI Design</title>
		<link>http://www.i-wui.com/blogv2/?p=134</link>
		<comments>http://www.i-wui.com/blogv2/?p=134#comments</comments>
		<pubDate>Tue, 23 Nov 2010 13:38:17 +0000</pubDate>
		<dc:creator>sheen</dc:creator>
				<category><![CDATA[其他]]></category>
		<category><![CDATA[deisgn]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[交互设计]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[视觉设计]]></category>

		<guid isPermaLink="false">http://www.i-wui.com/blogv2/?p=134</guid>
		<description><![CDATA[

手机界面设计Bubble。
第一次做手机界面，其中展示方式有参照一些前辈们的，受了不少Kingyo前辈的影响，当然也有其他优秀的界面作品。

在制作过程中也加入了自己的一些想法。
另外这次参加了CIDC2010交互设计大赛，希望能给我一些支持！
http://www.studentart.com.cn/news/cidc/art/detail/56
欢迎转载，转载请注明出处为本页地址哦！




]]></description>
		<wfw:commentRss>http://www.i-wui.com/blogv2/?feed=rss2&amp;p=134</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>

