作者：MattMaribojoc译者：前端小智来源：stackabuse有梦想，有干货，微信搜索【大千世界】关注这位大清早还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。修改占位符样式，多行文字溢出，隐藏滚动条，修改光标颜色，水平和垂直居中。这些熟悉的场景！前端开发者几乎天天和它们打交道，这里有20条CSS技巧，一起来看看吧。1、解决img5px间距的问题你是不是经常遇到图片底部5px间距的问题？别担心，这里有4种方法可以修复它。方案一：设置父元素字体大小为0关键代码：.img-container{font-size:0;}示例地址：https://codepen.io/qianlong/p...方案二：设置img元素显示：block关键代码：img{display:block;}示例地址：https://codepen.io/qianlong/p...方案三：设置img元素为vertical-align:bottom关键代码：img{vertical-align:bottom;}示例地址：https://codepen.io/qianlong/p...方案四：父元素设置line-height:5px关键代码：.img-container{line-height:5px;}示例地址：https://codepen.io/qianlong/p...2.元素的高度和窗口的高度一样如何让元素和窗口一样高？答案使用height:100vh;示例地址：https://codepen.io/qianlong/p...3、修改输入占位符样式的关键代码：.placehoder-custom::-webkit-input-placeholder{color:#babbc1;font-size:12px;}示例地址：https://codepen.io/qianlong/p...4.使用:not选择器。除了最后一个元素之外的所有元素都需要一些样式。使用not选择器很容易做到。如下图所示：最后一个元素没有底边。关键代码li:not(:last-child){border-bottom:1pxsolid#ebedf0;}示例地址：https://codepen.io/qianlong/p...5.使用flex布局智能固定一个元素在底部当内容不够时，按钮应该在页面底部。当有足够的内容时，按钮应该跟随内容。当你遇到类似问题时，使用flex进行智能布局。示例地址：https://codepen.io/qianlong/p...6.使用caret-color修改光标颜色可以使用caret-color修改光标颜色，如下：caret-color：#ffd476；示例地址：https://codepen.io/qianlong/p...7.删除type="number"结尾的箭头默认情况下，type="number"结尾会出现一个小箭头，但是有时我们需要删除它。我们应该做什么？关键代码：.no-arrow::-webkit-outer-spin-button,.no-arrow::-webkit-inner-spin-button{-webkit-appearance:none;}示例地址：https://codepen。io/qianlong/p...8。outline:none删除输入状态行当输入框被选中时，默认会有一个蓝色的状态行，你可以使用outline:none来删除它。如下图：去掉了第二个输入框，但是没有去掉第一个输入框。活动地址：https://codepen.io/qianlong/p...9.解决iOS滚动条卡住的问题在苹果手机上，滚动时经常出现元素卡住的问题。这时候你可以使用下面的CSS来支持弹性滚动。body,html{-webkit-overflow-scrolling:touch;}10.绘制三角形.box{padding:15px;背景色：#f5f6f9；边界半径：6px；显示：弹性；对齐项目：居中；证明内容：居中；}.triangle{显示：内联块；右边距：10px；/*基本样式*/border:solid10pxtransparent;}/*下*/.triangle.bottom{border-top-color:#0097a7;}/*上*/.triangle.top{border-bottom-color:#b2ebf2;}/*左*/.triangle.left{border-right-color:#00bcd4;}/*右*/.triangle.right{border-left-color:#009688;}事例地址：https://codepen.io/qianlong/p...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/p...12.图片适配窗口大小示例地址：https://codepen.io/qianlong/p...13。隐藏滚动条第一个滚动条是可见的，第二个滚动条是隐藏的，也就是说容器可以滚动但是滚动条是隐藏的，就好像它是透明的一样。关键代码：.box-hide-scrollbar::-webkit-scrollbar{display:none;/*ChromeSafari*/}示例地址：https://codepen.io/qianlong/p...14.自定义选择文本样式的关键代码：.box-custom::selection{color:#ffffff;background-color:#ff4c9f;}示例地址：https://codepen.io/qianlong/p...15。不允许选择文本关键代码：.boxp:last-child{user-select:none;}示例地址：https://codepen.io/qianlong/p...16。水平垂直居中元素关键代码：display:flex;align-items:center;justify-content:center;示例地址：https://codepen.io/qianlong/p...17.单行显示省略号文本溢出关键代码：溢出：隐藏；空白：nowrap；文本溢出：省略号；最大宽度：375px；示例地址：https://codepen.io/qianlong/p...18。多行文字溢出时显示省略号关键代码：overflow:hidden;文本溢出：省略号；显示：-webkit-box；/*设置n行，包括1行*/-webkit-line-clamp:2;-webkit-box-orient：垂直；示例地址：https://codepen.io/qianlong/p...19。使用“filter:grayscale(1)”使页面处于灰色模式。关键代码：body{filter:grayscale(1);}代码部署后可能出现的bug无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。原文：https://javascript.plainengli...交流有梦想，有干货，微信搜索【伟大的走向世界】关注这位凌晨还在洗碗的洗碗智慧。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。
