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;
}
************************************************持續更新********************************************************