在工作中，为了提升工作效率与持续学习，常常会收集整理很多素材，有网站案例源码，有片段的代码特，在这里我收集的一些CSS小技巧。
1. 容器水平居中
先该容器设置一个明确宽度，然后将margin的水平值设为auto即可
div.horizontal-center {
width: 760px;
margin: 0 auto;
}
// HTML
<div class="horizontal-center "></div
2. 容器垂直居中
比如，有一大一小两个容器，请问如何将小容器垂直居中？
//首先，将大容器的定位为relative。
div.large {
position: relative;
height: 200px;
background: red; //非必须
}
// 然后，将小容器定位为absolute，再将它的左上角沿y轴下移50%，
// 最后将它margin-top上移本身高度的50%即可。
div.small {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
background: purple; //非必须
}
// HTML
<div class="large">
<div class="small">xxx</div>
</div>
3. 用Flexbox 摆脱外边距的各种 hack
当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了：
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
现在，列表分隔符就会在均匀间隔的位置出现。
4. 如何使得较大的图片，能够自动适应小容器的宽度？
CSS可以这样写：
img {max-width: 100%}
5. 黑白图像
img.desaturate {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
// HTML
<img class="desaturate" src="img01.png"/>
6. 图片水平反转
img.flip-h {
-ms-filter: "FlipH";
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
}
// HTML
<img class="flip-h" src="avatar.jpg" />
7. font-size基准
浏览器的缺省字体大小是16px，你可以先将基准字体大小设为10px：
html { font-size:62.5%;}
后面统一采用rem作为字体单位，2.4rem就表示24px
h1 {font-size: 2.4 em}
8. text-transform
text-transform用于将所有字母变成小写字母、大写字母或首字母大写
// 把字母转换成大写
.transform-uppercase {
text-transform: uppercase;
}
// 把字母转换成小写
.transform-lowercase {
text-transform: capitalize;
}
// 首字母大写
.transform-capitalize {
text-transform: capitalize;
}
// HTML
<div class="transform-uppercase">upper case</div> // UPPER CASE
<div class="transform-lowercase">LOWER CASE</div> // lower case
<div class="transform-capitalize">capitalize</div> // Capitalize
9. font-variant
用于将字体变成小型的大写字母（即与小写字母等高的大写字母）
.font-small {
font-variant: small-caps;
}
// html
<div class="font-small">abcd</div>
10. 模糊文本
简单但很漂亮的文本模糊效果，简单又好看！
.blur {
color: transparent;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}
// HTML
<div class="blur">blur</div>
11. CSS首字放大
p:first-letter {
display: block;
float: left;
margin: -3px 0px 0 0;
color: red;
font-size: 1.4em;
font-family: Helvetica;
}
12. user-select 禁止用户选中文本
.unselect { user-select: none; }
13. 优化显示文本
有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
注：请负责任地使用 optimizeLegibility。此外，IE /Edge没有 text-rendering 支持
14. 容器透明度设置
将一个容器设为透明，可以使用下面的代码：
.element {
-moz-opacity: 0.5; // Firefox
-khtml-opacity: 0.5; // webkit核心的浏览器
filter: alpha(opacity=50); // IE专用的
opacity: 0.5; // Opera
}
// HTML
<div class="element"></div>
15. CSS三角形
如何使用CSS生成一个三角形？
.triangle {
height: 0px;
width: 0px;
border-style: solid;
border-width: 0px 300px 300px 300px;
border-color: transparent transparent green transparent;
}
// HTML
<div class="triangle"><div>
16. 取消IE文本框的滚动条
textarea { overflow: auto; }
17. 使用 :not() 取消底部边框
.nav li:not(:last-child) {
border-bottom: 1px solid #666;
}
// 通过此方法也可以取消第一个元素的顶部边框
// .nav li:not(:first-child) {}
// HTML
<ul class="nav">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
18. 页面顶部阴影
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
z-index: 100;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
19. 继承 box-sizing
让 box-sizing 继承 html,这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
20. 禁用鼠标点击事件
.disabled { pointer-events: none; }
// HTML
<a href="https://www.baidu.com" class="disabled">xxx</a>
21. 使用属性选择器用于空链接
当a元素没有文本值，但 href 属性有链接的时候显示链接：
a[href^="http"]:empty::before {
content: attr(href);
}
// HTML
<a href="https://www.baidu.com"></a> // 有效
<a href="https://www.baidu.com" /> // 这种标签无效
