CSS在我的网站上没有分类，因此我也不知道怎么放就扔到javascript里了。权且当成前端分类吧？哈哈，自我安慰一下
CSS我实在不熟，所以看到有好的东西，都会暂时的收藏。

作者是司徒正美（老是让我想起车田正美，不知道的人，估计和我不是同一年代的。OHOHOH）

内容如下：

翻译自Matthew James Taylor的Equal Height Columns with Cross-Browser CSS and No Hacks，有些部分根据我的理解改了，让一些初心者更好理解。

利用纯CSS创建一个等高多列的布局并不件易事，本教程将着重分析出现在多列布局的多个问题，然后为大家等来一个简单全游览器通吃的解决方法，不使用图片，脚本，CSS hacks并在最严格的XHTML 规范中都能通过验证。

问题的症结所在

如上图所示，由于各列的内容不一致导致其背景的高度也不统一。而背景实质上是内容（标准的盒子模型是由内容区，补白区，边框区与边界区组成，背景存 在于前三者中；IE为前两者）的自适应的问题。再转化一下，如何撑大那些较短的列的高度，让所有列的高度等于最高的列的高度？这个，的确很很棘手，因为我 们不清楚各列的高度，也无从得知哪一列最高。我们也不能简单地给所有列一个明确的高度，这可能会导致所有列都多出一大片空白，或者很不亏由于高度不足导致 某些列的内容无法全部显示出来！现实中，内容的长度是动态的，因此每列的高度也是动态的。我们必须意识到在网络中，不存在”固定“二字，每个人的显示器的 分辩率都不尽一样，游览器的字体大小设置也不尽相同，这些都会影响到内容的显示高度。

对内容与背景实行分离

解决等高问题的第一步就是把它拆分为两个较小的，可以单独解决的部分。这样，我们原来是一列对应一个DIV，现在是一列对应一个DIV，一个用来装 载内容，一个用来显示背景。这种分离有利于我们对各个元素的掌控和把它们用另一种更有效的方式组合起来，这引起我很快会在下面的章节讲述。

利用浮动嵌套解决最高列的高度的问题。

这是解决多列等高的关键。使一个DIV的高度等于最高列的高度的唯一方法就是让这个DIV包含所有的列。换句话说，通过把所有的列放在一个容器中，容器的高度就是最高列的高度。这是个非常有用的结构。

单行三列的布局的结构层代码。

<div id="container1">
    <div id="col1">Column 1</div>
    <div id="col2">Column 2</div>
    <div id="col3">Column 3</div>
</div>

对应的表现层代码。

#container1 {
    float:left;
    width:100%;
}
#col1 {
    float:left;
    width:30%;
    background:red;
}
#col2 {
    float:left;
    width:40%;
    background:yellow;
}
#col3 {
    float:left;
    width:30%;
    background:green;
}

为了使用这种结构在所有游览器都正常工作，我们必须让外层容器往左或右浮动，并且其子元素包含每一栏内容的DIV也跟着浮动，哪一个方向都无所谓。 浮动会使用它们往上对齐于外围容器的上补白，并且浮动的容器会自动调整自身的高度与宽度以实现对浮动子元素的包含。但是如果容器被定义了高度与宽度，则它 不会随子元素的大小而自动调整自身显示区域来适应子元素的显示。但在IE6与低版本的IE中，子浮动元素能撑开外围元素；幸好IE7与IE8已引正了这个 不符合标准的做法。

增加用来显示背景的容器

下一步是增加额外的容器，让它们彼此嵌套，并让所有外围的容器数（新增的加上原来的那一个）等于列的总数：3。这三个容器用来显示各列的背景。请注意，我们去掉了原来各列的背景，把它们移至这些容器上。

新的结构层代码，让新增的容器套在原来的外围容器上！

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

新的表现层代码，新增的容器都是浮动元素！

