在工作中，为了提升工作效率与持续学习，常常会收集整理很多素材，有网站案例源码，有片段的代码特，在这里我收集的一些CSS小技巧。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年我花了一个月整理了一份最适合2020年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

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" /> // 这种标签无效

在工作中，为了提升工作效率与持续学习，常常会收集整理很多素材，有网站案例源码，有片段的代码特，在这里我收集的一些CSS小技巧。

作者：ikonan
链接：https://www.jianshu.com/p/f09eb7f19013