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

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

待续……

巴特西

css 一些常用属性总结

最新文章

热门文章