1、如何清除圖片下方出現(xiàn)幾像素的空白間隙？

方法1：img{display:block;}  方法2： img{vertical-align:top;}

2、如何讓文本垂直對齊文本輸入框？

input{vertical-align:middle;}

3、如何讓單行文本在容器內(nèi)垂直居中？

#test{height:25px;line-height:25px;}

/* 只需設(shè)置文本的行高等于容器的高度即可 */

4、如何讓超鏈接訪問后和訪問前的顏色不同且訪問后仍保留hover和active效果？
a:link{color:#03c;}
a:visited{color:#666;}
a:hover{color:#f30;}
a:active{color:#c30;}

5、如何使文本溢出邊界不換行強制在一行內(nèi)顯示？

#test{width:150px;white-space:nowrap;}

/* 設(shè)置容器的寬度和white-space為nowrap即可，其效果類似<nobr>標簽 */

6、如何使文本溢出邊界顯示為省略號？
#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* 首先需設(shè)置將文本強制在一行內(nèi)顯示，然后將溢出的文本通過overflow:hidden截斷，并以text-overflow:ellipsis方式將截斷的文本顯示為省略號。 */

7、如何使連續(xù)的長字符串自動換行？
#test{width:150px;word-wrap:break-word;}

/* word-wrap的break-word值允許單詞內(nèi)換行 */

8、如何清除浮動？
方法1：
#test{clear:both;}
/* #test為浮動元素的下一個兄弟元素 */
方法2：
#test{display:block;zoom:1;overflow:hidden;}
/* #test為浮動元素的父元素。zoom:1也可以替換為固定的width或height */
方法3：
#test{zoom:1;}
#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}

/* #test為浮動元素的父元素 */

9、如何讓未知尺寸的圖片在已知寬高的容器內(nèi)水平垂直居中？
#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
#test p{*position:absolute;*top:50%;*left:50%;margin:0;}
#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}

/* #test是img的祖父節(jié)點，p是img的父節(jié)點。Know More：未知尺寸的圖片如何水平垂直居中 */

10、如何設(shè)置span的寬度和高度（即如何設(shè)置內(nèi)聯(lián)元素的寬高）？
span{display:block;width:200px;height:100px;}

/* 要使內(nèi)聯(lián)元素可以設(shè)置寬高，只需將其定義為塊級或者內(nèi)聯(lián)塊級元素即可。所以方法非常多樣，既可以設(shè)置display屬性，也可以設(shè)置float屬性，或者position屬性等等。 */

11、如何去掉超鏈接的虛線框？

a{outline:none;}

12、如何容器透明，內(nèi)容不透明？
.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}
.outer .inner{position:relative\9;}
<div class="outer">
<div class="inner">我是不透明的內(nèi)容</div>
</div>

/* 高級瀏覽器直接使用rgba顏色值實現(xiàn)；IE瀏覽器在定義容器透明的同時，讓子節(jié)點相對定位，也可達到效果 */

13、如何做1像素細邊框的table？
方法1：
#test{border-collapse:collapse;border:1px solid #ddd;}
#test th,#test td{border:1px solid #ddd;}
<table id="test">
<tr><th>姓名</th><td>Joy Du</td></tr>
<tr><th>年齡</th><td>26</td></tr>
</table>
方法2：
#test{border-spacing:1px;background:#ddd;}
#test tr{background:#fff;}
<table id="test" cellspacing="1">
<tr><th>姓名</th><td>Joy Du</td></tr>
<tr><th>年齡</th><td>26</td></tr>
</table>

/* IE7及更早瀏覽器不支持border-spacing屬性，但是可以通過table的標簽屬性cellspacing來替代。*/

14、如何讓層在falsh上顯示？

<param name="wmode" value="transparent" />

15、如何使用標準的方法在頁面上插入flash？
<object id="flash-show" type="application/x-shockwave-flash" data="*.swf">
<param name="movie" value="*.swf" />
<param name="wmode" value="transparent" />
<img src="*.jpg" alt="用于不支持flash或屏蔽flash時顯示" />
</object>
/* 至于flash的寬高可以在css里設(shè)置 */