YY,just for YY

这个方法是在做项目时候使用YUI，参考它对于阴影的做法得到的。
兼容性：
FF,IE7。IE6上不好用，虽然有hack的方法可以达到类似的效果，但是和实现的原理不一致。
IE6下设置bottom的值不能达到我们预想的效果，必须要设置height:100%。但是多数情况下，我们的父层container的元素会是自动适应内容高度而不是指定的高度，所以他的使用范围就打了一个折扣了。
代码如下：

#container{
width:200px;
height:300px;
border:1px solid red;
position:relative
}
#item{
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background:#ccc;
}
<div id="container">
<div id="item">this div id is item</div>
</div>

这样我们可以看到item的高度是和container的高度一致的。如果我们改变一下top和left等的值，就可以做出阴影一类的效果。
我用在哪里？
在wui项目中，需要用一个阴影的遮盖层来遮盖网页的部分内容，但是这个遮罩的大小又是不固定的，需要自动适应。半透明滤镜的方法大家都知道，在此就不多说。最初我们设置了一个大小固定的，足够大的遮盖层来处理，这样所有的内容都可以被遮盖到。但是由于ie对滤镜的渲染有问题，导致这样处理之后，页面奇慢无比。
当然最优的方案是遮盖层需要多大，我们就给他多大，这样可以最大程度的避免性能的损耗。而在项目中由于时间所限，又没办法使用脚本操作。所以就用了上述这个自动适应的办法。这样ff和ie7都满足了需求，而在处理ie6的时候，使用了一个适当大小的层来遮盖住一部分内容，这样兼顾了部分性能，以满足交互的需要。
主要问题在于YUI的另外一个观点：性能更优越的浏览器，我们应该让它更好。而不是一味兼顾所有浏览器上一致的表现。

发生了什么
好久以前的经验了，再在这里总结一下。
按照我上篇文章写的p2的第三条：在制作页面时抛开像素级的细节问题不提，在ie6，ie7，ff中可以做到一次成形，不需要太多的hack。这条初学者可能认为很难，但是就我个人的经验而言，在我开始注意适当（不是过度）关注语义化标签；注意haslayout；使用正确的嵌套顺序之后已经很容易做到了。其中少被人提及的是：使用正确的嵌套顺序
遇到了什么
在我刚开始写css时，遇到过非常多的莫名其妙的不兼容性问题（指不出现在常见的ie hack表中的问题），所以我只好利用很多很多的hack，代码变的很糟糕。总结后所产生的原因大概都是如下几类：

haslayout
嵌套错误
没有理解float

其中又以嵌套错误所产生的bug居多。我最初就过度关注于html标签的语义化问题而忽视了嵌套规则。
办法
有一个很清楚的嵌套规则表：Allowed nesting of elements in HTML 4 Strict (and XHTML 1.0 Strict)已经有很多热心人士翻译过了。正确的html标签的嵌套，会让浏览器按照你预想的来渲染你的代码
表的内容好像比较复杂，但其实在满足语义化的情况下，只需要做到：

记住那些元素是block，那些元素是inline
block元素才能包含inline元素，反过来别这样做。
如果有控制之外的需求，导致inline元素包含了block元素，那么把外层的inline元素设置display:block
如果有元素已经是float，那么他的display属性也变成了block。

ok，如果这样做了。基本上你的页面在ie6/7 ff中的表现，应该不会和你预想的相差太多。

总结一下在css方面的经验，列一下对待css需要首先掌握的一些问题。掌握这些问题可以让你更快速的在项目中coding
1.概念：

html语义
盒模型
文本流
浮动
haslayout
html元素嵌套规则
常见的几个hack

2.实例

布局：三栏布局，二栏布局
文字单行居中和多行居中
等高列
margin负值的作用
position：relative和absolute
图片居中，垂直和水平
block元素的水平居中
overflow的作用
滑动门
对付脏数据

接下来的blog，会一一对上述问题做出总结

