慎用 CSS display 属性
display:block 会导致换行，原来未仔细读过其详细文档，今天碰到类似问题很是费了一番功夫。
将有问题的页面代码拷贝如下：
<html>
<table width=80>
<tr>
<td nowrap>
<font style="display:block">abcdefghigklmnopqrstuvwxyz 1234567890</font>
<font style="display:block">abcdefghigklmnopqrstuvwxyz 1234567890</font>
</td>
</tr>
</table>
</html>
我并不希望两个font中的字体成为两行。修改时一直考虑修改TD的CSS属性，一直未见什么效果。后来发现是font的style="display:block"。修改后就好了。
修改后：
<html>
<table width=80>
<tr>
<td nowrap>
<font style="display:inline">abcdefghigklmnopqrstuvwxyz 1234567890</font>
<font style="display:inline">abcdefghigklmnopqrstuvwxyz 1234567890</font>
</td>
</tr>
</table>
</html>
--------------------------
总结：通常很多人会通过调用javascript,修改元素的CSS属性：display:block和display:none，来设置其显示和隐藏。一定不要忽视了display:block会导致换行这一问题。
--------------------------
附录：
1，display 所有参数：
display 属性设置是否及如何显示元素。
继承性：No
说明
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
注释：CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去除了。
JavaScript 语法
CSS 属性也可通过一段 JavaScript 被动态地改变。
脚本语法：
object.style.display="none"
在我们的 HTML DOM 教程中，您可以找到更多有关 display 属性 的细节。
在我们的 HTML DOM 教程中，您也可以找到完整的 Style 对象参考手册。
例子
p
{
display: block
}
li
{
display: list-item
}
table
{
display: table
}
td, th
{
display: table-cell
}
可能的值
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
| inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 |
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 |
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 |
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 |
| table-row | 此元素会作为一个表格行显示（类似 <tr>）。 |
| table-column-group | 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 |
| table-column | 此元素会作为一个单元格列显示（类似 <col>） |
| table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） |
| table-caption | 此元素会作为一个表格标题显示（类似 <caption>） |
原文：http://www.w3school.com.cn/css/pr_class_display.asp
2 ,display:block 导致的换行
#divHeader #divNav #divLogo{margin-right:5px; width:205px; height:72px; float:left;position:relative;}
#divHeader #divNav #divLogo a:link, a:visited,a:hover,a:active{
width:200px;
height:67px;
text-decoration:none;
display:inline;
float:left;
position:relative;
border:#f00 0px solid;
}
大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。
visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示，visible表示显示， hidden表示隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。
表格
明白表格相关的表现属性值最好的方法想象html表格。table是最初的表现，你可以使用table-row模拟table-cell模拟td。
display属性更进一步，可以通过使用table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption。现在可以直接使用 columns构建表格，比在html中使用行构建快速。
最后，inline-table设定表格前后不换行。
使用CSS表格会严重损害可用性。HTML应该用来传递语意，所以如果你有表格数据，那可以使用HTML表格。使用CSS表格仅仅会产生糟糕的数据如果没有CSS数据将不可读。
display:none和visibility:hidden;的不同在于display:none完全取消元素的显示，visibility: hidden保持元素位置但视觉上的内容不可见。例如，如果3的第二段设置为display:none，第一段将仅跟在第三段，如果设置为 visibility:hidden，段落间就会空出。
inline与bolck的区别在于
display: inline; 在同一行
display:block; 前后换行
在DW中文版中翻译为“定位”，常用的属性有relative（相对）与 absolute（绝对）。
有很多朋友对这条指令的 用法还是不清楚，这里做一定细致的讲解：position：relative； 表示相对定位，被定位了这个属性的标签在所属的范围内可以进行上下左右的移，这里的移动与padding或是margin所产生的位置变化是不一样的。 padding与margin是元素本身的一种边距与填充距离并不是真正的移动，而被定义为relative的元素是真正的移动，这所产生的移动距离是从 margin的外围到父级标签内侧之间这一段。
position：absolute； 表示绝对定位，如果定义了这个属性的元素，其位置将依据浏览器左上角的0点开始计算，并且是浮动正常元素之上的。那么当你需要某个元素定位在浏览器内容区的某个地方就可以用到这个属性。
那么有个问题产生了，现在大家做的网页大部分是居中的，那么我需要这个元素跟着网页中的某个元素位置不论分辨率是多少他的位置始终是针对页内的某个元素的，那么单纯的absolute是不行的。
正确的解决方法就是在元素的父级元素定义为position：relative；（更正：这里可以是祖父级，也可以是position： absolute；，多谢谢old9的提出）需要绝对定位的元素设为position：absolute；这样再设定top，right，bottom， left的值就可以了，这样其定位的参照标准就是父级的左上角padding的左上侧。
原文：http://crazier9527.javaeye.com/blog/361184
