1、行内元素之间水平的 margin 取总和；块级元素之间竖直的 margin 取大者，也就是发生“塌陷”（当元素浮动的时候，不会发生塌陷）；子元素的 margin 会作为父元素的内容，超过时会发生溢出，但在 IE 低版本中会自动扩大父元素。
2、没有设置 width 的盒子会自动向右伸展，直到不能伸展为止，即是伸展到父元素所能容纳的大小为止，此时的 width 值即为伸展之后的值。当设置了 float 后，则不会伸展，而是根据内容确定 width 值。
3、设置 float 后，盒子会脱离标准流，不再占有位置。有一点需要注意，如例子所示：
HTML代码：
<div id="a">123456</div>
<div id="b">123456789</div>CSS代码：
#a{
border:5px dashed black;
height:50px;
float:left;
}
#b{
border:5px solid red;
height:50px;
}效果：
可以看到，a 和 b 都没有设置 width，但由于 a 设置了 float ，所以width 不会伸展。而这里需要注意的是，b 的左边框是与 a 的左边框重叠的（因为两者都没有设置 margin），也就是 b 占领了 a 原来的位置，但 b 的内容是围绕 a 的内容排列的。
此时若设置 b 也为 float:left; 则效果如下：
b 的边框不会与 a 重叠。
而若加入另一个 <div> 且不设置 float，则新加入的 <div> 的左边框会与 a 的左边框重叠，内容会围绕 a 和 b 排列。
另外，若子元素都是浮动元素，则父元素的大小与子元素无关，对于没有设置高度父元素，其高度会变成 0 。而往往会在子元素的最后添加一个空的 div ，设置 clear:both; 以扩展父元素的高度。
4、绝对定位是以离它“最近的”、“已经定位的”、“祖先”元素为基准进行偏移。若不存在则以浏览器窗口为基准。（“已经定位”是指设置了 position 且值不是 static）
5、IE6 中存在的问题：设了 position:absolute; 的子元素使用 left 定位的时候，偏移量会加上父元素的 padding 的值。解决方法：为父元素加入 CSS hack ：height:1%;
6、不同浏览器的特殊 CSS 标志
height:50px;
/*正常浏览器*/
[;height:50px;] /* chrome */
-moz-height:50px; /*firefox*/
_height:50px; /*IE6*/
*height:50px; /*IE7*/
height:50px\9; /*IE8*/
height:50px !important; 用于提升 CSS 的优先级，但是对于 IE6 而言，它能读出被 !important 修饰的 CSS 语句，但是并不会为其提升优先级。所以注意含有 !important 的语句应该放在前面，以便在 IE6 中后面的语句能够覆盖它。
7、竖直方向的居中
<div id="outer">
<div id="middle">
<div id="inner">word word word word word word word word word word </div>
</div>
</div> #outer{
height:100px;
border: 1px solid black;
overflow:hidden;
position: relative;
}
#outer[id]{
display:table;
position:static;
}
#middle{
position:absolute;
top: 50%;
}
#middle[id]{
display: table-cell;
vertical-align:middle;
position:static;
}
#inner{
position:relative;
top: -50%;
}8、通常为了呈现比较好的效果，标题常用图片而不是文本。有这么几种方法：
1）<h1><span>title</span></h1>
将 <span> 设置 display:none; 后将图片作为 <h1> 的背景图片。（图片可以是透明的，但是如盲人阅读器等无法读出文本，而且若图片不可用或不支持CSS，则无法显示。）
2）<h1><span>title</span></h1>
将 <span> 设置 text-indent:-10000; 后将图片作为 <h1> 的背景图片。（图片可以是透明的，盲人阅读器也可读出文本，但若图片不可用或不支持CSS，则无法显示。）
3）<h1><span></span>title</h1>
将 <span> 设置 position:absolute; 后将图片作 <span> 的背景，覆盖文本。（盲人阅读器可读出文本，图片不可以或不支持CSS也可正常显示文本，但图片不能是透明的。）
（若要完美解决，估计只能借助 JS 了）
9、IE6 中使用 PNG 作为背景图片的透明效果实现
1）采用 gif 图像。同时设置背景图片为 gif 和 png，为设置 png 的 CSS 语句加上 !important
2）采用滤镜。注意滤镜中的 png 图片必须是32位的，并且设置背景图片的元素必须设置高度或者宽度。如：
<!--[if gte ie 6]>
<style type="text/css">
div{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bg.png",sizingMethod="crop");
background: none;
width: 1px; /*若有必要*/
}
</style>
<![endif]-->10、IE6 中，即使将 <a> 设置为 display:block; ，对于 handover 也是只有当鼠标移动到文字上才触发，解决方法是为 a 加一个高度，如 height:1em;
11、纯 CSS 制作三角形效果：
<div></div>div{
width:0;
height:0;
border: 10px solid white;
border-left-color: black;
}
************************************************持续更新********************************************************