作者：JowayYoung仓库：Github、CodePen博客：官网、掘金、师傅、知乎公众号：智商前端特别声明：原创不易，未经授权不得转载或抄袭，如需转载，请联系作者授权系列。灵活运用CSS开发技巧请点这里。持续更新请点这里灵活运用JS开发技巧。持续更新，请点击此处获取持续更新。灵活运用PS裁剪技巧。工艺、工艺、体育等方面的巧手。代码作为现代先进技术，推动着人类科学技术的发展，同时也像文字一样支持着人类文化的进步。每写一篇好文章，都会用到很多写作技巧。强调、夸张、悬念、伏笔、呼应、伏笔、联想、想象、抑扬顿挫、点面结合、动静结合、叙事结合、情景交融、前后呼应、衬托对比，白描与详图，隐喻与象征，借古讽今，死与章显志，承前启后，开门见山，动静相映，虚实结合，写实写实还有虚写、寓意、咏物、抒情等等，这些应该是我们从小接触到的写作技巧。作为程序员，编写代码也需要大量的写作技巧。好的代码可以让人耳目一新，通俗易懂，舒服自然，同时给自己带来成就感（哈哈，这就是重点）。因此，我整理了近三年自己使用过的一些CSS开发技巧，希望能让大家写出耳目一新、通俗易懂、舒服自然的代码。既然写文章有这么多的写作技巧，我也要把CSS开发技巧梳理一下，给它们起个好记的名字。LayoutSkill:LayoutSkillsBehaviorSkill:BehaviorSkillsColorSkill:ColorSkillsFigureSkill:GraphicsSkillsComponentSkill:ComponentSkills备注代码仅做演示，不对语法进行详细解释。部分技能示例代码过长，使用CodePen保存，点击在线演示可查看兼容项目。点击链接可以查看当前属性的浏览器兼容性数据。可以根据项目的兼容性需求，考虑是否使用以下基于CSS的代码。没有JS代码，所有的属性和属性，除非特别说明，否则不做说明。这些方法都是CSS类型。一部分技巧是自己摸索出来的，另一部分技巧是参考前端高手的。这是一个互相学习的过程。让我们一起改进。布局技巧使用vw自定义rem自适应布局要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vwunit和calc()可以脱离JS控制场景：rempage布局（不兼容低版本移动端系统）compatible:vw,calc())/*基于UIwidth=750pxDPR=2*/html{font-size:calc(100vw/7.5);}使用:nth-child()选择指定元素要点：通过:nth-child()过滤指定元素设置样式场景：表格着色、边界元素排版（首元素、尾元素、左右元素）兼容：:nth-child())代码：在线demo使用writing-mode排版竖排文字重点：通过writing-mode方向调整文字排版场景：竖排，文言文，诗歌兼容性：writing-mode代码：在线demo使用text-align-last使文本两端对齐要点：用text-align-la设置文本两端对齐st:justify场景：未知字数中文对齐兼容性：text-align-last代码：在线演示使用:not()去除无用属性要点：使用:not()排除指定元素不要使用设置样式元素都在sides)Compatibility::not())代码：在线演示使用object-fit指定图片大小要点：使用object-fit使图片不受background-size的限制，使用![]()
标记图片背景大小场景：图片大小来自Compatiblewithadaptation:object-fitcode:onlinedemousesoverflow-xtypesetting水平列表要点：以flexbox或inline-block的形式水平排列元素，父元素设置overflow-x:auto水平滚动查看场景：水平滚动列表、导航栏元素过多但位置兼容性有限：overflow-x代码：在线演示使用text-overflow控制文本溢出要点：通过text-overflow:ellipsis...在末尾添加溢出文本场景：单行文本溢出，多行文本溢出兼容性：text-overflow,line-clamp,box-orient代码：在线演示使用transform绘制1px边框要点：在分辨率比较低的屏幕上显示1px边框会显得模糊，使用::before或::after和transform模拟adelicate1pxborder场景：container1pxbordercompatibility:transform代码：??在线demo使用transform翻转内容要点：使用transform:scale3d()翻转内容（水平翻转，垂直翻转，倒序翻转）场景：内容翻转兼容：转换代码：在线demo使用letter-spacing实现文字倒序排版要点：通过letter-spacing设置负字间距实现文字倒序场景：文言文诗词兼容：letter-spacing代码：在线demo使用margin-left排版leftheavyrightrightlist重点：使用flexbox水平布局时，最后一个元素通过margin-left:auto实现右对齐场景：右侧有图标的导航栏兼容：margin代码：在线演示行为技巧使用overflow-scrolling支持弹性滚动要点：非body元素在iOS页面的滚动操作会很卡（安卓不会出现这种情况），通过overflow-scrolling:touch调用Safari原生滚动支持弹性滚动并增加页面滚动的流畅度场景：iOS页面滚动兼容性：iOS自带-webkit-overflow-scrollingbody{-webkit-overflow-scrolling:touch;}.elem{overflow:auto;}使用transform开启GPU硬件加速要点：有时候执行动画可能会导致页面卡顿，可以在特定元素使用硬件加速来避免这个问题场景：动画元素（绝对定位，in同等级6+以上使用动画）兼容：transform.elem{转换：translate3d(0,0,0);/*translateZ(0)也是可以的*/}使用attr()抓取数据-*要点：自定义属性data-*在标签上，通过attr()获取其内容并赋值给content场景：提示框兼容性：data-*,attr())代码：在线演示使用:valid和:invalid校验表单要点：使用伪类:valid和:invalid匹配pattern校验表单输入内容场景：表单验证兼容：pattern,:valid,:invalid代码：在线演示使用pointer-events禁用事件触发要点：通过pointer-events:none禁用事件触发（默认事件，冒泡事件，鼠标事件，键盘事件等。)，相当于
