【CSS】常用样式（持续更新）

CSS Hack

书写顺序：Chrome -> FF -> IE8 -> IE7 -> IE6

Media Queries

<link rel="stylesheet" href="big.css" media="screen and (min-width: 641px)">
<link rel="stylesheet" href="small.css" media="screen and (max-width: 640px)">
<link rel="stylesheet" href="style.css" media="screen and (min-width:640px) and (max-width:900px)">

Flex水平垂直居中

{
  display: flex;
  align-item: center;
  justify-content: center;
}

屏幕自动居中

{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  transform: translate(-50%, -50%);
}

单行文本溢出

{
  text-overflow: ellipsis;
  white-space: nowrap;
    overflow: hidden;
}

多行文本溢出

{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

ios平滑滚动效果

{
  -webkit-overflow-scrolling: touch;
}

清除浮动

:after {
  display: block;
  clear: both;
  content: " ";
}

字体&规范

• OOCSS、SMACSS、BEM

• 移动端字体

  {
  font-family: Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", sans-self;
  }

• PC端字体

  {
  font-family: Tahoma, Arial, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", Simsun, sans-self;
  }

• 移动 & PC 字体

  {
  font-family: Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Microsoft YaHei","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;
  }

中文两端对齐

{
  text-justify: inter-ideograph;
  text-align: justify;
}

省略文字

{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

文字适应浏览器宽度
```css
{
  white-space: pre-wrap;
  word-wrap: break-word;
}
```

### 自动换行
```css
{
  white-space: normal;
  word-wrap: break-word;
  word-break: normal;
}
```

### 三角形
```css
{
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 50px solid red;
}
```

### 自定义字体
```css
@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.eot');
  src: url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.woff') format('woff'),
  url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.svg#iconfont') format('svg');
}
```

### 移动端1px
```css
.box {
  position: relative;
  width: 100%;
  height: 1px;
  margin: 20px 0;
}
.box::after {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: red;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}
```

### calc 函数
```css
#div {
  position: absolute;
  left: 50px;
  width: calc( 100% / (100px * 2) );
  border: 1px solid black;
}
```

### css 禁止用户选择
```css
body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
```

### 消除 transtration 闪屏
```css
.css {
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}
```

### 去掉Chrome中input获得焦点时的颜色边框
```css
input {
  outline: none;
}
```