Cacher is the code snippet organizer for pro developers

# 1.先引入normalize.css 重置页面整体样式

# 2.覆写基本默认样式
#### HTML根元素font-size设置62.5%,以便1rem = 10px
> 浏览器根元素的默认font-size是16px, 而62.5%正好是10px。
> 所以将浏览器根元素设置成62.5%, 1rem == 10px将变得好计算。
> 如设计稿的文字大小是14px, 就可以设置成1.4rem。  
>*注*：  
>在中文版chrome浏览器中，中文最小是12px, 所以3rem不是上面设置的30px，而是36px

#### 设置文字选中的背景颜色
```css
::selection {
  background-color: #F00; 
  text-shadow: none;
}
```

#### 覆写ul,li
```css
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
```

### 工具样式

### div内的item都是浮动的，那么这个div的高度就是0
> 解决方法: `div{overflow:auto}`

#### 清除浮动
```css
.clearfix:before,
.clearfix:after {
  content: ' ';
  display: table;
}
.clearfix:after {
  clear: both;
}

<!--第二种写法-->
清除浮动的影响，一般使用的样式如下，统称`clearfix`代码。所有 float 元素的父容器，一般情况下都应该加`clearfix`这个 class。

```
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /* 兼容 IE 低版本 */
}
```

### 消除li之间因回车换行符引起的间隙
> 假设代码如下
```css
<ul>
  <li><a>1111</a></li>
  <li><a>2222</a></li>
  <li><a>3333</a></li>
  <li><a>4444</a></li>
</ul>
```
>解决方法如下:  
> 1. `<li></li>`标签不换行，全写到一行
> 2. `<li></li>`标签中删除闭合标签，让hmlt自动添加闭合标签，顺便去掉换行符。
> 3. ul设置font-size:0; li中重新设置文字大小，但这会引起其他问题。
> 4. li设置margin-left:-3px; 大小可自定义，副作用是浏览器之间默认间隙可能不同，显示效果可能存在差异。

### 一行3个item实例
```html
<div class="wrapper">
  <div class="wrap-content">
    <div class="item"> </div> 
    <div class="item"> </div> 
    <div class="item"> </div> 
  </div>
</div>
```
```css
 .wrapper {
   width: 100%;
 } 
 .wrap-content {
   with: 90%;
 }
 .wrap-content .item + .item {
   margin-left: 1.5rem;
 }
 .wrap-content .item {
   box-sizing:border-box;
   /* 或 flot:left; */
   display: inline-block; 
   padding: 1rem;
   /* 1.5rem * 2 / 3 = 1rem, 所以每个rem要减去1rem */
   with: calc(33.3333333333% - 1rem);
 }
```

### 用css3伪类::before添加文字
```css
.item a:first-child:before {
  /* \00a0是不换行的空格字符，在伪类中不能使用&nbsp */
  content: '伪类文字加空格: \00a0\00a0';
  color: #222;
}
```

### 文字省略不换行
```css
.text {
  /* 隐藏滚动条 */
  overflow: hidden;
  /* 用省略号截断文字 */
  text-overflow: ellipsis;
  /* 文字不换行 */
  white-space: nowrap;
}
```

### css3 滤镜 filter


### 媒体查询
> 因为媒体查询中的相对像素比html等级高，所以不受`html{font-size:62.5%}`限制， 采用的是浏览器的默认像素，16px(在浏览器设置中可以修改)
```css
/* 在媒体查询中使用em和rem结果一样，但em兼容性比rem好些，所以使用rem */
/* html文档中继续使用rem */
/* 50em == 50rem    */
/* 16 * 50 = 800px */
@media only screen and (max-width: 50em) {

}
@media only screen and (min-width: 30em) and (max-width:50em) {

}
@media only screen and (max-width:30em) {

}
```

### 图片响应式
> 1. 通过判断视口宽度判断用哪个图片
```javascript
window.addEventListener('resize', function(){})
```
> 2. picture resorce