所有元素左浮动，将容器宽度设为100%，使他们占满页面的宽度。背景色从内容 div 移除并加至容器上。注，原文是所有容器的宽都设为100%，其实根本没有这样的必须，因为在浮动嵌套中，外面的容器必须会被撑大能容得下内部子元素的大小！

#container3 {
    float:left;
    /*width:100%;*/
    background:green;
}
#container2 {
    float:left;
    /*width:100%;*/
    background:yellow;
}
#container1 {
    float:left;
    width:100%;
    background:red;
}
#col1 {
    float:left;
    width:30%;
}
#col2 {
    float:left;
    width:40%;
}
#col3 {
    float:left;
    width:30%;
}

用相对定位来移动容器

现在是所有容器都完美地累在一起，只显示一种背景颜色，我们必须让其他背景也显示出来。为此我们就得利用相对定位来让这些容器像阶梯一样放置。这个 本可以使用负边界技术，但该死的IE5.5的盒子模型与W3C的不一致，为了兼容我们就得使用到CSS hack。由于本文声明是不使用CSS hack，因此放弃。首先让#container2向右移到30%,由于#container2装着#container1，而#container1上 装着那三个列，这样一来，最右边的列就被移出游览器的右边了。而最外围最底层的容器#container3则露出来了，露了左边的30%。然后我们再移动 最上层的容器#container1，向右边移动40%，于是原来盖住的第二层容器也露出来了，露出其左边的40%,而#container1则只剩下 100%-30%-40%=30%;上方的列也只剩下最右边的列，却表现为位于最左边。这样，背景也显示正常了！

对应的表现层代码

#container3 {
    float:left;
    /*width:100%;*/
    /*没有必要的代码被注释掉！*/
    background:green;
}
#container2 {
    float:left;
    /*width:100%;*/
    /*没有必要的代码被注释掉！*/
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:30%;
}
#col2 {
    float:left;
    width:40%;
}
#col3 {
    float:left;
    width:30%;
}

把各列的内容移回原来的位置上

由于最上层的那三列都是被整体往右往到(页面的)70%，我们再把它们都往左移回70%就是！最后，由于我们前两个背景容器都是被向右移动，移出了游览器，它们都与游览器的右边连在一起，我们可以设置最底层的背景容器的overflow来隐藏那些被移出的部分。

#container3 {
    float:left;
    /*width:100%;*/
    /*没有必要的代码被注释掉！*/
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    /*width:100%;*/
    /*没有必要的代码被注释掉！*/
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:30%;
    position:relative;
    left:70%;
}
#col2 {
    float:left;
    width:40%;
    position:relative;
    left:70%;
}
#col3 {
    float:left;
    width:30%;
    position:relative;
    left:70%;
}

对列添加补白（内边距）

最后，我们对列增加补白，让每列显得大方一些，而不是密密麻麻地塞满一列。但是如果我们增加补白，可能有一些游览器的有病又犯了，在IE6和更低版本的 IE中，其怪异的盒子模型，会产生一些我们不愿看到的结果。如，一个 200px 宽 20px 补白的 box 在 IE 中被视为 200px 宽，在其他浏览器中则为正确的 240px。补白应该加在元素的宽度上。

不过放心，我们可以用完全不依赖于 padding 的方法来解决这个问题。相反，我们把列弄窄一点（列宽减去两侧的补白），之后用相对定位把它们移至正确的位置。例如，我们用了 2% 的补白，则 30% 的列将减至 26%，40% 的列减至 36%。用相对定位移回列时需谨记，现在列变窄了，所以当它们一起像最初那样左浮动时，每一个需要比上一个移动更远的距离。

完整的CSS

为了使布局保持在小宽度我在每个内容列增加了overflow:hidden; 这将切去超出列宽的东东，并阻止其干扰其他布局。重申一下，这只是 IE 的问题，其他所有浏览器会保持正确的布局，不管列内是虾米。如果你真想这样做，可以用 IE 条件注释只对 IE 写规则。

#container3 {
    float:left;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

运行代码

