css常用属性整理

1. 清除浮动

.clear:after{
    display:block;
    content:"";
    clear:both;/**清除浮动--兼容高版本浏览器**/
}
.clear{
    *zoom:1;/**兼容低版本浏览器**/
}

2.取消字体加粗

   font-weight: normal;/*取消加粗*/

3.border圆角

 border-radius:5px;

4.背景透明度

  background: rgba(0,0,0,.3);

5.设置文本下划线

    text-decoration: underline;

6.white-space 设置文本显示方式

white-space :normal;默认处理方式；
white-space :nowrap;强制在同一行显示所有文本
，直到文本结束或遇到br标签；

7.text-overflow 文字溢出方式

使用或检索是否使用一个省略号标记（…）标示对象文本的溢出
text-overflow:clip不显示省略标记（…）而是简单的裁切；
text-overflow：ellipsis当对象内文本溢出时i显示省略标记（…）
注意一定要首先white-space :nowrap强制一行显示，再次和overflow属性搭配使用。

8.精灵图（雪碧图制作）

为了有效的减少服务器接收和发送请求次数，提高页面的加载速度，出现了css精灵技术（也称cssSprites、css雪碧）
精灵图本质
简单的说，CSS精灵是一种处理网页背景图像的方式，他将一个页面所有的背景图片都集中到一个大图去，然后把大图用于网页，这样，当用户访问该网页时，只需向服务发送一次请求，网页中的背景图即可全部展示出来。通常这个由很多小背景图合成的大图叫精灵图，也称雪碧图
精灵图使用
CSS精灵其实就是将网页中一些背景图整合到一张大图中。其中选择精灵图中不同位置的某个小图，就需要CSS中banckground-image、background-repeat和background-position属性进行定位
精灵图制作

9.css实现垂直居中的方法

①通过verticle-align:middle实现垂直居中
是最常用的方法，但有个前提，是必须是行内块元素

display:inline-block;
verticle-align:middle

②使用display：flex;实现垂直居中
方法：
给父元素display:flex;子元素align-self:center;
③通过伪元素：before实现css垂直居中。就是给父元素添加伪元素：before,使得子元素实现垂直居中

父元素：before{
  content:'';
  display:inline-block;
  vertical-align:middle;
  height:100%;
}

④通过dispaly:table-cell实现css垂直居中。
给父元素dispay：table，子元素dispaly：table-cell的方式实现垂直居中。
⑤通过line-height实现css垂直居中。
设置子元素的line-height值日等于父元素的height，这种方法适用于子元素为单行文本情况；

一 、CSS文字属性：

color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration: overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-decoration:none; /*删除链接下划线*/
text-transform : capitalize; /*首字大写*/
text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/
text-align:right; /*文字右对齐*/  
text-align:left; /*文字左对齐*/
text-align:center; /*文字居中对齐*/
text-align:justify; /*文字分散对齐*/
vertical-align属性
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/

二、边框空白

padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白

三、CSS符号属性

list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/
list-style-image:url(/dot.gif); /*图片式符号*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*缩进*/

四、css背景样式

/*背景图片样式*/  
background:transparent; /*透视背景*/
background-image : url(/image/bg.gif); /*背景图片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/
/*背景图片定位*/
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/

五、css链接属性（a标签）和鼠标光标样式

a /*所有超链接*/
a:link /*超链接文字格式*/  
a:visited /*鼠标划过后链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标划过链接的样式*/


鼠标光标样式：
 鼠标滑过那个箭头变成小手：cursor:Pointer
链接手指cursor: hand
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6)   p {cursor:url(“光标文件名.cur”),text;}

六、css边框

border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/  
border-right : 1px solid #6699cc; /*右框线*/
以上是建议书写方式,但也可以使用常规的方式 如下:
border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/
框线样式
solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体内凸框*/
ridge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/