一、IE边框若显若无，须注意，定是高度设置已忘记；
二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；
三、像素文本慢移不必慌，高度设置帮你忙；
四、兼容各个浏览须注意，默认设置行高可能是杀手；
五、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；
六、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。
七、所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。
八、图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。
九、IE浮动双边距，请用display:inline拘。
十、列表横向排版，列表代码须紧靠，空隙自消须铭记。
九大原则
原则一：一般要写兼容IE6,IE7和FIREFOX的网页，最省事的方法就先写适合IE7的样式，因为IE7和FIREFOX很接近，这样判断浏览器兼容的工作量就能减小到最少。
原则二：逐步叠加的方式，如果需要用这个样式的模块很多，并且会存在些许的不同，千万不要把样式一步写到位，最好把框架性的先写好，细节性的留到第二个步骤，甚至第三个步骤，当然最好步骤不要超过三步，这样很不利于维护。由若干个二级定义对一级定义进行补充，这样的既可以减少代码，又可以减少繁多的CLASS命名。
原则三：从总到分。顺序应该是这样：总体需要用到的>>结构>>模块>>二级模块>>细节；并且这个文档最不容易修改的处于最上端，频繁用于修改的在末端。最忌讳即兴发挥，这样写出的东西经不起推敲，稍有变化就要忙得乱成一团。结构性的东西应该慎重精细。
原则四：尽量把能够放在一组的小图标或者图片放在一个图片文件里，这样的好处有很多。
1、 图片文件的总量会变小；
2、利于下载，太多的小图片下载效果是不理想的，常常会发现这个图片出来，那个没出来，这样在写样式的时候只需要写一个总体的，对于具体的要显示的只需要标一个位置，非常省时间，样式也很精炼；
3、显而易见，这样做非常便于管理，替换或新增的时候工作量很小。
原则五：切图的原则，应该切大的图绝不切小，应该切小的绝不切大，能够用颜色代替的绝不切图。把一个大图切成很多份并不一定能够加快页面的显示速度，相反会浪费很多不必要的带宽。不光要控制图片文件的多少，还要考虑到这样切会不会造成页面增加许多额外的代码。
原则六：图片的命名规则，定一个规则，准备用一辈子。这样以后你看CSS文档的时候，你只要看到某个图片名称的时候，你不需要看太多你就知道这个图片的用途、位置；这样可以最大限度的保证样式的重用性。
原则七：在该不该用表格的问题上，我的态度是，涉及多行多列的特别是列宽有不固定的，坚决用表格，这个没啥好讨论的，千万不要为了DIV而DIV，用一大陀CSS去模仿一个表格是很极端的行为。当然也有例外的，需要灵活处理，但千万别模仿什么表格。
原则八：尽可能不把样式直接写到元素的标签里（除非这个样式出现的机率特别小，有相当程度的偶然性），把样式直接写到元素标签里是一种工作范畴意义上的无政府行为，非常不负责。
原则九：尽量不要用ID来定义或索引样式，ID的唯一性比较高，且用ID索引样式效率非常低而且兼容性的问题也比较明显。
总之所有的一切都为了精简，为了效率，也为了重用。
作为网页设计师(前端工程师)，你可能还记得曾经的那个网页大小建议:一个网页（包括 HTML、CSS、Javacript、Flash和图片）尽量不要超过30KB的大小，随着互联网的日益庞大，网络带宽也在飞速发展，很多设计师已经不 再考虑这条30KB的理想准则。随着越来越受欢迎的CSS布局和Javascript对网站用户体验的强化，使得这种现象越来越普遍，尤其是对于大型网站 来说，仅仅一个CSS文件就已经超过了30KB的上限。
但是即便如此，现在也有很多准则来帮助你在完成CSS布局后进行CSS代码的压缩和优化。CSS代码优化的目的并不仅仅是减少CSS文件的大小，它还能让你的CSS代码更有条理、更高效。
您还可以参阅暴风彬彬曾经讲解过的《10个CSS简写技巧让你永远受用》。
Margin、border、padding、background、font、list-style和outline 都是可以进行简写的属性。CSS简写就是不再使用不同的相类似属性的声明…
p { margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; }
你可以把它们简写成这样:
p { margin: 10px 20px 30px 40px; }
Hack是一个糟糕的东西，它会为不同浏览器定义一样的代码，使得CSS繁冗。现在我们知道使用条件性注释来代替hack，他们在IE6和IE7中是被认可的，甚至IE团队也推荐这样使用。使用条件性注释服务于符合浏览器特性专用的CSS代码，因此，更小的、核心的CSS代码用来服务于遵从标准的浏览器，只有需求条件出现的时候（比如IE），才会去下载额外的CSS文件！
下面来看看IE6使用条件性注释的代码范例:
<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” mce_href=”ie6.css”>
<![endif]–>
这段代码使得IE6去下载额外的ie6.css解析它专用的css代码。同样的，如果针对IE7只用把上面的6与7替换就行了。
无论是为了自己阅读还是二次开发，都要让CSS保持良好的可读性，留白就充当了关键的角色。
我们不鼓励你为了得到一个更小的CSS文件，就去掉所有的空白格式，如tab，换行，空格等。这里推荐嵌套的代码使用一个tab缩进，所有属性独立一行。
如果你选择使用CSS framework，包括你自己写的，如果你去检查代码一定会发现该framework包含的一些规则并不适用于你当前的文件，它们是可以被删除的。
由此可以想到的还有reset，YUI Grid CSS使用的reset和Eric Meyer’s 重设(Reset) 目前都很流行， Resets能够移除不同浏览器的默认样式，使得页面在各个浏览器之间的表现一致。但是它们通常包含了一个大的网站需要的所有属性，一些例 如<pre>,<code>,<sub>,<dfn>,<var>等等属性对于普通网站来 说根本不会用上，删掉那些你用不上的。
framework和reset会很好的帮助你的工作，但是如果不去掉那些你用不上的使用，反而会拖累你页面的效率和可读性。
另一种优化CSS代码的方法是按照你的习惯将CSS生命分成清晰的结构块。将CSS文件的声明用注释分隔开并进行排版，可以更方便自己在很长时间以后重新审理这个CSS文件，到那时你的效率会高出许多。
然而，暴风彬彬更崇尚那种拆分布局风格，也就是给每种布局一个单独的CSS文件。Andy Clarke的《超越CSS》(Transcending CSS)一书也是提倡这种方法。
这种工作并不仅仅适用于团队，也同样适用于一个人的设计工作。毕竟，在完整一个设计项目之后，经过一年甚至更长的时间，当你再回来看 到这些曾经自己写的代码时，也一样会觉得很陌生。将来你会通过自己曾经的记录了解到在那些CSS结构是如何让网页表现的，或那个网页对表单按钮的起到副作 用。
记住，一定要养成为CSS写注释的习惯。
为了使得浏览器节省更多下载个载入时间，压缩是一个不错的解决方案，但是仅限于发布的时候。YUI Compressor 和CSSTidy 就是这样方面的专家，他们能够去除多余的代码，校验属性互相覆盖的错误。
许多流行的编辑器，比如BBEdit, TextMate, 和 TopStyle 都能够帮助你格式化你的CSS代码成你想要的样子。你还能通过服务器压缩技术使用PHP处理你的CSS。你可以找到更多的CSS优化和压缩的CSS工具。
有一点，这些程序尽可能会降低错误的发生，但并不是完美的。同样，最好不要用他们去处理包含CSS hack的文件。这也是另一个让那些hack储存在另外的文件里的原因。
整理和优化代码不仅是为了你 的CSS文件大小，还包括了维护性和可读性。以上的原理并不只是针对CSS，它们还能应用到HTML，Javascript以及其他编程语言。CSS文件 不只是为了呈现给你网站的最终用户。上面的原理可以帮助用户体验以及开发者经验。运用这些原则到你未来的项目中，一定能够获得重大的成效。
来源：http://hi.baidu.com/kearseking/blog/item/ea1f5c03afc367e409fa9341.html
虽说iframe对seo不够友好，但也不失为一种没有办法的方法。记得以前从哪里看过一篇文章说Google AdSense就是利用iframe插入到各种各样千奇百怪的网页中去的。
—————————————————-
iframe生成文档中的浮动帧。浮动帧与普通帧不同，是另一HTML文档中可以独立操作的元素。
代码示例：
<IFRAME border=0 frameborder=0 framespacing=0 marginheight=0 marginwidth=0 width=774 height=60 scrolling=no src=”http://WWW.chesanqi.COM”>
</IFRAME>
属性：
order=”n” //指定浮动帧的边框厚度(像素);BorderColor=”#ccc” //指定浮动帧的边框颜色(可以是颜色名和16进制代码);
FrameBorder=0 //指定浮动帧是否显示边框,0为不显示,1为显示;
FrameSpacing=”n” //表示相同浮动帧之间的间距(像素);
Height=”n” //指定浮动帧竖直方向的尺寸(像素);
HSpace=”n” //指定浮动帧内左右边界的大小(像素);
ID=”…” //指定<IFRAME>标志实例的唯一ID选择符,可以此ID为它指定样式;
MarginHeight=”n” //指定浮动帧上下边界的大小(像素);
MarginWidth=”n” //指定浮动帧左右边界的大小(像素);
Name=”…” //指定帧的唯一名称,可以在其它帧中向这个帧名装入新文档或操作其属性;
NoreSize //指定浮动帧不可调整其尺寸,此属性只在IE中有用;
Scrolling=no //指定浮动帧是否有滚动条;yes为有，no为没有。
Src=”url” // 指定装入浮动帧的文档文件的相对或绝对路径;
Style=”…” //指定浮动帧中内容所采用的样式单命令;
Width=”n” //指定浮动帧的水平尺寸(像素);
VSpale=”n” //指定浮动帧中上下边界的尺寸(像素);
IFRAME 元素也就是文档中的文档，或者好像浮动的框架(FRAME)。frames 集合提供了对 IFRAME 内容的访问。
使用 frames 集合读写 IFRAME 内包含的元素。例如，如果要访问 iframe 内 body 对象的 backgroundColor 样式，语法应为:
sColor = document.frames(“sFrameName”).document.body.style.backgroundColor;
通过 iframe 对象所在页面的对象模型，你可以访问 iframe 对象的属性，但不能访问其内容。例如，访问 iframe 对象的 border 样式的语法应为:
sBorderValue = document.all.oFrame.style.border;
注意 iframe 的属性必须使用前缀 document.all 访问，例如
document.all.iframeId.marginWidth。
今天在网上看到一个小技巧，不需要额外的class就能去掉多余的类目间的间隔线。说起来这个方法很简单，关键在于合理利用ul的overflow属性，把那条多余的间隔线隐藏掉就可以了。恍然大悟的同学直接去试验吧，不懂的同学请看：
以下内容来自淘宝UED的正淳同学 ：
从很久很久以前开始，类目间的竖线无非都只有三种。
1、背景图
在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。
缺点：最后一个还是要用class来隐藏掉背景。2、符号
在每个a标签之间用”|”符号来填充。
缺点：html文件变大，文件维护变得很麻烦，而且在html中毫无意义。3、a标签右侧的boder。
同背景图一样，只不过使用border-right来代替。缺点也同上。看到这里，可能已经有人打开淘宝首页用firebug查看源码来看是怎么做了。
其实现有是利用ul的overflow:hidden 再将li的margin-left:-1px的做法做出来的。这样的做法就可以同时避免以上的缺点了。