好了，文章就此结果，更多的例子可以参看原作者的网址，或点击以下链接：2 列 ， 3 列， 4 列，以及 5 列。

网上找来的代码，经典的东西哦。做网游的人可能会用到。。

原文连接：http://www.gamedev.net/reference/articles/article2003.asp
中文翻译：http://data.gameres.com/message.asp?TopicID=25439

我是从http://www.cnblogs.com/jimtomjim/archive/2009/07/20/1527112.html拷贝来的

说实话，我没有用过这种方法，也不知道是否非常有用。但总体来说，它的效率肯定不如直接target="_blank"好吧？

如果不用JS，那以后的版本里怎么办才好呢？难道不开新窗了？怎么办？未来该如何操作？

原文如下：

这是cssrain站长翻译的一篇文章，事实上，在PHP中，已经不太建议使用switch-case了。
特别是在面向OO的代码中，你几乎也看不到这样的代码出现

不是说这个方式不好。而是，它的可扩展性不强。所以在大多数情况下，都放弃采用这种方式。

以下是翻译内容，来源于：http://www.cssrain.cn/article.asp?id=1384：

我很年轻，还没有做过很长的编程。所以我对使用switch-case 语法没有什么很深刻的印象，至少在我的记忆中是这样。或许你认为这是一件坏事情。你甚至会怀疑我为什么不使用它们。我真的不知道为什么，似乎我天生就不喜欢使用它，如下所示：

显然，虚构此代码的作者不够了解使用其他JavaScript方法来构建此功能。其实有很多种方式更适合这种情况，而不是一个丑陋的switch. 有许多许多更轻松，更优雅的方式来实现这种功能。
switch-case组合肯定是非常有用的，当你有一个变量并且依靠它的值的不同来做不同的事情。使用多个if-else不太恰当，所以人们通常使用switch-case来代替多个if-else.我敢肯定你也是.
上面的例子依赖于 something 判断 ，然后根据条件运行doX ， doY或doN 。在JavaScript中，同样的逻辑可以表示一个简单的查找表的形式————对象，如下所示：

这不仅简洁，而且也可以重复使用和修改条件。所有条件都是对象的一部分，因此，如果您需要改变某些条件那就非常简单了。

所以，我想说的是：请不要使用switch-case，除非绝对必要的。 为什么？ 因为有更好的替代品，比它更简单！

关于“ switch-case”的语法，请浏览：http://en.wikipedia.org/wiki/Switch_statement

如果想阅读原文，请点击这里：http://james.padolsey.com/javascript/how-to-avoid-switch-case-syndrome/
提示:译文跟原文有出入，请看原文。

本文来自博客园，原理，我感觉和我以前写的很象。。。我写的如何用DIV挡住SWF？差不多也是这个意思吧？

问题描述：公司合作的一个酒店预订网站需要在页面上投广告，但对方给了一个flash文件，要求链接到其首页。直接在html的flash object前面加上<a href=...>，发现链接是点不动的。

解决过程：
开发人员没有意识到这个问题，写出的问题代码如下：

鼠标放上去是没有任何效果的，原因是默认情况下flash会被放到最高层，可能有朋友也碰到过下拉菜单被flash挡住的情况，也属于这个情况。

网上找到的解决方案是用一个透明的大button包在flash的最外层，或是用一个层盖住flash,然后定义button的onclick事件,但这种方式在firefox下工作不正常。
同时用户最关心的seo作用消失了，因为这不是一个正常的链接，是用javascript实现跳转的。

要想具有<a href...>的所有原生特性，最完美的方法应该就是用一个透明的<a href=...>链接盖住flash,最终我们采用了以下的代码，用一张大透明图链接盖住flash。
将flash放到了一个zindex为-1的层中，同时设置了wmode属性（代码中的 wmode="transparent" 和<param name="wmode" value="transparent">分别在firefox和ie下起作用）。
masker层是用来挡住flash所在层的，margin-top用到定位。blank.gif是一个透明的图片。效果如下所示，

title，鼠标手形均正常