此文为网上收集~
给客户做站的时候遇到的问题,div层加了margin后 总宽度超过父级层宽度 就自动换行了 如何让浮动层加margin后不换行呢?
下面看浮动层加margin后换行的例子:
比如说有个DIV宽度为380px，它里面有一个菜单列表，每个宽度为60px，margin-right为20px。如果就按照下面的HTML结构来做的话，那么这个菜单列表能在这个DIV里一行显示完整吗？
   1. <div>
   2.     <div>mb5u1</div>
   3.     <div>mb5u2</div>
   4.     <div>mb5u3</div>
   5.     <div>mb5u4</div>
   6.     <div>mb5u5</div>
   7. </div>
5个菜单，每个宽度为60px，右边外补白为20px，因此每个菜单整体宽度是80px，5个菜单总长度为400px，而父级层宽度只有380px，根据浮动的原理，那么第5个菜单将毫无疑问的被挤下去即换行了。
看下我的解决方法:
代码如下:
   1. <div>
   2.&nb ......

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
     padding: 0;
     margin: 0;
}
fieldset, img {
     border: 0;
}
table {
     border-collapse: collapse;
     border-spacing: 0;
}
ol, ul {
     list-style: none;
}
address, caption, cite, code, dfn, em, strong, th, var {
     font-weight: normal;
     font-style: normal;
}
caption, th {
     text-align: left;
}
h1, h2, h3, h4, h5, h6 {
     font-weight: normal;
     font-size: 100%;
}
q:before, q:after {
     content: '';
}
abbr, acronym {
     border: 0;
} ......

hand是手型
pointer也是手型，这里推荐使用这种，因为这可以在多种浏览器下使用。
crosshair是十字型
text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
help是问号
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果 ......

转发下，同事总结的。
浏览器大战的结果曾经一度是IE一统天下，在那个时代，我们根本不用担心浏览器兼容性问题，用PS自动生成代码都行。然而伴随时代发展，人们对WEB应用的期望越来越高，于是乎，江湖烽烟再起，各种浏览器如雨后春笋，这可苦了我们这些开发者，为了让各浏览器表现一致，不知道有多少前辈耗费了多少心血，现在，让我们踩在前辈的肩膀上继续去奋斗吧。
日常工作我们经常需要区分Firefox和IE系列浏览器，这里有一个使用的快速方法：
background:blue;
/* Firefox */
background:red \9; /* IE8（只有IE系列浏览器认识\9）
*/
*background:black; /* IE7（IE6/IE7认识星星）*/
_background:orange; /* IE6
（IE6认识下划线） */
测试地址：
http://webtech.intra.sina.com.cn/?page_id=39
如果想更深入的研究，那么这里有更多的例子：
/* Opera */
html:first-child #opera
{
display: block;
}
/* IE 7 */
html > body #ie7
{
*display: block;
}
/* IE 6 */
body #ie6
{
_display: block;
}
/* Firefox 1 - 2 */
body:empty #firefox12
{
display: block;
}
/* Firefox */
@-moz-document url-prefix()
{
#fire ......

　　内容：contentcontainer 导航：nav 侧栏：sidebar
　　栏目：column 标志：logo 页面主体：main
　　广告：banner 热点：hot 新闻：news
　　下载：download 子导航：subnav 菜单：menu
　　搜索：search 页脚：footer 滚动：scroll
　　版权：copyright 友情链接：friendlink 子菜单：submenu
　　内容：content 标签页：tab 文章列表：list
　　注册：regsiter 提示信息：msg 小技巧：tips
　　加入：joinus 栏目标题：title 指南：guild
　　服务：service 状态：status 投票：vote
　　尾：footer 合作伙伴：partner 登录条：loginbar
　　页面外围控制整体布局宽度：wrapper 左右中：left right center
　　(二)注释的写法
　　 Footer
　　内容区
　　 End Footer
　　(三)id的命名
　　(1)页面结构
　　容器 container页头：header 内容：contentcontainer
　　页面主体：main 页尾：footer 导航：nav
　　侧栏：sidebar栏目：column 左右中：left right center
　　页面外围控制整体布局宽度：wrapper
　　(2)导航
　　导航：nav
　　主导航：mainbav
　　子导航：subnav
　　顶导航：topnav
　　边导航：sidebar
　　左导航：leftsi ......

一、星号*
应该是个通配符。比如
<style type="text/css">
.roundBorder *
{
 background: white;
 display: block;
 height: 1px;
 overflow: hidden;
}
</style>
……
 <b class="roundBorder">
 <b class="roundBorderLayer3"></b>
 <b class="roundBorderLayer2"></b>
 <b class="roundBorderLayer1"></b>
</b>
那么这个roundBorderLayer1、2、3都会受这个.roundBorder *的定义影响。
二、继承
CSS可以有多重继承。如
        <div id="divTenet">
            <div style="font-size:16px;width:240px;">鸟0</div>
            <div><img src="img/k.gif" width="24" height="20" hspace="3" alt="鸟1"/>鸟1&l ......