css实用技巧以及经验总结。。。。。。。
导读：1、如何清除图片下方出现几像素的空白间隙？ 方法1：img{display:block;} 方法2： img{vertical-align:top;} 2、如何让文本垂直对齐文本输入框？ input{vertical-align:middl...
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;
}
我是不透明的内容
| 姓名 | Joy Du |
|---|---|
| 年龄 | 26 |
| 姓名 | Joy Du |
|---|---|
| 年龄 | 26 |
/* 至于flash的宽高可以在css里设置 */
切图网（qietu.com）专业从事web前端开发的公司，专注we前端开发，响应式布局，webapp手机端网页制作，微信html5页面制作，bootstrap布局等，关注用户体验。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css实用技巧以及经验总结。。。。。。。
本文地址： https://pptw.com/jishu/668188.html