css 一些常用属性总结

在项目中经常会用到一些很实用的css代码(*只做功能性记录,不追根究底,如有不合理的欢迎指正)

css图片上下居中

/*图片上下居中代码*/
.imgvam {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle; /*设置水平居中*/
text-align:center; /* 针对IE的Hack */
*display: block;
/**font-size:175px;约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
/*height:200px;*/
}
.imgvam img {
/*设置图片垂直居中*/
vertical-align:middle;
}

不够位置显示以省略号显示(只支持一行)

.eli {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

其中overflow:hidden;为溢出隐,white-space:nowrap;为强制不换行,text-overflow:ellipsis;显示省略符号来代表被修剪的文本

效果:

时间不等你,做你想做的事。时间不等你,做你想做的事。时间不等你,做你想做的事。时间不等你,做你想做的事。

 上面有用到强制不换行,在这里就把强制换行也记录下

word-wrap:break-word;

效果:

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee I will be disappointed when complain is not good enough for my life not like the movie plot twists and turns 我也会有失望的时候 抱怨生活对我不够好 不能像电影一样 情节曲折结局依旧

另外还有个更霸道的,用它可能会截断英文单词,影响阅读(在这里"good"被截断了)

word-break: break-all; 

效果:

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee I will be disappointed when complain is not good enough for my life not like the movie plot twists and turns 我也会有失望的时候 抱怨生活对我不够好 不能像电影一样 情节曲折结局依旧

 说到控制文本还有一个很实用的东西,文字左右对齐

text-justify:inter-ideograph;
text-align:justify;

效果:

I will be disappointed when complain is not good enough for my life not like the movie plot twists and turns 我也会有失望的时候 抱怨生活对我不够好 不能像电影一样 情节曲折结局依旧

背景透明,文字不透明,兼容IE

.test {
background:rgba(0,0,0,0.2);/*非IE8及IE8以下*/
}
@media \0screen\,screen\9 {
/*IE8及IE8以下*/
.test {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
}
}

另外rgba 和IE下filter数值的转换rgba 透明值 IE filter值
  0.1 19
  0.2 33
  0.3 4C
  0.4 66
  0.5 7F
  0.6 99
  0.7 B2
  0.8 C8
  0.9 E5
  转换公式:alpha*255再转换成16进制即可

(经测试可用 嗯~ 感谢强大的网友)

待续……

上一篇:Vijos 1033 整数分解(版本2)


下一篇:也许CTO并不是终点——没有净土