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;