CSS

1、解决 img 5px 间距的问题

是否经常遇到图片底部多出5px间距的问题？不用急，这里有4种方法可以解决。
19 个 CSS 技巧 - 图1

方案1：设置父元素字体大小为 0

关键代码：

  1. .img-container{
  2.   font-size: 0;
  3. }

事例地址：https://codepen.io/Fcant/pen/abVPEoO
点击查看【codepen】

方案2：将 img 元素设置为 display: block

关键代码：

  1. img{
  2.   display: block;
  3. }

事例地址：https://codepen.io/Fcant/pen/ZEaVagN
点击查看【codepen】

方案3：将 img 元素设置为 vertical-align: bottom

关键代码：

  1. img{
  2.   vertical-align: bottom;
  3. }

事例地址：https://codepen.io/Fcant/pen/wvPRPVm
点击查看【codepen】

解决方案4：给父元素设置 line-height: 5px

关键代码：

  1. .img-container{
  2.   line-height: 5px;
  3. }

事例地址：https://codepen.io/Fcant/pen/gOXZXVG
点击查看【codepen】

2、元素的高度与 window 的高度相同

如何使元素与窗口一样高？答案使用 height: 100vh;
事例地址：https://codepen.io/Fcant/pen/LYOMOwN
点击查看【codepen】

3、修改 input placeholder 样式

关键代码：

  1. .placehoder-custom::-webkit-input-placeholder {
  2.   color: #babbc1;
  3.   font-size: 12px;
  4. }

19 个 CSS 技巧 - 图2
事例地址：https://codepen.io/Fcant/pen/yLPGPdZ
点击查看【codepen】

4、使用 :not 选择器

除了最后一个元素外，所有元素都需要一些样式，使用 not 选择器非常容易做到。
如下图所示：最后一个元素没有底边。
19 个 CSS 技巧 - 图3
关键代码

  1. li:not(:last-child) {
  2.   border-bottom: 1px solid #ebedf0;
  3. }

事例地址：https://codepen.io/Fcant/pen/gOXZXNG
点击查看【codepen】

5、使用 flex 布局将一个元素智能地固定在底部

当内容不够时，按钮应该在页面的底部。当有足够的内容时，按钮应该跟随内容。当遇到类似的问题时，使用 flex 来实现智能的布局。
19 个 CSS 技巧 - 图4
事例地址：https://codepen.io/Fcant/pen/dyZwZBp
点击查看【codepen】

6、使用 caret-color 来修改光标的颜色

可以使用 caret-color 来修改光标的颜色，如下所示：

  1. caret-color: #ffd476;

19 个 CSS 技巧 - 图5
事例地址：https://codepen.io/Fcant/pen/rNYoYgE
点击查看【codepen】

7、删除 type="number" 末尾的箭头

默认情况下，在type="number"的末尾会出现一个小箭头，但有时需要将其删除。应该怎么做呢？
19 个 CSS 技巧 - 图6
关键代码：

  1. .no-arrow::-webkit-outer-spin-button,
  2. .no-arrow::-webkit-inner-spin-button {
  3.   -webkit-appearance: none;
  4. }

事例地址：https://codepen.io/Fcant/pen/KKybyLr
点击查看【codepen】

8、outline:none 删除输入状态线

当输入框被选中时，它默认会有一条蓝色的状态线，可以通过使用 outline: none 来移除它。
如下图所示：第二个输入框被移除，第一个输入框没有被移除。
19 个 CSS 技巧 - 图7
事件地址：https://codepen.io/Fcant/pen/gOXZXJG
点击查看【codepen】

9、解决iOS滚动条被卡住的问题

在苹果手机上，经常发生元素在滚动时被卡住的情况。这时，可以使用如下的 CSS 来支持弹性滚动。

  1. body,html{
  2.   -webkit-overflow-scrolling: touch;
  3. }

10、绘制三角形

19 个 CSS 技巧 - 图8

  1. .box {
  2.   padding: 15px;
  3.   background-color: #f5f6f9;
  4.   border-radius: 6px;
  5.   display: flex;
  6.   align-items: center;
  7.   justify-content: center;
  8. }
  10. .triangle {
  11.   display: inline-block;
  12.   margin-right: 10px;
  13.   /* Base Style */
  14.   border: solid 10px transparent;
  15. }
  16. /*下*/
  17. .triangle.bottom {
  18.   border-top-color: #0097a7;
  19. }
  20. /*上*/
  21. .triangle.top {
  22.   border-bottom-color: #b2ebf2;
  23. }
  24. /*左*/
  25. .triangle.left {
  26.   border-right-color: #00bcd4;
  27. }
  28. /*右*/
  29. .triangle.right {
  30.   border-left-color: #009688;
  31. }