有两种流行的css定位的方法：浮动或者绝对定位。这两种类似的方法都有他们的优点和缺点。我和我的团队伙伴们开发了一种全新的定位的方法，这也许是世界上 最好的方法。经过了一些实验和测试之后，现在是时候把它和业界一起分享了，来看看我们是如何一起工作，并改进。
　　我称呼这种方法为：“伪绝对定位”，这 是一种伪造的列的技术 什么我们需要另外一种css布局技术 很 多网站都是基于带页头和页尾的分栏来设计。使用绝对定位布局，如果在垂直的分栏高度不固定的情况下，几乎是不可能来准确定位到页尾的位置。通过浮动定位， 如果有意想不到的内容的出现，会打乱你页面的整体布局（意译），关于这种情况，可以查看Shaun Inman in Clearance的描述。这些问题由于ie的宽度解析问题，都是非常讨厌，且难以解决的。
　　我们遇到的情况相当的复杂：我团队试图开发一个基于 WYSIWYG（所见即所得）的表单，而且可以允许用户把内容在界面上随意的拖动。我们需要建立一个精巧的结构让用户不需要过度的倚赖静态布局，而且在他们的需要的时候把相应的列可以对齐。
　　例如：假定我们需要在表单的同一行里面加入邮编和城市选项，这两者在内容逻辑上是在同一行的。为了实现它，我们尝试用 Holy Grail technique所 创造的浮动定位方法。通过这种方法，我们需要去调整邮编对象width,border,margins,或者padding来和城市选项对齐成一行。这是 个很麻烦的事情，因为邮编的宽度是动态的。或者我们调整了邮编之间的空白之后，城市的位置可能就挪位了。页面里面更多的元素，栅格中的布局，都需要做这种 无聊而且单调的调整。另外，微小的（属性的）数字变化就会导致布局错乱过敏。所以他基本上不可能用于弹性布局中。 然后我们试图利用绝对定位。他可以给我们更多的在位置上的可控性，而且他很健壮。但是绝对定位元素没有高度，这会导致父层元素的塌陷（其实是因为定义了position：absolute 之后，对象会脱离当前文本流，而父层元素任然处于文本流之中，所以在浏览器渲染的时候，是不会计算绝对定位元素的高度的，并非作者所说的have no height）。所以这样很难在不把所有的元素都绝对定位的情况下来对内容定位.所以这个方法在动态布局中基本不能实现。 　　另外一种办法 　　最后，我们的解决办法基于从定位过的布局中计算右侧的距离，而不是从在他源码前的元素右侧来计算他(？)。我们通过 position: relative, left: 100%和负margin值的组合来实现。 我们的方法从建立栅格和单元开始。我们可以在容器中把任意多的单元排成一行而且可以有任意多行。<div id=”canvas”>　<div class=”line”>　　<div class=”item” id=”item1″>　　　<div class=”sap-content”>content here</div>　　</div>　</div></div>

在ie 6下避免了 redraw bug
他给我们额外的添加padding的弹性
他可以让我们使用position: overflow，却不破坏栅格

基类的css如下： .line {　float: left;　width: 100%;　display: block;　position: relative;}
.item {　position: relative;　float: left;　left: 100%;}
对于特定的单元。我们只需要给他负margin-left值以及指定宽度即可。#item1 {　margin-left: -100%;　width: 30%;}　　基类的css将每一个单元的都在容器的右边定位在容器的右边，每个单元的宽度都倚赖于他自己里面的内容，而且所有单元都按照html源码的顺序排列。margin-left现在是为了抵消容器右边的距离，而不是左侧。注：作者的解释比较简单,以下是我的分析:
　　首先有一个外容器，id=”canvas”来包含列，也就是栅格中的一行。 canvas用来定义你所需要的宽度。需要有overflow:hidden;（用来计算内容item里面的float元素所带来的高度，同时解决等高列问题）。其中每一行定义为line，我们这里假设他宽度为950px
.line {　float: left;(计算内容item里面的float元素所带来的高度)　width: 100%;　display: [...]