灵活运用 CSS 开发技巧

　　何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。

　　每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情等，这些应该都是我们从小到大写文章而接触到的写作技巧。

　　作为程序猿的我们，写代码同样也需要大量的写作技巧。一份良好的代码能让人耳目一新，让人容易理解，让人舒服自然，同时也让自己成就感满满(哈哈，这个才是重点)。因此，我整理下三年来自己使用到的一些 CSS 开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。

　　以下代码全部基于 CSS 进行书写，没有任何 JS 代码，没有特殊说明的情况下所有属性和方法都是 CSS 类型

　　一部分技巧是自己探讨出来的，另一部分技巧是参考各位前端大神们的，都是一个互相学习的工程，大家一起进步

　　要点：移动端使用 rem 布局需要通过 JS 设置不同屏幕宽高比的 font-size，结合 vw 单位和 calc 可脱离 JS 的控制

　　要点：通过 transform:scale3d 对内容进行翻转(水平翻转、垂直翻转、倒序翻转)

　　要点：在标签上自定义属性 data-*，通过 attr 获取其内容赋值到 content 上

　　要点：通过 pointer-events:none 禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等)，相当于的 disabled

　　要点：表单控件触发 focus 和 blur 事件后往父元素进行冒泡，在父元素上通过:focus-within 捕获该冒泡事件来设置样式

　　要点：将整个页面等比划分成小的单元格，每个单元格监听:hover，通过:hover 触发单元格的样式变化来描绘鼠标运动轨迹

　　要点：通过 transform-delay 或 animation-delay 设置负值时延保留动画起始帧，让动画进入页面不用等待即可运行

　　要点：通过 filter:grayscale 设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们

　　场景：容器投影、背景补间动画1、背景补间动画2、立体投影、文字立体投影、文字渐变立体投影、长投影、霓虹灯、灯光阴影

　　写到最后总结得差不多了，后续如果我想起还有哪些 CSS 开发技巧遗漏的，会继续在这篇文章上补全，同时也希望各位朋友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔，喜欢的点个赞或收个藏，保证你在开发时用得上。