事例地址：https://codepen.io/Fcant/pen/dyZwZEp
点击查看【codepen】

11、绘制小箭头、

19 个 CSS 技巧 - 图9
关键代码：

  1. .box {
  2.   padding: 15px;
  3.   background-color: #ffffff;
  4.   border-radius: 6px;
  5.   display: flex;
  6.   align-items: center;
  7.   justify-content: center;
  8. }
  10. .arrow {
  11.   display: inline-block;
  12.   margin-right: 10px;
  13.   width: 0;
  14.   height: 0;
  15.   /* Base Style */
  16.   border: 16px solid;
  17.   border-color: transparent #cddc39 transparent transparent;
  18.   position: relative;
  19. }
  21. .arrow::after {
  22.   content: "";
  23.   position: absolute;
  24.   right: -20px;
  25.   top: -16px;
  26.   border: 16px solid;
  27.   border-color: transparent #fff transparent transparent;
  28. }
  29. /*下*/
  30. .arrow.bottom {
  31.   transform: rotate(270deg);
  32. }
  33. /*上*/
  34. .arrow.top {
  35.   transform: rotate(90deg);
  36. }
  37. /*左*/
  38. .arrow.left {
  39.   transform: rotate(180deg);
  40. }
  41. /*右*/
  42. .arrow.right {
  43.   transform: rotate(0deg);
  44. }

事例地址：https://codepen.io/Fcant/pen/qBVLVGb
点击查看【codepen】

12、图像适配窗口大小

19 个 CSS 技巧 - 图10
事例地址：https://codepen.io/Fcant/pen/rNYoYbE
点击查看【codepen】

13、隐藏滚动条

第一个滚动条是可见的，第二个滚动条是隐藏的。这意味着容器可以被滚动，但滚动条被隐藏起来，就像它是透明的一样。
19 个 CSS 技巧 - 图11
关键代码：

  1. .box-hide-scrollbar::-webkit-scrollbar {
  2.   display: none; /* Chrome Safari */
  3. }

事例地址：https://codepen.io/Fcant/pen/NWwewmM
点击查看【codepen】

14、自定义选定的文本样式

19 个 CSS 技巧 - 图12
关键代码：

  1. .box-custom::selection {
  2.   color: #ffffff;
  3.   background-color: #ff4c9f;
  4. }

事例地址：https://codepen.io/Fcant/pen/gOXZXyx
点击查看【codepen】

15、不允许选择文本

19 个 CSS 技巧 - 图13
关键代码：

  1. .box p:last-child {
  2.   user-select: none;
  3. }

事例地址：https://codepen.io/Fcant/pen/YzEdEMp
点击查看【codepen】

16、将一个元素在水平和垂直方向上居中

19 个 CSS 技巧 - 图14
关键代码：

  1. display: flex;
  2. align-items: center;
  3. justify-content: center;

事例地址：https://codepen.io/Fcant/pen/ZEaVaPP
点击查看【codepen】

17、单行文本溢出时显示省略号

19 个 CSS 技巧 - 图15
关键代码：

  1. overflow: hidden;
  2. white-space: nowrap;
  3. text-overflow: ellipsis;
  4. max-width: 375px;

事例地址：https://codepen.io/Fcant/pen/NWwewJM
点击查看【codepen】

18、多行文本溢出时显示省略号

19 个 CSS 技巧 - 图16
关键代码：

  1. overflow: hidden;
  2. text-overflow: ellipsis;
  4. display: -webkit-box;
  5. /* set n lines, including 1 */
  6. -webkit-line-clamp: 2;
  7. -webkit-box-orient: vertical;

事例地址：https://codepen.io/Fcant/pen/RwjEjdp
点击查看【codepen】

19、使用 “filter:grayscale(1)“，使页面处于灰色模式。

19 个 CSS 技巧 - 图17
关键代码：

  1. body{
  2.   filter: grayscale(1);
  3. }