<h3>CSS Hack</h3>
<p>书写顺序：Chrome -&gt; FF -&gt;  IE8 -&gt; IE7 -&gt; IE6</p>
<table>
<thead>
<tr>
<th>*</th>
<th>版本</th>
</tr>
</thead>
<tbody>
<tr>
<td>_</td>
<td>IE6以下</td>
</tr>
<tr>
<td>\9</td>
<td>IE6+</td>
</tr>
<tr>
<td>*</td>
<td>IE7 以下</td>
</tr>
<tr>
<td>*+</td>
<td>IE7</td>
</tr>
<tr>
<td>\0</td>
<td>IE8+ 和 Opera</td>
</tr>
</tbody>
</table>
<h3>Media Queries</h3>
<pre><code class="lang-html language-html html">&lt;link rel=&quot;stylesheet&quot; href=&quot;big.css&quot; media=&quot;screen and (min-width: 641px)&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;small.css&quot; media=&quot;screen and (max-width: 640px)&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; media=&quot;screen and (min-width:640px) and (max-width:900px)&quot;&gt;</code></pre>
<h3>Flex水平垂直居中</h3>
<pre><code class="lang-css language-css css">{
  display: flex;
  align-item: center;
  justify-content: center;
}</code></pre>
<h3>屏幕自动居中</h3>
<pre><code class="lang-css language-css css">{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  transform: translate(-50%, -50%);
}</code></pre>
<h3>单行文本溢出</h3>
<pre><code class="lang-css language-css css">{
  text-overflow: ellipsis;
  white-space: nowrap;
    overflow: hidden;
}</code></pre>
<h3>多行文本溢出</h3>
<pre><code class="lang-css language-css css">{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}</code></pre>
<h3>ios平滑滚动效果</h3>
<pre><code class="lang-css language-css css">{
  -webkit-overflow-scrolling: touch;
}</code></pre>
<h3>清除浮动</h3>
<pre><code class="lang-css language-css css">:after {
  display: block;
  clear: both;
  content: &quot; &quot;;
}</code></pre>
<h3>字体&amp;规范</h3>
<ul>
<li>
<p>OOCSS、SMACSS、BEM</p>
</li>
<li>
<p>移动端字体</p>
<pre><code class="lang-css language-css css">{
font-family: Tahoma, Arial, Roboto, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, &quot;Droid Sans Fallback&quot;, &quot;Heiti SC&quot;, sans-self;
}</code></pre>
</li>
<li>
<p>PC端字体</p>
<pre><code class="lang-css language-css css">{
font-family: Tahoma, Arial, &quot;Helvetica Neue&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Simsun, sans-self;
}</code></pre>
</li>
<li>
<p>移动 &amp; PC 字体</p>
<pre><code class="lang-css language-css css">{
font-family: Tahoma,Arial,Roboto,&quot;Droid Sans&quot;,&quot;Helvetica Neue&quot;,&quot;Microsoft YaHei&quot;,&quot;Droid Sans Fallback&quot;,&quot;Heiti SC&quot;,&quot;Hiragino Sans GB&quot;,Simsun,sans-self;
}</code></pre>
</li>
</ul>
<h3>中文两端对齐</h3>
<pre><code class="lang-css language-css css">{
  text-justify: inter-ideograph;
  text-align: justify;
}</code></pre>
<h3>省略文字</h3>
<pre><code class="lang-css language-css css">{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}</code></pre>
<h3><code>&lt;pre&gt;</code> 文字适应浏览器宽度</h3>
<pre><code class="lang-css language-css css">{
  white-space: pre-wrap;
  word-wrap: break-word;
}</code></pre>
<h3>自动换行</h3>
<pre><code class="lang-css language-css css">{
  white-space: normal;
  word-wrap: break-word;
  word-break: normal;
}</code></pre>
<h3>三角形</h3>
<pre><code class="lang-css language-css css">{
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 50px solid red;
}</code></pre>
<h3>自定义字体</h3>
<pre><code class="lang-css language-css css">@font-face {
  font-family: &#039;iconfont&#039;;
  src: url(&#039;//at.alicdn.com/t/font_657067_0jljwrqiuueo.eot&#039;);
  src: url(&#039;//at.alicdn.com/t/font_657067_0jljwrqiuueo.eot?#iefix&#039;) format(&#039;embedded-opentype&#039;),
  url(&#039;//at.alicdn.com/t/font_657067_0jljwrqiuueo.woff2&#039;) format(&#039;woff2&#039;),
  url(&#039;//at.alicdn.com/t/font_657067_0jljwrqiuueo.woff&#039;) format(&#039;woff&#039;),
  url(&#039;//at.alicdn.com/t/font_657067_0jljwrqiuueo.ttf&#039;) format(&#039;truetype&#039;),
  url(&#039;//at.alicdn.com/t/font_657067_0jljwrqiuueo.svg#iconfont&#039;) format(&#039;svg&#039;);
}</code></pre>
<h3>移动端1px</h3>
<pre><code class="lang-css language-css css">.box {
  position: relative;
  width: 100%;
  height: 1px;
  margin: 20px 0;
}
.box::after {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  content: &#039;&#039;;
  background: red;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}</code></pre>
<h3>calc 函数</h3>
<pre><code class="lang-css language-css css">#div {
  position: absolute;
  left: 50px;
  width: calc( 100% / (100px * 2) );
  border: 1px solid black;
}</code></pre>
<h3>css 禁止用户选择</h3>
<pre><code class="lang-css language-css css">body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}</code></pre>
<h3>消除 transtration 闪屏</h3>
<pre><code class="lang-css language-css css">.css {
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}</code></pre>
<h3>去掉Chrome中input获得焦点时的颜色边框</h3>
<pre><code class="lang-css language-css css">input {
  outline: none;
}</code></pre>

【CSS】常用样式