大家好，我是传智，今天是来钓鱼的。修改占位符样式，多行文字溢出，隐藏滚动条，修改光标颜色，水平和垂直居中。这些熟悉的场景！前端开发者几乎天天和它们打交道，这里有19个CSS技巧，一起来看看吧。1、解决img5px间距的问题你是不是经常遇到图片底部5px间距的问题？别担心，这里有4种方法来解决它。方案一：将父元素的字体大小设置为0关键代码：.img-container{font-size:0;}示例地址：https://codepen.io/qianlong/pen/VwrzoyE。方案二：设置img元素显示：block关键代码：img{vertical-align:bottom;}示例地址：https://codepen.io/qianlong/pen/eYeGONM。方案三：设置img元素为vertical-align:bottom关键代码：img{vertical-align:bottom;}示例地址：https://codepen.io/qianlong/pen/jOaGNWw。方案四：给父元素设置line-height:5px关键代码：.img-container{line-height:5px;}示例地址：https://codepen.io/qianlong/pen/PoOJYzN2，元素高度和window如何使元素与窗口一样高？答案使用高度：100vh。案例地址：https://codepen.io/qianlong/pen/xxPXKXe。3、修改输入占位符样式的关键代码：.placehoder-custom::-webkit-input-placeholder{color:#babbc1;font-size:12px;}示例地址：https://codepen.io/qianlong/pen/JjOrPOq4,使用:not选择器除了最后一个元素之外的所有元素都需要一些样式，使用not选择器很容易做到。如下图所示：最后一个元素没有底边。关键代码li:not(:last-child){border-bottom:1pxsolid#ebedf0;}示例地址：https://codepen.io/qianlong/pen/QWOqLQO。5.使用flex布局智能固定一个元素在底部当内容不够时，按钮应该在页面底部。当有足够的内容时，按钮应该跟随内容。当你遇到类似问题时，使用flex进行智能布局。案例地址：https://codepen.io/qianlong/pen/ZEaXzxM。6、使用caret-color修改光标的颜色可以使用caret-color修改光标的颜色，如下图：caret-color:#ffd476;示例地址：https://codepen.io/qianlong/pen/YzErKvy。7、去掉type="number"结尾的箭头默认情况下，type="number"的结尾会出现一个小箭头，但是有时候我们需要去掉它。我们应该怎么做？关键代码：.no-arrow::-webkit-outer-spin-button,.no-arrow::-webkit-inner-spin-button{-webkit-appearance:none;}案例地址：https://codepen。io/qianlong/pen/OJOxLrg.8.outline:none删除输入状态行。当输入框被选中时，默认会有一个蓝色的状态行，可以使用outline:none去掉。如下图：去掉了第二个输入框，但是没有去掉第一个输入框。活动地址：https://codepen.io/qianlong/pen/YzErzKG。9、解决iOS滚动条卡住的问题在苹果手机上，滚动时经常出现元素卡住的问题。这时候你可以使用下面的CSS来支持弹性滚动。body,html{-webkit-overflow-scrolling:touch;}10,controltriangle.box{padding:15px;背景色：#f5f6f9；边界半径：6px；显示：弹性；内容：中心；}.triangle{显示：内联块；右边距：10px；/*基本样式*/border:solid10pxtransparent;}/*bottom*/.triangle.bottom{border-top-color:#0097a7;}/*Top*/.triangle.top{border-bottom-color:#b2ebf2;}/*Left*/.triangle.left{border-right-color:#00bcd4;}/*Right*/.triangle.right{border-left-color:#009688;}示例位置：https://codepen.io/qianlong/pen/rNYGNRe。11.绘制小箭头，关键代码：.box{padding:15px;背景色：#ffffff；边界半径：6px；显示：弹性；对齐项目：居中；证明内容：居中；}.arrow{显示：内联块；右边距：10px；宽度：0；高度：0；/*基本样式*/border:16pxsolid;边框颜色：透明#cddc39透明透明；位置：相对；}.arrow::after{内容：“”；位置：绝对；右：-20px；顶部：-16px；边框：16px实心；border-color:transparent#ffftransparenttransparent;}/*bottom*/.arrow.bottom{transform:rotate(270deg);}/*top*/.arrow.top{transform:rotate(90deg);}/*left*/.arrow.left{transform:rotate(180deg);}/*right*/.arrow.right{transform:rotate(0deg);}示例地址：https://codepen.io/qianlong/pen/ZEaXEEP。12.图像适应窗口大小。案例地址：https://codepen.io/qianlong/pen/PoOJoPO。13.隐藏滚动条第一个滚动条可见，第二个滚动条隐藏。这意味着容器可以滚动，但滚动条隐藏起来，就好像它是透明的一样。关键代码：.box-hide-scrollbar::-webkit-scrollbar{display:none;/*ChromeSafari*/}示例地址：https://codepen.io/qianlong/pen/yLPzLeZ。14、自定义选中文字样式关键代码：.box-custom::selection{color:#ffffff;background-color:#ff4c9f;}示例地址：https://codepen.io/qianlong/pen/jOaGOVQ。15、不允许选择文本键码：.boxp:last-child{user-select:none;}示例地址：https://codepen.io/qianlong/pen/rNYGNyB。16.元素水平和垂直居中关键代码：display:flex;对齐项目：居中；证明内容：居中；示例地址：https://codepen.io/qianlong/pen/VwrMwWb。17、单行文字溢出时显示省略号的关键代码：overflow:hidden;空白：nowrap；文本溢出：省略号；最大宽度：375px；示例地址：https://codepen.io/qianlong/pen/vYWeYJJ。18、多行文字溢出时显示省略号键码：overflow:hidden；文本溢出：省略号；显示：-webkit-box；/*设置n行，包括1行*/-webkit-line-clamp:2;-webkit-box-orient：垂直；示例地址：https://codepen.io/qianlong/pen/ZEaXEJg。19.使用“filter:grayscale(1)”使页面处于灰色模式。关键代码：body{filter:grayscale(1);}作者：MattMaribojocmake-you-a-better-developer-d80ae5c09617。
