1. 如何清除图片下方出现几像素的空白间隙
方法1
img { display:block;} 方法2
img { vertical-align:top;}// 除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的 和 值都可以 方法3
// #test为img的父元素#test { font-size:0; line-height:0;} 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. 为什么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标签选择符上即可 6. 如何使文本溢出边界不换行强制在一行内显示
#test { width:150px; white-space:nowrap;}// 设置容器的宽度和white-space为nowrap即可，其效果类似 标签 7. 如何使文本溢出边界显示为省略号
// 此方法Firefox5.0尚不支持#test { width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}// 首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。 8. 如何使连续的长字符串自动换行
#test { width:150px; word-wrap:break-word;}// word-wrap的break-word值允许单词内换行 9. 如何清除浮动
方法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为浮动元素的父元素 10. 如何定义鼠标指针的光标形状为手型并兼容所有浏览器
#test { cursor:pointer;}// 若将cursor设置为hand，将只有IE和Opera支持，且hand为非标准属性值 11. 如何让已知高度的容器在页面中水平垂直居中
#test { position:absolute; top:50%; left:50%; width:200px; height:200px; margin:-100px 0 0 -100px;} 12. 如何让未知尺寸的图片在已知宽高的容器内水平垂直居中
#test { display:table-cell; width:200px; height:200px; text-align:center; vertical-align:middle;}#test p { margin:0;}#test p img { vertical-align:middle;}// #test是img的祖父节点，p是img的父节点 13. 如何设置span的宽度和高度（即如何设置内联元素的宽高）
span { display:block; width:200px; height:100px;}// 要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置display属性，也可以设置float属性，或者position属性等等。 14. 如何让某个元素充满整个页面
html,body { height:100%; margin:0;}#test { height:100%;} 15. 如何让某个元素距离窗口上右下左4边各10像素
html,body { height:100%; margin:0;}#test { position:absolute; top:10px; right:10px; bottom:10px; left:10px;} 16. 如何去掉超链接的虚线框
a { outline:none;} 17. 如何容器透明，内容不透明
方法1
.outer { width:200px; height:200px; background:#000; filter:alpha(opacity=20); opacity:0.2;}.inner { width:200px; height:200px; margin-top:-200px;}
查看更多关于CSS技巧和经验_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did111136