13 个前端可能用得上的 CSS技巧

修改输入占位符样式、多行文本溢出、隐藏滚动条、修改光标颜色、水平和垂直居中。多么熟悉的场景！前端开发者几乎每天都会和它们打交道，本文收集 13 个CSS技巧，一起来来温故一下吧。

1. 解决图片5px间距问题

是否经常遇到图片底部多出 5px 间距的问题？不着急，有4种方法可以解决。

• 解决方案 1：将其父元素的 font-size:0px
• 解决方案 2：将 img 的样式增加 display:block
• 解决方案 3：将 img 的样式增加 vertical-align:bottom
• 解决方案 4：将父元素的样式增加 line-height:5px

2. 如何让元素高度与窗口相同

在现在前端中，CSS有一个单位是 vh，将元素高度样式设置为 height:100vh

3. 修改输入框 placeholder 样式

这个是表单输入框占位符属性，如何来修改默认样式，如下：

input::-webkit-input-placeholder {color: #babbc1;font-size: 12px;
} 

4. 使用 :not 选择器

除了最后一个元素之外的所有元素都需要一些样式，使用 not 选择器可以非常容易实现。

例如实现一个列表，最后一个元素不需要下划线，如下：

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

5. 使用 caret-color 修改光标颜色

有时需要修改光标的颜色。现在是插入符号颜色显示时间。

.caret-color {width: 300px;padding: 10px;margin-top: 20px;border-radius: 10px;border: solid 1px #ffd476;box-sizing: border-box;background-color: transparent;outline: none;color: #ffd476;font-size: 14px;/* 关键样式 */caret-color: #ffd476;
}

.caret-color::-webkit-input-placeholder {color: #4f4c5f;font-size: 14px;
} 

6. 使用 flex 布局将元素智能地固定在底部

当内容不够时，按钮应该在页面底部。当有足够的内容时，按钮应该跟随内容。当遇到类似问题时，可以使用flex实现智能布局！

<div class="container"><div class="main">这里为内容</div><div class="footer">按钮</div>
</div> 

CSS 代码如下：

.container {height: 100vh;/* 关键样式 */display: flex;flex-direction: column;justify-content: space-between;
}

.main {/* 关键样式 */flex: 1;background-image: linear-gradient(45deg,#ff9a9e 0%,#fad0c4 99%,#fad0c4 100%);display: flex;align-items: center;justify-content: center;color: #fff;
}

.footer {padding: 15px 0;text-align: center;color: #ff9a9e;font-size: 14px;
} 

7. 去掉 type="number" 末尾的箭头

默认情况下，input 类型为 type="number" 的末尾会出现一个小箭头，但有时需要将其去掉，可以用一下样式：

input {width: 300px;padding: 10px;margin-top: 20px;border-radius: 10px;border: solid 1px #ffd476;box-sizing: border-box;background-color: transparent;outline: none;color: #ffd476;font-size: 14px;caret-color: #ffd476;display: block;
}

input::-webkit-input-placeholder {color: #4f4c5f;font-size: 14px;
}
/* 关键样式 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none;
} 

8. 使用 outline:none 删除输入状态行

当输入框被选中时，默认会有一个蓝色的状态行，可以使用 outline:none 将其去掉。

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

在苹果手机上，经常会出现滚动时元素卡住的情况，这个时候只有一行CSS会支持弹性滚动。

body,html{-webkit-overflow-scrolling: touch;
} 

10. 画三角形

.triangle {display: inline-block;margin-right: 10px;/* 基础样式 */border: solid 10px transparent;
}
/* 向下三角形 */
.triangle.bottom {border-top-color: #0097a7;
}
/* 向上三角形 */
.triangle.top {border-bottom-color: #b2ebf2;
}
/* 向左三角形 */
.triangle.left {border-right-color: #00bcd4;
}
/* 向右三角形 */
.triangle.right {border-left-color: #009688;
} 

11. 自定义选定的文本样式

可以通过样式自定义文本选择的颜色和样式，关键样式如下：

::selection {color: #ffffff;background-color: #ff4c9f;
} 

12. 不允许选择的文本

使用样式 user-select: none;

13 使用 filter:grayscale(1) 使页面处于灰色模式

一行代码将使页面处于灰色模式。

body{filter: grayscale(1);
} 

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享