首页 / CSS / 前端CSS部分知识整理
前端CSS部分知识整理
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了前端CSS部分知识整理，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2207字，纯文字阅读大概需要4分钟。
内容图文
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:#000\9;filter:alpha(opacity=20)\9;}
.outer .inner{position:relative\9;}
/*我是不透明的内容*/
/* 高级浏览器直接使用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来替代。*/
原文：http://www.cnblogs.com/wuhairui/p/6143193.html
内容总结
以上是互联网集市为您收集整理的前端CSS部分知识整理全部内容，希望文章能够帮你解决前端CSS部分知识整理所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。