css实用技巧有哪些

这篇文章主要讲解了“css实用技巧有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css实用技巧有哪些”吧！

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

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

2、如何让文本垂直对齐文本输入框？

input{vertical-align:middle;}

3、如何让单行文本在容器内垂直居中？

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

/* 只需设置文本的行高等于容器的高度即可 */

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

a:link{color:#03c;}

a:visited{color:#666;}

a:hover{color:#f30;}

a:active{color:#c30;}

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

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

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

/* 设置容器的宽度和white-space为nowrap即可，其效果类似<nobr>标签 */

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

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

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

7、如何使连续的长字符串自动换行？

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

/* word-wrap的break-word值允许单词内换行 */

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:&rsquo;&rsquo;;}

/* #test为浮动元素的父元素 */

9、如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？

#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的祖父节点，p是img的父节点。Know More：未知尺寸的图片如何水平垂直居中 */

10、如何设置span的宽度和高度（即如何设置内联元素的宽高）？

span{display:block;width:200px;height:100px;}

/* 要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置display属性，也可以设置float属性，或者position属性等等。 */

11、如何去掉超链接的虚线框？

a{outline:none;}

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>

/* 高级浏览器直接使用rgba颜色值实现；IE浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果 */

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里设置 */

感谢各位的阅读，以上就是“css实用技巧有哪些”的内容了，经过本文的学习后，相信大家对css实用技巧有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！