CSS归类整理

1. 隐藏浏览器滚动条

::-webkit-scrollbar { /* 滚动条整体部分 */
  width: 0;
  margin-right: 2px;
}
::-webkit-scrollbar-track-piece { /*内层轨道，滚动条中间部分 */
  background-color: white;
}
::-webkit-scrollbar:horizontal {
  height: 0;
  margin-bottom: 2px;
}
::-webkit-scrollbar-track-piece { /*内层轨道，滚动条中间部分 */
  background-color: white;
}
::-webkit-scrollbar-thumb { /* 滑块 */
  width: 0px;
  background: #CBCBCB;
}
::-webkit-scrollbar-thumb:hover { /* 鼠标移入滑块 */
  background: #909090;
}

2. 边框不占宽度和高度

*{
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */
}

3. 背景图片不平铺

.div{
  background-repeat: no-repeat;
}

4. 选择器

/* a. 选择器 选中奇数 */
p:nth-child(odd){}
/* b. 选择器 选中偶数 */
p:nth-child(even){}

5. margin和padding不同参数个数

.div{
 /* 四个参数 */
 margin: 上 右 下 左;
 /* 三个参数 */
 margin: 上 右 = 左 下;
 /* 二个参数 */
 margin: 上 = 下  右 = 左;
 /* 一个参数 */
 margin: 上 = 右 = 下 = 左;
}

6. 多媒体查询

@media screen and ( 条件 ){
  样式
}