小姿势--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()