CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web前端开发设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
优逸客在这里整理了一些CSS常见问题的处理技巧,与大家分享。

1、如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果?a:link{color:#03c;}a:visited{color:#666;}a:hover{color:#f30;}a:active{color:#c30;}
2、如何清除图片下方出现几像素的空白间隙?方法1:img{display:block;} 方法2: img{vertical-align:top;}
3、如何让单行文本在容器内垂直居中?#test{height:25px;line-height:25px;}
4、如何让文本垂直对齐文本输入框?input{vertical-align:middle;}
5、如何使连续的长字符串自动换行?#test{width:150px;word-wrap:break-word;}
6、如何使文本溢出边界不换行强制在一行内显示?#test{width:150px;white-space:nowrap;}
7、如何使文本溢出边界显示为省略号?#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
8、如何设置span的宽度和高度(即如何设置内联元素的宽高)?span{display:block;width:200px;height:100px;}

9、如何清除浮动?方法1:#test{clear:both;}
方法2:#test{display:block;zoom:1;overflow:hidden;}
方法3:#test{zoom:1;}#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}

10、如何让未知尺寸的图片在已知宽高的容器内水平垂直居中?#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;}
11、如何让层在falsh上显示?<param name="wmode" value="transparent" />
12、如何容器透明,内容不透明?.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#0009;filter:alpha(opacity=20)9;}.outer .inner{position:relative9;}<div class="outer"><div class="inner">我是不透明的内容</div></div>
13、如何去掉超链接的虚线框?a{outline:none;}
14、如何做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>
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=https://www.xuefen.net//skin/default/image/nopic.gif alt="用于不支持flash或屏蔽flash时显示" /></object>