css总结

css有必要总结一下，要不然总是不上不下没进步。

1. background-position 改变背景图片的位置

用法:background-position: left top; 或 background-position: 40px -20px; 或 background-position-x:40p; 或 background-position-y:-20p;

需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

2. background-size 设置背景图片的大小,分别对应width height

background-size:30px 200px;

3. flex 自适应填充

.box{
width:100%;height:80px;
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
}
.box div{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
box-flex:1.0;
}

4. 上下左右居中对齐

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

5. 多行超过部分省略号

-webkit-line-clamp: 2;

6. 针对不同的子元素写样式

li:nth-child(7){
}