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; }
姓名 | Joy Du |
---|---|
年龄 | 26 |
方法2:
#test{ border-spacing:1px; background:#ddd; }
#test tr{ background:#fff; }
姓名 | Joy Du |
---|---|
年龄 | 26 |
/* IE7及更早浏览器不支持border-spacing属性,但是可以通过table的标签属性cellspacing来替代。*/
14、如何让层在falsh上显示?
15、如何使用标准的方法在页面上插入flash?
/* 至于flash的宽高可以在css里设置 */
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: css实用技巧以及经验总结
本文地址: https://pptw.com/jishu/669021.html