Shulou(Shulou.com)06/03 Report--

本篇内容主要讲解"CSS常见的技巧有哪些"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"CSS常见的技巧有哪些"吧!

1.如何清除图片下方出现几像素的空白间隙？

代码如下:

方法1：

img{display:block;}

方法2：

img{vertical-align:top;}

备注：除了top值，还可以设置为text-top

| middle | bottom | text-bottom，甚至特定的和值都可以

方法3：

#test{font-size:0;line-height:0;}

备注：#test为img的父元素

2.如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果？

代码如下:

方法：

a:link{color:#03c;}

a:visited{color:#666;}

a:hover{color:#f30;}

a:active{color:#c30;}

备注：按L-V-H-A的顺序设置超链接样式即可，可速记为LoVe（喜欢）HAte（讨厌）

3.为什么Standard mode下IE无法设置滚动条的颜色？

代码如下:

方法：

html{

scrollbar-3dlight-color:#999;

scrollbar-darkshadow-color:#999;

scrollbar-highlight-color:#fff;

scrollbar-shadow-color:#eee;

scrollbar-arrow-color:#000;

scrollbar-face-color:#ddd;

scrollbar-track-color:#eee;

scrollbar-base-color:#ddd;

}

备注：将原来设置在body上的滚动条颜色样式定义到html标签选择符上即可

4.如何使文本溢出边界不换行强制在一行内显示？

代码如下:

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

备注：设置容器的宽度和white-space为nowrap即可，其效果类似标签

5.如何使文本溢出边界显示为省略号？

代码如下:

方法（此方法Firefox5.0尚不支持）：

#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

备注：首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。

6.如何使连续的长字符串自动换行？

代码如下:

方法：#test{width:150px;word-wrap:break-word;}

备注：word-wrap的break-word值允许单词内换行

7.如何去掉超链接的虚线框？

代码如下:

方法：a{outline:none;}

备注：IE7及更早浏览器由于不支持outline属性，需要通过js的blur()方法来实现，如

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.