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进制即可

（经测试可用 嗯~ 感谢强大的网友）

 

 

待续……