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即可，其效果类似标签 */

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:’’; }

/* #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; }

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

13、如何做1像素细边框的table？

方法1：

#test{ border-collapse:collapse; border:1px solid #ddd; }

#test th,#test td{ border:1px solid #ddd; }

方法2：

#test{ border-spacing:1px; background:#ddd; }

#test tr{ background:#fff; }

/* IE7及更早浏览器不支持border-spacing属性，但是可以通过table的标签属性cellspacing来替代。*/

14、如何让层在falsh上显示？

15、如何使用标准的方法在页面上插入flash？

/* 至于flash的宽高可以在css里设置 */

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！