20 个超级实用的 CSS 技巧，帮助你成为更好的开发者

在开发项目中，修改输入占位符样式，多行文本溢出，隐藏滚动条，修改光标颜色，水平和垂直居中等等，这些都是我们非常熟悉的开发场景！前端开发者几乎每天都会和它们打交道，因此，我在这里给大家总结了20个超级实用的CSS技巧，一起来看看吧。,你是否经常遇到图片底部多出5px间距的问题？不着急，这里有4种方法可以帮助你解决此问题。,演示地址：https://codepen.io/qianlong/pen/VwrzoyE,具体实现代码如下：,HTML, CSS,演示地址：https://codepen.io/qianlong/pen/eYeGONM,具体实现代码如下：,HTML,CSS ,演示地址：https://codepen.io/qianlong/pen/jOaGNWw,具体实现代码如下：,HTML,CSS,演示地址：https://codepen.io/qianlong/pen/PoOJYzN,具体实现代码如下：,HTML,  CSS,演示地址：https://codepen.io/qianlong/pen/xxPXKXe,如何让元素和窗口一样高？示例代码如下：,演示地址：https://codepen.io/qianlong/pen/JjOrPOq,第一个修改了，第二个没有修改。,,演示地址：https://codepen.io/qianlong/pen/QWOqLQO,除了最后一个元素之外的所有元素都需要一些样式，使用 not 选择器会非常容易。,如下图：最后一个元素没有底边框。,,演示地址：https://codepen.io/qianlong/pen/ZEaXzxM,当内容不够时，按钮应该在页面底部。当有足够的内容时，按钮应该跟随内容。当你遇到类似问题时，使用flex实现智能布局！,,代码如下：,演示地址：https://codepen.io/qianlong/pen/YzErKvy​,有时需要修改光标的颜色。现在是插入符号颜色显示时间。,,演示地址：https://codepen.io/qianlong/pen/OJOxLrg,默认情况下，input type = “number”的末尾会出现一个小箭头，但有时我们需要将其去掉。我们应该做什么？,如下图：第二个去掉了，第一个没有。,,演示地址：https://codepen.io/qianlong/pen/YzErzKG,当输入框被选中时，默认会有一个蓝色的状态行，可以使用 outline: none 去掉。,如下图：第二个输入框去掉了，第一个没有。,,在苹果手机上，经常会出现滚动时元素卡住的情况。这个时候只有一行CSS会支持弹性滚动。,演示地址：https://codepen.io/qianlong/pen/rNYGNRe,,演示地址：https://codepen.io/qianlong/pen/ZEaXEEP,,演示地址：https://codepen.io/qianlong/pen/PoOJoPO,,vw vs padding,演示地址：https://codepen.io/qianlong/pen/yLPzLeZ,​,第一个滚动条可见，第二个隐藏。,这意味着容器可以滚动，但是滚动条是隐藏的，就好像它是透明的一样。,演示地址：https://codepen.io/qianlong/pen/jOaGOVQ,​,演示地址：https://codepen.io/qianlong/pen/rNYGNyB,​,第一个内容可以选，第二个不可以选中了。,演示地址：https://codepen.io/qianlong/pen/VwrMwWb,,演示地址：https://codepen.io/qianlong/pen/vYWeYJJ,​,演示地址：https://codepen.io/qianlong/pen/ZEaXEJg,,演示地址：https://codepen.io/qianlong/pen/dyZVyZW,,这是一种老式的布局方式，现在大部分移动端都不用了。,如下图，外层的高度没有塌陷，这就是为什么要使用clearfix类。,,一行代码将使页面处于灰色模式，这功能也很实用的，国内最近一周的各大平台，基本都是这个灰色模式，至于原因嘛，大家都知道了，这里就不说了。,​,,这些都是灰色模式，后期如果我们想要恢复到原来的正常模式，我们只需要在CSS里将filter: grayscale(1);这行代码注释掉即可。,到这里，我今天所要与你分享的20个关于CSS的实用技巧就结束了，希望这些技巧能帮助到你，如果你觉得有用的话，请记得点赞我，关注我，并将这篇文章分享给你的朋友，也许能够帮助到他。