出现原因

因为出现空白的元素设置了宽度100%，缩小窗口相当于减小了宽度值，那么为什么出现滚动条呢？是因为页面中至少有一个元素a的width大于窗口的width，导致把页面撑开，出现了滚动条，而此时那个width：100%的元素宽度等于窗口宽度且小于元素a的宽度，所以右侧的空白长度=a的宽度-窗口宽度。  



### 解决这个问题其实很简单

- 给body设置最小宽度`min-width`,在ie6下不兼容

  ```css
  body{
       min-width: 1000px;
       overflow-x: hidden;
  }
  ```

- 还可以给div元素设置最小宽度，如果页面元素复杂，要一个个设置

- 给CSS样式设置`width:expression(document.body.clientWidth <= 960? "960px": "auto");`

  ```css
  #wrap {
      width:100%;
      background:#ddd;
      width:expression(document.body.clientWidth <= 960? "960px": "auto");
      min-width:960px;
  }
  ```

  推荐第一种

关于PC端缩小浏览器窗口，右边背景空白并出现滚动条

# CSS垂直居中

**方法一：`line-height`**

适用场景：单行文字垂直居中

**方法二：`line-height + display: inline-block`**

适用场景：多对象垂直居中

**方法三：`before +inline-block`**

适用场景：多对象CSS垂直居中

**方法四：`absolut + margin`**

适用场景：多行文字的垂直居中

**方法五：`absolut + margin auto`**

适用场景：多行文字的垂直居中

**方法六：`absolut + transform: translate(X,Y);`**

适用场景：多行文字的垂直居中

**方法七：`display: flex; + align-items: center;`**

适用场景：多行文字的垂直居中

**方法八：`display: flex; + margin`**

适用场景：多行文字的垂直居中

**方法九：`display: flex; + :before + flex-grow`**

适用场景：多行文字的垂直居中

**方法十：`display: flex; + align-self`**

适用场景：多行文字的垂直居中

**方法十一：`display: flex; + align-content`**

适用场景：多行文字的垂直居中

**方法十二：`grid + template`**

适用场景：多行文字的垂直居中

**方法十三：`grid + align-items`**

适用场景：多行文字的垂直居中

**方法十四：`grid + align-content`**

适用场景：多行文字的垂直居中

**方法十五：`grid + align-self`**

适用场景：多行文字的垂直居中

**方法十六：`grid + place-items`**

适用场景：多行文字的垂直居中

**方法十七：`grid + place-content`**

适用场景：多行文字的垂直居中

**方法十八：`grid + margin`**

适用场景：多行文字的垂直居中

**方法十九：`display:table-cell`**

适用场景：多行文字的垂直居中

**方法二十：`calc`**

适用场景：多行文字的垂直居中

**方法二十一：`relative + translate`**

适用场景：多行文字的垂直居中

**方法二十二：`padding`**

适用场景：多行文字的垂直居中

**方法二十三：`writing-mode`**

适用场景：多行文字的垂直居中

垂直居中的几种方法

# Git常用命令
请前往阮一峰的文章[常用 Git 命令清单](http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html)

## 增加
 - `reset`git bash 清除屏幕的方式 


