小姿势--CSS

 

水平居中

.wrapper{     width:1300px;    margin:0 auto; }

margin的auto属性是有在设置了宽度的时候才起作用。

 

文字居中

text-align:center;

 

文字缩进

text-indent: 20px;

 

雪碧图

将小图标拼成一个大图，用background-position找到一个小图在大图中的坐标。目的是减少http请求。

 

鼠标形状 - - 手型

cursor:pointer;

 

选择器 - - 单数li

li:nth-child(odd) {    margin-right: 5px;}

 

透明颜色（逗号分隔参数）

background-color: rgba(0,0,0,.3)

 

img 图片文字对齐

img{    vertical-align:middle;}

图片与文字垂直居中对齐。但是并不是完全的居中。

 

多行文字垂直居中

// 父元素属性.slideGridDes {       height: 35px;       display: table;       vertical-align:middle;  }  

// 子元素属性div { display: table-cell; }  

 

垂直居中

div{    display:table-cell;    vertical-align;middle;}

 

技巧 - - 选择器

<pdata-unit="元">剩余话费40</p>[data-unit]:after{  content: attr(data-unit);  color: #3b98e0;}

剩余话费40元

 

选择器 - - 以icon开头的class

[class^=icon]{    font-size: 22px;}

 

忽略任何事件

pointer-events:none

 

动画

.icon-dianhua{    font-size: 44px;    transition: all .25s ease-out;}.icon-dianhua:hover{    font-size: 100px;}

 

百分比与像素计算

.box{    width:calc(100% - (10px + 5px) * 2);}

注意： +-*/号的左右都要有空格！

 

去掉a下划线

a{    text-decoration:none}

 

阴影

box-shadow: 10px 10px 5px #888888;box-shadow: h-shadow v-shadow blur spread color inset;

可以用负数

 

单行文字超范围用省略号代替（……）

span{    text-overflow:ellipsis;    overflow：hidden;}

要设置宽度。多行没有直接的属性，另辟蹊径的方法见连接

 

添加、移除class

.toggleClass()