常用css 样式整理

1. 强制文本单行显示并将溢出文本以省略号显示

white-space:nowrap;//强制文本不换行
text-overflow:ellipsis;//溢出文本以省略号显示
overflow:hidden;
/*
text-overflow: clip | ellipsis | ellipsis-word  三个属性值：
clip:表示直接裁剪溢出的文本，不会显示省略号，直接截断。
ellipsis:文本溢出，显示省略号（。。。）标记，省略标记代替最后一个字符。
ellipsis-word:同ellipsis相同，不同在于省略标记代替最后一个词。
*/

2. 强制文本多行显示并将溢出文本以省略号显示

display:-webkit-box;//对象作为弹性伸缩盒子模型显示 。
-webkit-box-clamp:2;//限制在一个块元素显示的文本的行数。 
-webkit-box-orient:horizontal | vertical;//设置框内子元素的排列方式。
text-overflow:ellipsis;
overflow:hidden;

3.css强制换行

word-break:break-all; /*支持IE，chrome，Firefox不支持*/
word-wrap:break-word;/*支持IE，chrome，Firefox*/

4.字符间距

letter-sapcing:2px; //设置每个字符之间的间距

5.设置段落首行缩进

text-indent:2em;//首行缩进两个字符

6.颜色透明值设置问题

background:#012356;//颜色设置
opacity:0.8;//透明度设置
/*该方法设置的透明度会导致整个框内元素都继承了该透明度属性，若要针对某一个元素的属性设置透明度，如背景设置透明度，则建议采用*/
background:rgba(255,255,255,0.8)//针对背景颜色单独设置透明度，但是IE8不识别。

7.input，textarea相关常用css样式

textarea去掉拖拽大小，隐藏滚动条

overflow:hidden;//隐藏滚动条
resize:none;//禁止拖拽修改textarea大小

input的标签属性
1.list 属性：引用包含输入字段的预定义选项的 datalist ，可用于做一个搜索框具备提示功能。

<form action="doSomething()">
    <input type="url" list="url_list" name="link" />
    <datalist id="url_list">
        <option label="W3Schools" value="http://www.w3schools.com" />
        <option label="Google" value="http://www.google.com" />
        <option label="Microsoft" value="http://www.microsoft.com" />
    </datalist>
    <input type="submit" />
</form>
//代码来源w3school.

2.多图片、文件选取功能。multiple

<input type="file" name="img" multiple="multiple" />

input的样式属性

background:transparent;//背景透明；
outline:medium;//输入框点击时去掉外框

//控制某一种类型的input框样式
input[type="text"]{
    color:red;
}

8.针对父元素的某一个子元素设置样式

parent:first-child{color:red}//针对父元素的第一个元素设置样式
parent:nth-child(2){color:red}//针对父元素的第二个元素设置样式
//括号内的值可以是数字也可是2n-1或odd(第奇数个元素）、2n或even（第偶数个元素）、3n+1(隔二取一)

9.背景渐变

//css3
background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);
//参数含义：起始位置，起始颜色，终止颜色

//IE浏览器实现渐变只能使用IE自己的滤镜去实现
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);
//grandientType : 0代表竖向渐变，1代表横向渐变

10.css3水平垂直居中

display: box; 
display: -webkit-box; 
display: -moz-box; 
-webkit-box-pack:center; 
-moz-box-pack:center; 
-webkit-box-align:center; 
-moz-box-align:center;